/* ==================================================================
 * iTech Valet — THE CITY REPORT  (template-city-report.php)
 *
 * Loaded on City Report pages only, LAST: after ai-visibility-check.css
 * and lead-form.css (the hero and the form) and after article.css (the
 * report body). See inc/city-report.php.
 *
 * THE HERO IS THIS FILE'S (THEME-2, 2026-10-25, the locked design
 * board). It keeps the check page's band - the artwork and the white type
 * come from ai-visibility-check.css - and the form card is lead-form.css's,
 * unchanged. Its grid, headline, subhead, step cards and proof line are
 * all here.
 *
 * BELOW THE HERO, the report's six sections (THEME-5, section 02): every
 * look is here. article.css still dresses the table inside "See every
 * answer" and any region the theme prints whole (section 03).
 *
 * ASSET PATHS ARE ../../img/ - two levels. One: the white/grey artwork.
 * ================================================================== */


/* ==================================================================
 * 01 THE HERO
 *
 * Two columns from 901, words 60% and the form 40% with 64px between,
 * both top-aligned; at 900 and under the form drops below the words.
 * The design board's sizes are the desktop ones, and the phone ones
 * take over at 600 and under.
 *
 *   headline     Bebas 84 (40 on a phone, centred), the city in amber
 *   subhead      Lexend 24 (18)
 *   [button]     a phone only: back down to the form
 *   three cards  a Chewy number, a Bebas title and its tag, the words
 *   proof line   italic, an amber rule down its left
 *
 * The grid is its own, not lead-form.css's: that one is keyed on
 * .avc-hero__book and .avc-hero__widget, which this hero does not use,
 * so none of the check page's mascot, slack rows or fold rules apply.
 * Rules that answer ai-visibility-check.css's (.avc-band p, .avc-dark p,
 * both 0,1,1) are written at 0,2,0 or better.
 * ================================================================== */

/* THE BREADCRUMB (THEME-8), over the headline: the hubs' navy pill, white
   links, the page itself in the Chewy orange (pale blue straight on the
   artwork could not be read - Gerek, 2026-10-26). Left with the words,
   centred with the headline on a phone. Its 28px gap to the headline is
   the column's own.

   (0,2,1) on the li: .avc-band li sets the lead size at (0,1,1). The
   links' colour goes through main.css's link properties, which the
   hero's .links-inherit would otherwise make white and underlined. */
.cr-hero .cr-crumbs {
	--link-ink:        var(--c-white);
	--link-ink-hover:  #ffb347;
	--link-rule:       none;
	--link-rule-hover: underline;
}

.cr-crumbs ol {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	margin: 0;
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(6, 26, 58, 0.62);
	list-style: none;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.cr-hero .cr-crumbs li {
	display: inline-flex;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.cr-crumbs li + li::before { content: "\203A"; color: rgba(255, 255, 255, 0.6); }
.cr-hero .cr-crumbs span { color: #ffb347; }

@media (max-width: 600px) {
	.cr-crumbs { text-align: center; }
	.cr-crumbs ol { justify-content: center; }
}

/* 28 on top while stacked, 48 once the columns sit side by side
   (THEME-3: tighter, so the third card sits higher). */
.cr-hero.avc-hero:has(.lf-card) { padding-block: 28px 60px; }

.cr-hero__grid {
	display: grid;
	gap: 28px;
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 20px;
}

.cr-hero__words {
	display: grid;
	align-content: start;
	gap: 28px;
	min-width: 0;
}

.cr-hero .cr-hero__headline {
	margin: 0;
	font-size: 40px;
	line-height: 0.95;
	text-align: center;
	color: var(--c-white);
}

/* THE CITY, in Chewy - the site's handwritten face - at the headline's
   own size, in amber, and in normal case: Chewy in capitals loses its
   bounce. A slight tilt, which needs it to be a box, so it also never
   breaks in two. */
.cr-hero .cr-city {
	display: inline-block;
	font-family: var(--f-accent);
	font-weight: 400;
	text-transform: none;
	color: #ffb347;
	transform: rotate(-2deg);
}

/* The publisher's breaks are for the two-column headline. Stacked, the
   headline wraps on its own (a space follows each <br>, so the words
   still part). */
@media (max-width: 900px) {
	.cr-hero .cr-hero__headline br { display: none; }
}

.cr-hero .cr-hero__subhead {
	max-width: 720px;
	margin: 0;
	font-size: 18px;
	font-weight: 500;    /* Lexend 500 is not loaded; it renders with the 400 face */
	line-height: 1.4;
	color: #e3f0ff;
}

/* A PHONE'S WAY TO THE FORM, which is under everything else there. The
   card's own orange pill, at the column's width. */
.cr-hero .cr-hero__jump { margin: 0; }

.cr-hero__form {
	justify-self: center;
	width: 100%;
	max-width: 600px;
	scroll-margin-top: 16px;
}


/* THE THREE STEP CARDS. A number, then the title with its tag beside it,
   then the words. Each card's colours and its tag's shape belong to its
   place, not to its words: card 1 orange with a navy "FREE!" stamp, card
   2 white with an orange dashed ticket, card 3 pale blue with a navy
   pill and a tick. */
.cr-steps {
	display: grid;
	gap: 16px;
	max-width: 700px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-hero .cr-step {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin: 0;
	padding: 22px 28px 24px 24px;
	border-radius: 6px 28px 6px 28px;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
}

.cr-hero .cr-step__num {
	display: flex;
	flex: 0 0 70px;
	flex-direction: column;
	align-items: center;
	font-family: var(--f-accent);
	font-size: 58px;
	line-height: 0.85;
	text-align: center;
}

/* "STEP" OVER THE NUMBER (Gerek, 2026-10-25): a bare 1, 2, 3 did not read
   as things to do in order. Bebas, spaced out, in the number's own
   colour, with a short rule under it so it sits on the number as a label. */
.cr-hero .cr-step__word {
	margin-bottom: 6px;
	padding: 0 0 4px 3px;    /* the 3 on the left balances the spacing after the last letter */
	border-bottom: 2px solid currentColor;
	font-family: var(--f-display);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.cr-step__text { min-width: 0; }

.cr-hero .cr-step__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 10px;
}

.cr-hero .cr-step__title {
	font-family: var(--f-display);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.cr-hero .cr-step__body {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.45;
}

.cr-hero .cr-step__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
	white-space: nowrap;
	color: var(--c-white);
}

/* 1. FREE! */
.cr-hero .cr-step--1 { background: linear-gradient(135deg, #ffb347, #f28a1c); }
.cr-hero .cr-step--1 .cr-step__num   { color: var(--c-white); }
.cr-hero .cr-step--1 .cr-step__title { color: #1a1a1a; }
.cr-hero .cr-step--1 .cr-step__body  { color: #2b1d08; }

.cr-hero .cr-step--1 .cr-step__tag {
	padding: 6px 18px 8px;
	border-radius: 6px;
	background: #0b2b5a;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
	font-family: var(--f-accent);
	font-size: 30px;
	transform: rotate(-7deg);
}

/* 2. 7-DAY HOLD */
.cr-hero .cr-step--2 { background: #ffffff; }
.cr-hero .cr-step--2 .cr-step__num   { color: #2494e0; }
.cr-hero .cr-step--2 .cr-step__title { color: #0b2b5a; }
.cr-hero .cr-step--2 .cr-step__body  { color: #2f4660; }

.cr-hero .cr-step--2 .cr-step__tag {
	padding: 7px 14px;
	border: 2px dashed rgba(255, 255, 255, 0.75);
	outline: 3px solid #e8730f;
	outline-offset: -1px;
	background: linear-gradient(90deg, #f7a21b, #e8730f);
	box-shadow: 0 6px 14px rgba(232, 115, 15, 0.4);
	font-family: var(--f-display);
	font-size: 16px;
	letter-spacing: 2px;
	transform: rotate(4deg);
}

/* 3. Done for you */
.cr-hero .cr-step--3 { background: #dbeeff; }
.cr-hero .cr-step--3 .cr-step__num   { color: #0b4a8f; }
.cr-hero .cr-step--3 .cr-step__title { color: #0b2b5a; }
.cr-hero .cr-step--3 .cr-step__body  { color: #2f4660; }

.cr-hero .cr-step--3 .cr-step__tag {
	padding: 6px 16px 8px 12px;
	border-radius: 999px 4px 999px 4px;
	background: #0b4a8f;
	box-shadow: 0 6px 14px rgba(11, 74, 143, 0.4);
	font-family: var(--f-accent);
	font-size: 18px;
	transform: rotate(-3deg);
}

/* main.css sets `svg { height: auto }`; a glyph in a flex row needs its
   own. In em, so it follows the tag's size. */
.cr-step__check {
	flex: 0 0 auto;
	width: 0.85em;
	height: 0.85em;
	color: #8fd0ff;
}


/* THE PROOF LINE, AND ITS FOOTNOTE IN SMALL TYPE UNDER IT. The rule is
   on the line alone; the footnote lines up with the line's words. */
.cr-hero__proof { max-width: 700px; }

.cr-hero .cr-hero__proof-line {
	margin: 0;
	padding-left: 16px;
	border-left: 4px solid #f5a623;
	font-size: 18px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
	color: var(--c-white);
}

.cr-hero .cr-hero__footnote {
	margin: 8px 0 0;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.3;
	color: #c6ddf5;
}

.cr-hero__footnote small { font-size: inherit; }


@media (min-width: 601px) {
	.cr-hero .cr-hero__headline { font-size: clamp(48px, 5.85vw, 84px); }

	.cr-hero .cr-hero__subhead   { font-size: 24px; }
	.cr-hero .cr-step__num       { font-size: 84px; }
	.cr-hero .cr-step__word      { font-size: 18px; }
	.cr-hero .cr-step__title     { font-size: 32px; }
	.cr-hero .cr-step__body      { font-size: 20px; }
	.cr-hero .cr-hero__proof-line { font-size: 19px; }

	.cr-hero .cr-step--1 .cr-step__tag { font-size: 38px; }
	.cr-hero .cr-step--2 .cr-step__tag { font-size: 20px; }
	.cr-hero .cr-step--3 .cr-step__tag { font-size: 22px; }

	.cr-hero.avc-hero:has(.lf-card) { padding-bottom: 80px; }
}

@media (min-width: 901px) {
	.cr-hero__grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		column-gap: 64px;
		align-items: start;
	}

	.cr-hero .cr-hero__jump { display: none; }

	.cr-hero__form {
		justify-self: stretch;
		max-width: none;
	}

	/* TIGHTER, NOT SMALLER (THEME-3, 2026-10-25). Less air round the
	   blocks and inside the cards, so card 3 sits higher on a desktop;
	   the headline, titles and tags keep their sizes. */
	.cr-hero.avc-hero:has(.lf-card) { padding-block: 48px 40px; }

	.cr-hero__words { gap: 20px; }

	.cr-hero .cr-hero__headline {
		line-height: 0.9;
		text-align: left;
	}
	.cr-hero .cr-hero__subhead  { font-size: 22px; }

	.cr-steps { gap: 12px; }

	.cr-hero .cr-step      { padding: 18px 26px 20px 22px; }
	.cr-hero .cr-step__num  { font-size: 76px; }
	.cr-hero .cr-step__body { font-size: 19px; }
}


/* ==================================================================
 * 02 THE REPORT'S SIX SECTIONS  (THEME-5, 2026-10-25, the body board)
 *
 *   scoreboard   the check page's CTA artwork, three tiles, the answer
 *   engines      white/grey pattern: question pills, five engine cards,
 *                the navy "are you on it?" band, the table in a <details>
 *   takeaways    white: three cards stepping blue to pale
 *   stat band    navy, the big Chewy number, a blue rule under it
 *   FAQs         white/grey pattern: an accordion
 *   closer       the hero's artwork: is the city still open, the three
 *                slot cards (THEME-6) or the pill, the button back up to
 *                the form
 *
 * The board's sizes are the desktop ones, from 600 up (tablet reads as
 * desktop). A phone has every grid in one column and the display type -
 * Bebas, Chewy, the lead copy and the bands' padding - 20% smaller. Body
 * copy stops at 16px and small print keeps its size: 20% off 13px is
 * not readable.
 *
 * Every rule is at 0,2,0 or better where main.css or article.css has one
 * for the same element (h2/h3/p at 0,0,1; .site-main links at 0,3,1 are
 * steered with their own custom properties instead).
 * ================================================================== */

/* THE SECTION HEADINGS. Bebas in capitals, centred; the city in the
   hero's Chewy amber. */
.cr-h2 {
	margin: 0 0 24px;
	font-family: var(--f-display);
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	text-align: center;
}

.cr-h2 .cr-city {
	display: inline-block;
	font-family: var(--f-accent);
	font-weight: 400;
	text-transform: none;
	color: #ffb347;
	transform: rotate(-2deg);
}

/* The home page's white/grey artwork, which home.css carries under a
   class this page does not load. The same file. */
.cr-bg-white-grey {
	background-color: var(--c-white);
	background-image: url("../../img/bg/home-white-grey.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* THE NUMBERED CIRCLES. One colour per question, the same in the pills
   and in every engine card's rows. */
.cr-qnum {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-family: var(--f-accent);
	font-size: 22px;
	line-height: 1;
	color: var(--c-white);
}

.cr-qnum--1 { background: #2494e0; }
.cr-qnum--2 { background: #f28a1c; }
.cr-qnum--3 { background: #0b4a8f; }

/* The card submit's own orange pill, as wide as its words. */
.cr-onit .lf-form__submit,
.cr-closer .lf-form__submit {
	display: inline-flex;
	width: auto;
	margin: 0;
}


/* ---------- 1. THE SCOREBOARD ---------- */

/* Navy under the artwork, and in its place if it does not load. */
.section.cr-score {
	padding-block: 45px;
	background-color: #0b2b5a;
	text-align: center;
	color: var(--c-white);
}

.cr-score .cr-score__title {
	margin-bottom: 28px;
	font-size: 45px;
	color: var(--c-white);
}

.cr-tiles {
	display: grid;
	gap: 16px;
	max-width: 980px;
	margin: 0 auto 32px;
	padding: 0;
	list-style: none;
}

.cr-score .cr-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 22px 18px 24px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px 28px 6px 28px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--c-white);
}

.cr-tile__num {
	font-family: var(--f-display);
	font-size: 77px;
	line-height: 0.9;
	color: var(--c-white);
}

.cr-tile--named .cr-tile__num { color: #8fd0ff; }

.cr-tile__label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

/* NEVER NAMED: the one solid card, lifted. Its words are dark, as on
   the hero's orange step card; white small type does not read on it. */
.cr-score .cr-tile--never {
	border-color: transparent;
	background: linear-gradient(135deg, #ffb347, #f28a1c);
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
	transform: scale(1.06);
}

.cr-tile--never .cr-tile__num {
	font-family: var(--f-accent);
	font-size: 83px;
}

.cr-tile--never .cr-tile__label {
	font-weight: 700;
	color: #1a1a1a;
}

.cr-score__answer {
	max-width: 860px;
	margin-inline: auto;
}

.cr-score .cr-score__answer p {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-white);
}

.cr-score__answer > :last-child { margin-bottom: 0; }

@media (min-width: 600px) {
	.section.cr-score { padding-block: 56px; }
	.cr-score .cr-score__title { font-size: 56px; }

	.cr-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		margin-bottom: 40px;
	}

	.cr-tile__num { font-size: 96px; }
	.cr-tile--never .cr-tile__num { font-size: 104px; }
	.cr-tile__label { font-size: 18px; }

	.cr-score .cr-score__answer p { font-size: 21px; }
}


/* ---------- 2. THE ENGINES ---------- */

.section.cr-engines { padding-block: 51px; }

.cr-engines .cr-engines__title {
	font-size: 42px;
	color: #2494e0;
}

.cr-engines__intro {
	max-width: 860px;
	margin: 0 auto 28px;
	text-align: center;
}

.cr-engines .cr-engines__intro p {
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.45;
	color: #0b2b5a;
}

/* THE THREE QUESTIONS, as pills. Stacked until 900: three in a row any
   narrower and each long question runs to four lines. */
.cr-questions {
	display: grid;
	gap: 14px;
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
}

.cr-engines .cr-question {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px 26px 12px 12px;
	border-radius: 999px;
	background: var(--c-white);
	box-shadow: 0 8px 24px rgba(11, 43, 90, 0.13);
}

.cr-question__text {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: #0b2b5a;
}

/* FIVE ENGINE CARDS. One column on a phone; three to a row from 600, the
   last two centred under them; all five in one row from 1100. */
.cr-engine-cards {
	display: grid;
	gap: 20px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.cr-engines .cr-engine {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 16px 18px 18px;
	border-top: 6px solid var(--cr-engine, #0b2b5a);
	border-radius: 6px 24px 6px 24px;
	background: var(--c-white);
	box-shadow: 0 10px 28px rgba(11, 43, 90, 0.14);
}

.cr-engine--chatgpt    { --cr-engine: #10a37f; }
.cr-engine--gemini     { --cr-engine: #4285f4; }
.cr-engine--perplexity { --cr-engine: #20808d; }
.cr-engine--grok       { --cr-engine: #1a1a1a; }
.cr-engine--claude     { --cr-engine: #d97757; }

/* The engine's name, and over the numbers at the right one small "named"
   for the whole column (Gerek, 2026-10-25: "named" on every row crowded
   the card). Each row still says it to a screen reader. */
.cr-engine__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 8px;
}

.cr-engine__col {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #5b6f86;
}

.cr-engines .cr-engine__name {
	margin: 0;
	font-family: var(--f-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #0b2b5a;
}

.cr-engine__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-engines .cr-engine__row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 0;
	border-top: 1px solid #e3ebf5;
}

.cr-engine__row .cr-qnum {
	width: 26px;
	height: 26px;
	font-size: 15px;
}

.cr-engine__q {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: #2f4660;
}

.cr-engine__count {
	flex: 0 0 auto;
	white-space: nowrap;
}

.cr-engine__n {
	font-family: var(--f-display);
	font-size: 24px;
	line-height: 1;
	color: #0b2b5a;
}

.cr-engines .cr-engine__note {
	margin: auto 0 0;
	padding-top: 10px;
	border-top: 1px solid #e3ebf5;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: #2f4660;
}

/* THE LIST IS SHORT. The navy band and the one button, nothing else. */
.cr-onit {
	padding: 26px 20px;
	border-radius: 6px 28px 6px 28px;
	background: #0b2b5a;
	text-align: center;
}

.cr-engines .cr-onit__line {
	margin: 0 0 20px;
	font-family: var(--f-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--c-white);
}

.cr-onit__ask {
	display: inline-block;
	font-family: var(--f-accent);
	text-transform: none;
	letter-spacing: normal;
	color: #ffb347;
	transform: rotate(-2deg);
}

.cr-engines .cr-onit__cta { margin: 0; }

/* SEE EVERY ANSWER. Closed by default; the table is in the page either
   way. Inside, the table is the article's, and on a phone each row is a
   card (section 03). */
.cr-every { margin-top: 28px; }

.cr-every__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 8px 0;
	font-family: var(--f-display);
	font-size: 26px;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #2494e0;
	cursor: pointer;
	list-style: none;
}

.cr-every__toggle::-webkit-details-marker { display: none; }

.cr-every__toggle::after {
	content: "+";
	font-family: var(--f-body);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

.cr-every[open] .cr-every__toggle::after { content: "\2212"; }

.cr-every .article-body__inner {
	margin-top: 16px;
	font-size: 16px;
}

@media (min-width: 600px) {
	.section.cr-engines { padding-block: 64px; }
	.cr-engines .cr-engines__title { font-size: 52px; }
	.cr-engines .cr-engines__intro p { font-size: 21px; }

	.cr-engine-cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.cr-engines .cr-engine { flex: 0 1 calc((100% - 40px) / 3); }

	.cr-engines .cr-engine__name { font-size: 26px; }
	.cr-engine__n { font-size: 30px; }

	.cr-onit { padding: 32px; }
	.cr-engines .cr-onit__line { font-size: 40px; }
}

@media (min-width: 900px) {
	.cr-questions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (min-width: 1100px) {
	.cr-engine-cards { gap: 16px; }
	.cr-engines .cr-engine { flex-basis: calc((100% - 64px) / 5); }
}


/* ---------- 3. THE TAKEAWAYS ---------- */

.section.cr-takeaways {
	padding-block: 51px;
	background: var(--c-white);
}

.cr-takeaways .cr-takeaways__title {
	font-size: 42px;
	color: #2494e0;
}

.cr-takeaways__lead {
	max-width: 860px;
	margin: 0 auto 28px;
	text-align: center;
}

.cr-take-cards {
	display: grid;
	gap: 20px;
}

/* Links in a card take its own colour, underlined: the site's blue does
   not read on the blue card. */
.cr-takeaways .cr-take {
	--link-ink:       currentColor;
	--link-ink-hover: currentColor;
	--link-rule:      underline;
	margin: 0;
	padding: 26px;
	border-radius: 6px 28px 6px 28px;
	box-shadow: 0 14px 32px rgba(11, 43, 90, 0.16);
}

.cr-takeaways .cr-take--1 { background: #2494e0; color: var(--c-white); }
.cr-takeaways .cr-take--2 { background: #8fd0ff; color: #0b2b5a; }
.cr-takeaways .cr-take--3 { background: #dbeeff; color: #0b2b5a; }

.cr-take__icon {
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
}

.cr-take--3 .cr-take__icon { color: #2494e0; }

.cr-takeaways .cr-take__title {
	margin: 0 0 12px;
	font-family: var(--f-display);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: inherit;
}

.cr-takeaways .cr-take__body p,
.cr-takeaways .cr-take__body li {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	color: inherit;
}

.cr-take__body > :last-child { margin-bottom: 0; }

/* The sources line under the cards. */
.cr-takeaways__more {
	max-width: 900px;
	margin: 28px auto 0;
	text-align: center;
}

.cr-takeaways .cr-takeaways__more p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #2f4660;
}

/* A region the theme could not take apart, as the article prints it. */
.cr-takeaways .article-body__inner blockquote {
	margin: 30px 0;
	padding-left: 20px;
	border-left: 4px solid var(--c-blue);
}

@media (min-width: 600px) {
	.section.cr-takeaways { padding-block: 64px; }
	.cr-takeaways .cr-takeaways__title { font-size: 52px; }
	.cr-takeaways .cr-take { padding: 32px; }
	.cr-takeaways .cr-take__title { font-size: 30px; }
	.cr-takeaways .cr-take__body p,
	.cr-takeaways .cr-take__body li { font-size: 17px; }
}

@media (min-width: 900px) {
	.cr-take-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}
}


/* ---------- 4. THE STAT BAND ---------- */

.section.cr-stat {
	padding-block: 35px;
	border-bottom: 8px solid #2494e0;
	background: #0b2b5a;
	color: var(--c-white);
}

.cr-stat__row {
	display: grid;
	gap: 10px;
	max-width: 1000px;
	margin-inline: auto;
	text-align: center;
}

.cr-stat .cr-stat__num {
	margin: 0;
	font-family: var(--f-accent);
	font-size: 88px;
	line-height: 0.9;
	white-space: nowrap;
	color: #ffb347;
}

.cr-stat__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.cr-stat .cr-stat__sentence {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-white);
}

/* The figure the big number was taken from, where it sits mid-sentence. */
.cr-stat__hit { color: #ffb347; }

.cr-stat .cr-stat__source {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: #8fd0ff;
}

.cr-stat__source cite { font-style: normal; }

@media (min-width: 600px) {
	.section.cr-stat { padding-block: 44px; }

	.cr-stat__row {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 36px;
		align-items: center;
		text-align: left;
	}

	.cr-stat .cr-stat__num { font-size: 110px; }
	.cr-stat .cr-stat__sentence { font-size: 26px; }
}


/* ---------- 5. THE FAQS ---------- */

.section.cr-faqs { padding-block: 51px; }
.section.cr-faqs > .container { max-width: 900px; }

.cr-faqs .cr-faqs__title {
	font-size: 42px;
	color: #2494e0;
}

.cr-faq-list {
	display: grid;
	gap: 16px;
}

.cr-faq {
	border-radius: 14px;
	background: var(--c-white);
	box-shadow: 0 8px 24px rgba(11, 43, 90, 0.12);
}

/* THE QUESTION IS THE WHOLE ROW, a +/- at its right. A <summary>, so it
   opens with a click, a tap or the keyboard, with no script. */
.cr-faq__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 14px;
	cursor: pointer;
	list-style: none;
}

.cr-faq__toggle::-webkit-details-marker { display: none; }

.cr-faqs .cr-faq__q {
	margin: 0;
	font-family: var(--f-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #d9741a;
}

/* The sign: two bars; the upright one goes when the answer is open. */
.cr-faq__sign {
	position: relative;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fdeedd;
}

.cr-faq__sign::before,
.cr-faq__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: #d9741a;
	transform: translate(-50%, -50%);
}

.cr-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.cr-faq[open] .cr-faq__sign::after { display: none; }

.cr-faq__a { padding: 0 20px 22px; }

.cr-faqs .cr-faq__a p,
.cr-faqs .cr-faq__a li {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #2f4660;
}

.cr-faq__a > :last-child { margin-bottom: 0; }

/* "Want the bigger picture?" and its links. */
.cr-faqs__more {
	margin-top: 28px;
	text-align: center;
}

.cr-faqs .cr-faqs__more p {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #0b2b5a;
}

@media (min-width: 600px) {
	.section.cr-faqs { padding-block: 64px; }
	.cr-faqs .cr-faqs__title { font-size: 52px; }
	.cr-faq__toggle { padding: 20px 26px; }
	.cr-faqs .cr-faq__q { font-size: 26px; }
	.cr-faq__a { padding: 0 26px 24px; }
	.cr-faqs .cr-faq__a p,
	.cr-faqs .cr-faq__a li { font-size: 18px; }
	.cr-faqs .cr-faqs__more p { font-size: 17px; }
}


/* ---------- 6. THE CLOSER ---------- */

.section.cr-closer {
	padding-block: 58px;
	background-color: #0b2b5a;
	text-align: center;
	color: var(--c-white);
}

.cr-closer .cr-closer__title {
	margin-bottom: 28px;
	font-size: 58px;
	color: var(--c-white);
}

/* THE TERRITORY PILL, big and tilted. OPEN is orange, the colour of the
   button that takes the slot; LOCKED is the step cards' deep blue. */
.cr-closer .cr-pill {
	display: inline-block;
	margin: 0 0 28px;
	padding: 10px 28px 8px;
	border-radius: 999px;
	font-family: var(--f-display);
	font-size: 27px;
	line-height: 1.1;
	letter-spacing: 2px;
	color: var(--c-white);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
	transform: rotate(-2deg);
}

.cr-closer .cr-pill--open   { background: linear-gradient(90deg, #f28a1c, var(--c-orange)); }
.cr-closer .cr-pill--locked { background: #0b4a8f; }

.cr-closer .cr-closer__para {
	max-width: 720px;
	margin: 0 auto 28px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: #e3f0ff;
}

.cr-closer .cr-closer__cta { margin: 0 0 20px; }

.cr-closer .lf-form__submit {
	min-height: 51px;
	padding-inline: 32px;
}

.cr-closer__notes {
	max-width: 720px;
	margin-inline: auto;
}

.cr-closer .cr-closer__notes p {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: #c6ddf5;
}

.cr-closer__notes > :last-child { margin-bottom: 0; }

/* THE SLOT BOARD (THEME-6, the owner's mockup): three white cards, one
   per lane, in place of the pill. Stacked to 640, three in a row from
   641 at most 1080 wide. Each card's colour is its status's: --cr-slot is
   the pill's border and dot, --cr-slot-word the word. */
.cr-slots {
	display: grid;
	gap: 22px;
	max-width: 1080px;
	margin: 0 auto 28px;
	padding: 0;
	list-style: none;
}

.cr-closer .cr-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 28px 26px;
	border-radius: 22px 22px 22px 6px;
	background: var(--c-white);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
	text-align: center;
}

.cr-slot--open   { --cr-slot: #22c55e; --cr-slot-word: #16a34a; }
.cr-slot--held   { --cr-slot: #f59e0b; --cr-slot-word: #b45309; }
.cr-slot--locked { --cr-slot: #6b7c93; --cr-slot-word: var(--c-white); }

.cr-closer .cr-slot--locked { background: #dbe4ee; }

.cr-closer .cr-slot__title {
	margin: 0 0 6px;
	font-family: var(--f-display);
	font-size: 36px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	text-wrap: balance;
	color: #0b2b5a;
}

.cr-closer .cr-slot__about,
.cr-closer .cr-slot__sentence {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: #4a5d73;
}

.cr-closer .cr-slot__about { margin: 0 0 18px; }
.cr-closer .cr-slot__sentence { margin: 16px 0 0; }

.cr-closer .cr-slot__pill {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	margin: 0;
	padding: 8px 26px 6px;
	border: 3px solid var(--cr-slot);
	border-radius: 999px;
	background: var(--c-white);
	color: var(--cr-slot-word);
}

.cr-closer .cr-slot--locked .cr-slot__pill { background: var(--cr-slot); }

.cr-slot__dot {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--cr-slot);
}

/* main.css sets `svg { height: auto }`; the glyph keeps its square. */
.cr-slot__lock {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

.cr-slot__word {
	font-family: var(--f-display);
	font-size: 34px;
	line-height: 1;
	letter-spacing: 3px;
	white-space: nowrap;
}

/* OPEN's dot pulses: a ring of box-shadow, so nothing around it moves. */
@media (prefers-reduced-motion: no-preference) {
	.cr-slot--open .cr-slot__dot { animation: cr-slot-pulse 1.6s ease-out infinite; }
}

@keyframes cr-slot-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
	70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.cr-closer .cr-closer__hold {
	margin: 0 0 28px;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--c-white);
}

/* Three in a row. Between 641 and the 1080 board the word, the title and
   the card's sides come down with the width so OPEN, ON HOLD and LOCKED
   stay on one line inside their cards. */
@media (min-width: 641px) {
	.cr-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cr-closer .cr-slot { padding-inline: clamp(14px, 2vw, 26px); }
	.cr-closer .cr-slot__title { font-size: clamp(28px, 3.3vw, 36px); }
	.cr-closer .cr-slot__pill { padding-inline: clamp(14px, 2vw, 26px); }
	.cr-slot__word { font-size: clamp(26px, 3.6vw, 40px); }
}

@media (min-width: 600px) {
	.section.cr-closer { padding-block: 72px; }
	.cr-closer .cr-closer__title { font-size: 72px; }
	.cr-closer .cr-pill { font-size: 34px; }
	.cr-closer .cr-closer__para { font-size: 22px; }
	.cr-closer .lf-form__submit {
		min-height: 64px;
		padding-inline: 44px;
	}
}


/* ==================================================================
 * 03 THE AUDIT TABLE
 *
 * Inside "See every answer", or printed whole where a page has no engine
 * fields. article.css already makes a table scroll inside itself rather
 * than widen the page. That is what happens here from 600 up, and on a
 * phone whenever the cells carry no column names.
 *
 * BELOW 600, A ROW IS A CARD. Every cell names its column from the
 * data-label inc/city-report.php copies off the table's own header, so
 * "Clinics named: 4" reads without the header in view. Nothing is
 * cropped and nothing scrolls sideways.
 * ================================================================== */

.article-body__inner.cr-audit caption {
	padding-bottom: 10px;
	font-weight: 700;
	text-align: left;
	color: var(--c-navy);
}

.article-body__inner.cr-audit td,
.article-body__inner.cr-audit th { vertical-align: top; }

@media (max-width: 599px) {
	.article-body__inner.cr-audit table:has(td[data-label]) {
		display: block;
		overflow: visible;
		background: none;
		font-size: 17px;
	}

	.article-body__inner.cr-audit table:has(td[data-label]) caption { display: block; }

	/* Taken out of view, not out of the page: a screen reader still has
	   the column names, and every cell says its own anyway. */
	.article-body__inner.cr-audit table:has(td[data-label]) thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.article-body__inner.cr-audit table:has(td[data-label]) tbody,
	.article-body__inner.cr-audit table:has(td[data-label]) tr,
	.article-body__inner.cr-audit table:has(td[data-label]) td {
		display: block;
	}

	.article-body__inner.cr-audit table:has(td[data-label]) tr {
		margin-bottom: 14px;
		padding: 6px 0;
		border: 1px solid var(--c-navy);
		border-radius: 15px;
		background: var(--c-white);
	}

	/* The column's name BESIDE the value, not over it: fifteen rows of
	   five stacked pairs ran to 4,300px at 390. Side by side they are
	   about half that, and a long warning still wraps in its own column. */
	.article-body__inner.cr-audit table:has(td[data-label]) td {
		display: grid;
		grid-template-columns: 7.5em minmax(0, 1fr);
		column-gap: 12px;
		padding: 5px 16px;
		border: 0;
		line-height: 1.4;
	}

	.article-body__inner.cr-audit td[data-label]::before {
		content: attr(data-label);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.55;
		color: var(--c-navy);
	}
}