/* ==================================================================
 * THE REPORT PAGES  —  /bust-a-move/, /book/ and /thank-you/
 *
 * Three pages for one audience: a business owner who has asked for, or
 * is holding, the lead report. Loaded on those three and nowhere else -
 * see functions.php and itechvalet_report_page_slugs().
 *
 * NOT MEASURED OFF ANYTHING. Like the research pages these are new work
 * with no live original, so every value is chosen from the tokens in
 * main.css. A change here is a design call, not a fidelity regression.
 *
 * THE ONE COLOUR THAT IS NOT THE SITE'S, AND WHY. The site's action
 * colour is orange and its button is the amber-to-orange pill. These
 * two pages belong to the REPORT, and the brief for them is the
 * report's button: green, a full pill, with a small calendar on it. So
 * the green is the report's own (`--green` in the report renderer), not
 * a new one, and the pill's radius, weight and shadow are the report
 * button's. Nothing outside `.rp` can reach it.
 *
 * 01 TOKENS
 * 01b THE HEADER - THE LOGO, CENTRED
 * 02 THE GREEN BUTTON
 * 03 BUST A MOVE - THE LAYOUT
 * 04 BUST A MOVE - THE VIDEO AND ITS SOUND BUTTON
 * 05 BOOK - THE HEAD AND THE SCHEDULER SLOT
 * 06 THANK YOU - /thank-you/
 * ================================================================== */


/* ==================================================================
 * 01 TOKENS
 * ================================================================== */

.rp {
	--rp-green:       #1a7a4d;   /* the report's --green: 5.3:1 under white type */
	--rp-green-deep:  #14603c;   /* hover: the same hue, one step down */

	/* THE VIDEO'S SHAPE, as width over height. 9:16 until the file says
	   otherwise - the script reads the real figure off the video and
	   writes it here, so a 4:5 or a 3:4 upload gets its own frame rather
	   than a crop. */
	--rp-ar:          0.5625;

	/* HOW TALL THE VIDEO MAY BE. A share of the SCREEN, not a fixed
	   number, because the point of the page is that the button is in
	   view with the video. svh is the height with the phone's address
	   bar showing - the pessimistic one, which is the one that decides
	   what is above the fold. The vh line is for browsers without it.

	   52 WHEN STACKED, AND IT IS A SUM, NOT A TASTE. An iPhone with
	   Safari's bars showing has about 664px to give. Header 93, the
	   gaps, two lines of headline and the button come to about 304;
	   52% of 664 is 345; together 649 - so the green button is on
	   screen with the video before anyone scrolls. At 58 it sat 40px
	   under the fold. An upright tablet has room to spare at 52. */
	--rp-stage-h:     min(52vh, 680px);
	--rp-stage-h:     min(52svh, 680px);
}

/* SIDE BY SIDE, and so the taller video: the same condition as the layout
   in section 03, and the two must stay the same condition. */
@media (min-width: 1025px), (min-width: 769px) and (orientation: landscape) {
	.rp {
		--rp-stage-h: min(74vh, 680px);
		--rp-stage-h: min(74svh, 680px);
	}
}


/* ==================================================================
 * 01b THE HEADER - THE LOGO, CENTRED
 *
 * header-report.php prints the site's bar with only the logo in it.
 * main.css lays that bar out as `space-between`, which with one child
 * means hard left - right for a bar with a menu on the other side,
 * lopsided for a bar with nothing else in it.
 *
 * Here and not in main.css: this file is loaded on these two pages
 * only, so no other header can be reached by it.
 * ================================================================== */

.site-header--report .site-header__inner {
	justify-content: center;
}


/* ==================================================================
 * 02 THE GREEN BUTTON
 *
 * The report's button, at a size that suits a page instead of a
 * document: its 999px pill, its 700 weight, its navy-tinted shadow.
 *
 * !! THE `a` IN THE SELECTOR IS LOAD-BEARING. main.css carries
 * `a:not(.cta-button):not(.to-top):hover { color: navy }` at (0,3,1),
 * which outranks a bare `.rp-button:hover` and repaints the label navy
 * on green - 2.1:1, all but gone, and only while a pointer is over it.
 * `.rp a.rp-button:hover` ties it and wins on source order. This is the
 * fifth time that rule has needed answering on this site; see the note
 * beside it in main.css.
 * ================================================================== */

.rp a.rp-button,
.rp a.rp-button:hover,
.rp a.rp-button:focus-visible {
	color: var(--c-white);
}

.rp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px 44px;
	border-radius: var(--radius-pill);
	background: var(--rp-green);
	box-shadow: var(--shadow-cta);
	font-family: var(--f-body);
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);   /* 22 on a phone, 28 at desktop */
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background var(--ease), box-shadow var(--ease), transform var(--ease);
}

/* The same response the site's own button gives: a colour change that
   does the work, and a 1px lift that supports it. */
.rp-button:hover,
.rp-button:focus-visible {
	background: var(--rp-green-deep);
	box-shadow: 0 4px 14px rgba(6, 58, 108, 0.3);
	transform: translateY(-1px);
}

.rp-button:active {
	transform: translateY(0);
	box-shadow: 0 1px 5px rgba(6, 58, 108, 0.3);
}

/* main.css sets `svg { height: auto }`, which is right for artwork and
   wrong for a glyph in a flex row - it would take its height from the
   viewBox. Sized here, and it does not shrink when the label wraps. */
.rp-button__icon {
	flex: 0 0 auto;
	width: 1.2em;
	height: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
	.rp-button { transition: none; }
	.rp-button:hover,
	.rp-button:focus-visible { transform: none; }
}


/* ==================================================================
 * 02b THE ARTWORK BEHIND /book/ AND /bust-a-move/
 *
 * THE HOMEPAGE HERO'S OWN - the blue field of doodles with the light
 * burst in the middle - and so the homepage hero's white headline.
 * Gerek, 2026-10-11: first for /book/, looking at the calendar on a
 * plain white page, then "do the same" for /bust-a-move/. The colour
 * under it is the artwork's own mid blue, for the moment before the
 * file arrives. home.css has this as `.bg-hero`, but that stylesheet is
 * the homepage's alone, so the one line is repeated here.
 *
 * THE SHADOW. White on the burst is white on the artwork's LIGHTEST
 * blue. The soft navy shadow is what holds small type there - the 22px
 * line on /book/ most of all. The homepage's headline has none; it does
 * not sit over the burst. One value for every piece of white type on
 * the artwork, so it is changed or removed in one place.
 *
 * /thank-you/ JOINED THEM 2026-10-12, the day the form went live: it is
 * the page between the form and these two, and Gerek's "make all the
 * changes" covered the offer to match it.
 * ================================================================== */

.rp-book,
.rp-move,
.rp-thanks {
	--rp-art-shadow: 0 2px 12px rgba(4, 30, 60, 0.4);
	background: #1f78c8 url("../../img/bg/home-hero.webp") center / cover no-repeat;
}

/* THE BUTTON IS THE SITE'S ORANGE ON THE ARTWORK, NOT THE REPORT'S GREEN.
   Gerek, 2026-10-11, seeing green on the blue: "the green doesn't work...
   I'd change it to orange." These are the values of `.cta-button` in
   main.css - the amber-to-orange run, the 3px white rim, the grey shadow,
   the run reversed on hover - so it is the same button the header wears
   on every other page. Size and shape stay `.rp-button`'s.

   All three report pages are on the artwork now, so nothing is left
   wearing section 02's green; it stays as the base the orange is laid on.

   `.rp a.rp-button` and not less: section 02's own colour rule is that
   heavy, for the reason given there. */
.rp-book a.rp-button,
.rp-move a.rp-button,
.rp-thanks a.rp-button {
	border: 3px solid var(--c-white);
	background: linear-gradient(90deg, var(--c-amber) 0%, var(--c-orange) 100%);
	box-shadow: 3px 2px 10px rgba(61, 61, 61, 0.55);
}

.rp-book a.rp-button:hover,
.rp-book a.rp-button:focus-visible,
.rp-move a.rp-button:hover,
.rp-move a.rp-button:focus-visible,
.rp-thanks a.rp-button:hover,
.rp-thanks a.rp-button:focus-visible {
	background: linear-gradient(90deg, var(--c-orange) 0%, var(--c-amber) 100%);
	box-shadow: 4px 3px 12px rgba(61, 61, 61, 0.55);
}


/* ==================================================================
 * 03 BUST A MOVE - THE LAYOUT
 *
 * Three direct children of one grid: the headline, the video, the
 * button. That is also their order in the markup.
 *
 * STACKED - a phone, and a tablet held upright. Gerek's order,
 * 2026-10-07: "Hey," / "Why not bust a move?" / the video / the green
 * button. One column, centred, in source order; nothing is reordered.
 *
 * SIDE BY SIDE - everything wider than it is tall from 769, and
 * everything from 1025. Video left, headline and button right.
 *
 * WHY ORIENTATION IS IN THE CONDITION. "Tablet" is not a width: an
 * iPad is 768 or 820 across upright and 1024 to 1366 on its side. On
 * its side it is a short, wide screen - 1024 x 768 - and stacking four
 * things down a 768px-tall window puts the button under the fold,
 * where side by side everything fits at once. So: upright tablets
 * stack, sideways ones do not. This replaces the site's usual rule
 * that a tablet reads as desktop, on this page only.
 * ================================================================== */

.rp-move {
	padding-block: clamp(1rem, 4vw, 56px) clamp(2.5rem, 6vw, 80px);
}

.rp-move__inner {
	display: grid;
	justify-items: center;
	row-gap: 20px;
	text-align: center;
}

/* TWO LINES, BROKEN AFTER "HEY," AND NOWHERE ELSE. The question is 20
   characters of Bebas Neue and must not wrap, so the size is derived
   from the width it has rather than chosen: measured in the loaded
   font, "WHY NOT BUST A MOVE?" is 7.185 times its font size wide. 7.4
   leaves a few pixels of air; `100vw - 40px` is the screen less the two
   20px gutters. 47px on a 390 phone, and it stops growing at 84px. */
.rp-move__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: min(5.25rem, calc((100vw - 40px) / 7.4));
	font-weight: 400;
	line-height: 0.98;
	text-transform: uppercase;
	color: var(--c-white);
	text-shadow: var(--rp-art-shadow);
}

.rp-move__hey,
.rp-move__ask {
	display: block;
	white-space: nowrap;
}

.rp-move__stage {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* THE SAME CONDITION AS THE TALLER VIDEO IN SECTION 01. */
@media (min-width: 1025px), (min-width: 769px) and (orientation: landscape) {
	/* Four rows so the headline and the button can sit TOGETHER in the
	   middle of the video's height: the two `1fr` rows take up the slack
	   equally above and below them. Two rows would have centred the gap
	   between them instead, and the pair would ride high. */
	.rp-move__inner {
		grid-template-columns: auto minmax(0, 560px);
		grid-template-rows: 1fr auto auto 1fr;
		justify-content: center;
		justify-items: start;
		column-gap: clamp(40px, 7vw, 96px);
		row-gap: 0;
		text-align: left;
	}

	.rp-move__stage {
		grid-column: 1;
		grid-row: 1 / -1;
		width: auto;
	}

	/* Beside the video the headline is one sentence again and wraps where
	   12ch puts it: "Hey, why not / bust a move?". */
	.rp-move__title {
		grid-column: 2;
		grid-row: 2;
		max-width: 12ch;
		margin-bottom: 36px;
		font-size: clamp(2.75rem, 7.4vw, 5.25rem);   /* 84 at desktop */
	}

	.rp-move__hey,
	.rp-move__ask {
		display: inline;
		white-space: normal;
	}

	.rp-move__button {
		grid-column: 2;
		grid-row: 3;
	}
}


/* ==================================================================
 * 04 BUST A MOVE - THE VIDEO AND ITS SOUND BUTTON
 * ================================================================== */

/* THE FRAME. Its width is derived from the height it is allowed and the
   video's own shape, and capped at the column - so on a narrow phone it
   is the column that decides and the frame stays the right shape rather
   than squashing. `aspect-ratio` then gives the height back. */
.rp-video {
	position: relative;
	width: min(100%, calc(var(--rp-stage-h) * var(--rp-ar)));
	aspect-ratio: var(--rp-ar);
	overflow: hidden;
	border-radius: 22px;
	background: var(--c-navy);
	box-shadow: var(--shadow-card-lifted);
}

/* `contain`, not `cover`. With the frame taking the video's own shape the
   two are identical; in the moment before the shape is known, `contain`
   shows the whole picture on navy where `cover` would crop someone's
   head off. */
.rp-video__media {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	background: var(--c-navy);
}

/* THE SOUND BUTTON IS THE WHOLE VIDEO. The badge and the label are what
   the eye finds, but the tap target is every pixel of the frame - a
   thumb aimed roughly at a phone screen cannot miss it.

   The wash at the foot is there for the label, which has to stay
   readable over whatever the video happens to be showing behind it. */
.rp-video__sound {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	width: 100%;
	margin: 0;
	padding: 20px;
	border: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(6, 58, 108, 0) 45%, rgba(6, 58, 108, 0.55) 100%);
	color: var(--c-white);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* `hidden` is how the script takes this button away while the sound is on,
   and `display: flex` above would otherwise outrank the attribute. */
.rp-video__sound[hidden] { display: none; }

/* The ring has to be INSIDE the frame: the frame clips its overflow, so
   the site's usual outside ring would be cut off on all four sides. */
.rp-video__sound:focus-visible {
	outline: 4px solid var(--c-amber);
	outline-offset: -6px;
}

.rp-video__badge {
	display: grid;
	place-items: center;
	width: clamp(92px, 26vw, 116px);
	height: clamp(92px, 26vw, 116px);
	border-radius: 50%;
	background: var(--c-white);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	color: var(--c-navy);
	transition: transform var(--ease);
}

.rp-video__badge svg {
	width: 46%;
	height: 46%;
}

.rp-video__label {
	padding: 10px 22px;
	border-radius: var(--radius-pill);
	background: var(--c-navy);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-white);
}

.rp-video__sound:hover .rp-video__badge,
.rp-video__sound:focus-visible .rp-video__badge { transform: scale(1.06); }
.rp-video__sound:active .rp-video__badge { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
	.rp-video__badge { transition: none; }
	.rp-video__sound:hover .rp-video__badge,
	.rp-video__sound:focus-visible .rp-video__badge,
	.rp-video__sound:active .rp-video__badge { transform: none; }
}

/* THE PLACEHOLDER, until assets/video/bust-a-move.mp4 exists. The same
   frame at the same size, so the page does not move by a pixel on the
   day the video arrives. Quieter than the real button on purpose: it
   must not look like something to tap. */
.rp-video--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-blue-mid) 100%);
}

.rp-video--empty .rp-video__badge {
	background: rgba(255, 255, 255, 0.16);
	box-shadow: none;
	color: var(--c-white);
}

.rp-video--empty .rp-video__label {
	background: none;
	box-shadow: none;
	font-weight: 400;
}


/* ==================================================================
 * 05 BOOK - THE HEAD AND THE SCHEDULER SLOT
 * ================================================================== */

/* The band's artwork and its white type are section 02b's, shared with
   /bust-a-move/. */
.rp-book {
	padding-block: clamp(2rem, 5vw, 64px) clamp(3rem, 7.8vw, 100px);
}

.rp-book__head {
	margin-bottom: clamp(1.5rem, 3.5vw, 40px);
	text-align: center;
}

.rp-book__title {
	margin: 0 0 12px;
	font-family: var(--f-display);
	font-size: var(--t-hero);     /* 47 at 375, 70 from 768 - the site's hero step */
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: var(--c-white);
	text-shadow: var(--rp-art-shadow);
}

.rp-book__line {
	margin: 0;
	font-size: var(--t-lead);
	line-height: var(--lh-lead);
	color: var(--c-white);
	text-shadow: var(--rp-art-shadow);
}

/* THE SLOT. 1078px wide at most (900 until 2026-10-11; Gerek asked for
   the calendar wider on a desktop, and Zoom's three columns take the
   room). 1078 AND NOT A ROUND NUMBER: Zoom's own card stops growing at
   1080, and the panel below has to be a hair narrower than that card to
   clip its border off - see ONE BOX, NOT TWO. Wider than this and Zoom's
   card floats inside the panel again. */
.rp-scheduler {
	max-width: 1078px;
	margin-inline: auto;
}

/* 900px tall, the height /ai-visibility-check/ gives its calendar, and
   for the same reason: a scheduler shorter than its own content grows a
   scrollbar inside the page's scrollbar. */
.rp-scheduler__frame,
.rp-scheduler .iclosed-widget {
	display: block;
	width: 100%;
	height: 900px;
	min-height: 900px;
	border: 0;
}

/* ZOOM'S CALENDAR FITS ITS OWN CONTENT. Zoom's stock embed is a fixed
   750 x 560 box; this one is the slot's width, and its height is whatever
   the embedded page says its content is (report-pages.js, 2b). Measured
   2026-10-11: the calendar is 636px where Zoom lays it out in columns and
   746 where it stacks them, the times on a phone 998.

   THE TWO HEIGHTS HERE ARE THE FIRST VIEW'S. Zoom sends no message when
   the calendar first loads, only when a step changes, so these have to
   be right by themselves. Columns were seen in a 780px frame (an 820
   screen) and stacking in a 728 one; where Zoom's own switch falls
   between the two was not found, so that gap takes the taller figure - a
   little spare white under the calendar rather than a calendar cut off.
   The height eases so the footer slides when a step is taller. */
.rp-scheduler__frame--fit {
	height: 746px;
	min-height: 0;
	transition: height 200ms ease;
}

@media (min-width: 820px) {
	.rp-scheduler__frame--fit { height: 636px; }
}

/* A WHITE PANEL, BECAUSE ZOOM'S PAGE IS A WHITE RECTANGLE. Once it has
   drawn, the embedded page paints the whole frame white, square corners
   and all - invisible on a white page, a slab on the artwork. Nothing on
   this side can make a third party's page see-through. So the slot is the
   panel: white, rounded, lifted off the blue, and it clips the frame to
   its corners. Only when the slot holds Zoom; the "calendar is coming"
   placeholder has a box of its own.

   ONE BOX, NOT TWO. Where Zoom lays the calendar out in columns it draws
   a bordered, shadowed card of its own - the frame's width less 16px a
   side, 1080 at most, about 9px down - and inside this panel that was a
   white box in a white box (Gerek, 2026-10-11: "not loving" it). So the
   frame is made 34px wider than the panel and pulled 17 left and 10 up:
   Zoom's card comes out 2px wider than the panel, and its border goes
   with the gutter. Measured off the page in Chrome, not off a spec.
   What is left is one card on the artwork, with Zoom's own language and
   reCAPTCHA line inside it at the foot. That line is Zoom's text on
   Zoom's white, and it cannot be recoloured from here or set on the
   blue; hiding it would hide a notice Google requires to be shown.

   Where Zoom stacks (a phone) there is no card, only 40px of padding;
   it loses 17 of it and nothing else. */
.rp-scheduler:has(.rp-scheduler__frame--fit) {
	overflow: hidden;
	border-radius: 16px;
	background: var(--c-white);
	box-shadow: 0 18px 50px rgba(4, 30, 60, 0.3);
}

.rp-scheduler .rp-scheduler__frame--fit {
	width: calc(100% + 34px);
	max-width: none;
	margin: -10px 0 0 -17px;
}

/* WHILE ZOOM IS DRAWING. One quiet line where the calendar is about to
   be, BEHIND the frame. A frame is see-through until its page paints, so
   this shows for the seconds Zoom takes and is covered when it draws -
   96px down, which is inside Zoom's white panel in its layouts.
   report-pages.js puts the class on and takes it off after 20 seconds;
   the frame keeps its stacking either way, which is why that rule is
   not under the class. */
.rp-scheduler--loading { position: relative; }

.rp-scheduler--loading::before {
	content: "Loading the calendar\2026";
	position: absolute;
	inset: 96px 0 auto;
	z-index: 0;
	font-size: 1.125rem;
	color: var(--c-text);
	text-align: center;
}

.rp-scheduler__frame--fit {
	position: relative;
	z-index: 1;
}

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

.rp-scheduler__fallback {
	margin: 0;
	text-align: center;
}

/* THE PLACEHOLDER. A dashed outline is the one visual on this site that
   means "something goes here", which is exactly and only what this is. */
.rp-scheduler__coming {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 10px;
	min-height: clamp(260px, 42vw, 380px);
	padding: 40px 24px;
	border: 2px dashed var(--c-blue-pale);
	border-radius: 22px;
	background: var(--c-grey-soft);
	text-align: center;
}

.rp-scheduler__icon {
	width: 56px;
	height: 56px;
	margin-bottom: 6px;
	color: var(--c-blue-mid);
	stroke-width: 1.5;
}

.rp-scheduler__coming-title {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(1.875rem, 4vw, 2.5rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--c-heading);
}

.rp-scheduler__coming-line {
	margin: 0;
	font-size: 1.125rem;
	color: var(--c-text);
}


/* ==================================================================
 * 06 THANK YOU - /thank-you/
 *
 * One centred column: the headline, one line, the video when there is
 * one, a question, the green button. Nothing is positioned; it is
 * source order with air between.
 *
 * THE VIDEO HAS NO FRAME OF ITS OWN SIZE, unlike /bust-a-move/'s. That
 * one is a known portrait loop; this one has not been filmed, and may
 * be a phone held upright or a camera on a desk. So it is simply as
 * wide as its column allows and no taller than two thirds of the
 * screen, at whatever shape the file is.
 * ================================================================== */

.rp-thanks {
	padding-block: clamp(2rem, 6vw, 72px) clamp(3rem, 7.8vw, 100px);
}

/* ON A DESKTOP THE WORDS SIT IN THE MIDDLE OF THE SCREEN.

   How it got here, all 2026-10-12. The page was a headline, two lines and
   a button, and on a wide screen that was a thin strip above the footer;
   Gerek asked for 200px more room top and bottom, then 150 ("a little bit
   too much"). Then the offer was written out - a heading, two paragraphs,
   the button, a line about the hold - and a fixed 222px above it put the
   button under the fold of an ordinary laptop.

   So the room is no longer a number. The band is at least the height of
   the screen under the 93px header, and its content is centred in it. On
   his screen (about 1095 tall) that is close to the 222 and 250 he chose;
   on a 900px laptop there is less room and so less padding, and the
   button stays in view. 72 and 100 are the floor.

   From 1025 so that a tablet on its side is left as it was - on this page
   alone the site's "a tablet reads as desktop" rule gives way, as it does
   on /bust-a-move/. vh first for browsers without svh. */
@media (min-width: 1025px) {
	.rp-thanks {
		display: grid;
		align-content: center;
		min-height: calc(100vh - 93px);
		min-height: calc(100svh - 93px);
	}
}

/* TWO HALVES. Stacked and centred on a phone and an upright tablet, in
   the order they are written: what is happening, then the offer. Side by
   side from 1025 - the same line the band's own height rule is drawn at -
   with the words left and the card right, as on the AI Visibility Check
   page a lead has just come from. */
/* STACKED, THE DRAWING GOES LAST: headline, line, the card, the Market
   Lock, the drawing.
   In the order they are written it sat between the words and the card and
   put the orange button a screen and a bit down on a phone (891px on an
   812px screen; 908 on a tablet's 768). `display: contents` takes the left
   half's wrapper out of the layout so its three children can be ordered
   alongside the card; from 1025 the wrapper is a column again. Reading
   order for a screen reader is the written one - words, drawing, offer -
   which is a fine order to hear it in. */
.rp-thanks__inner {
	display: grid;
	justify-items: center;
	text-align: center;
}

.rp-thanks__status {
	display: contents;
}

.rp-thanks__offer {
	order: 2;
	margin-top: clamp(1.5rem, 4vw, 36px);
}

.rp-thanks__img,
.rp-thanks__video {
	order: 4;
}

.rp-thanks__title {
	margin: 0 0 16px;
	font-family: var(--f-display);
	font-size: var(--t-hero);     /* 47 at 375, 70 from 768 - the site's hero step */
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: var(--c-white);
	text-shadow: var(--rp-art-shadow);
}

.rp-thanks__line {
	max-width: 34ch;
	margin: 0;
	font-size: var(--t-lead);
	line-height: var(--lh-lead);
	color: var(--c-white);
	text-shadow: var(--rp-art-shadow);
}

/* THE DRAWING, in the pool of light the same drawing's neighbour stands in
   on the AI Visibility Check page (lead-form.css, section 11), and for the
   same reason: its arrows and sparks are the artwork's own blue. The light
   is the image's background, so it is exactly the drawing's size. */
.rp-thanks__img {
	width: min(100%, 320px);
	margin-top: clamp(1.25rem, 3vw, 28px);
	background: radial-gradient(
		closest-side,
		rgba(255, 255, 255, 0.92) 0%,
		rgba(255, 255, 255, 0.7) 45%,
		rgba(255, 255, 255, 0) 100%
	);
}

.rp-thanks__video {
	width: 100%;
	max-width: 760px;
	margin-top: clamp(1.75rem, 4vw, 44px);
}

.rp-thanks__video video {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 66vh;
	max-height: 66svh;
	margin-inline: auto;
	border-radius: 22px;
	background: var(--c-navy);
	box-shadow: var(--shadow-card-lifted);
}

/* THE OFFER IS A WHITE CARD, the lead form's own: its corner, its hairline,
   its shadow (.lf-card in lead-form.css, which this page does not load, so
   the four values are repeated). White type over the artwork was right for
   a headline and wrong for three sentences of case-making, which sat on the
   brightest part of the burst. In the card they are the site's ordinary
   ink, and the orange button has white round it, as it does on the form. */
.rp-thanks__offer {
	display: grid;
	justify-items: start;
	width: min(100%, 480px);
	padding: clamp(22px, 4vw, 34px) clamp(20px, 4vw, 34px) clamp(22px, 4vw, 32px);
	border: 1px solid rgba(6, 58, 108, 0.1);
	border-radius: 24px;
	background: var(--c-white);
	box-shadow: 0 14px 40px rgba(4, 30, 60, 0.32);
	text-align: left;
}

.rp-thanks__ask {
	margin: 0 0 14px;
	font-family: var(--f-display);
	font-size: clamp(2rem, 4.6vw, 2.625rem);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--c-heading);
}

.rp-thanks__pitch {
	margin: 0 0 10px;
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	line-height: 1.5;
	color: var(--c-text);
}

/* The whole width of the card, like the form's own button. */
.rp-thanks__offer .rp-button {
	width: 100%;
	margin-top: 14px;
}

/* THE MARKET LOCK - the report's own block, on the page.

   It is modelled on the last page of the designed report (itv-core's
   templates/lead-report/pages/12-your-next-step.html), from Gerek's
   screenshot of it: a deep navy panel with a lighter middle, "One more
   thing." in the handwritten face and the report's orange, a tilted
   orange badge with a padlock, the headline in the display face, one line
   of why, and the promise in an outlined box with the padlock again and
   the seven days in orange. The colours are read off that screenshot;
   they are the report's, not this site's tokens, which is the point.

   A FULL-WIDTH ROW OF ITS OWN under the two halves, not a line in the
   card: "the market lock is a big deal". */
.rp-lock {
	--rp-lock-orange: #ed7d2b;
	order: 3;
	display: grid;
	justify-items: start;
	/* THE SAME WIDTH AS WHAT IS ABOVE IT, at every size. Stacked, that is
	   the card's 480px, so the two boxes are one column. Side by side it
	   is the whole row (the 1025 block below), so its left edge is under
	   the headline and its right edge under the card's. It had a width of
	   its own, 1160, and the row above it is 1200: Gerek, 2026-10-12, "the
	   white box is farther right than the dark blue box below." */
	width: min(100%, 480px);
	margin-top: clamp(1.5rem, 4vw, 44px);
	padding: clamp(22px, 4vw, 40px) clamp(20px, 4.6vw, 52px) clamp(24px, 4vw, 44px);
	border-radius: 24px;
	background: radial-gradient(ellipse at 50% 55%, #235c90 0%, #17456f 45%, #103152 100%);
	box-shadow: 0 14px 40px rgba(4, 30, 60, 0.4);
	text-align: left;
}

.rp-lock__aside {
	margin: 0 0 10px;
	font-family: var(--f-accent);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.1;
	color: var(--rp-lock-orange);
	transform: rotate(-2deg);
	transform-origin: left center;
}

/* The badge is tilted, as it is in the report, and the tilt is the only
   thing on this page that is not square to it - which is why it is read
   first. The dark offset shadow is the report's too. */
.rp-lock__badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	padding: 8px 22px 6px 16px;
	border: 3px solid var(--c-white);
	border-radius: 12px;
	background: #d9600f;
	box-shadow: 5px 5px 0 rgba(8, 30, 56, 0.55);
	font-family: var(--f-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-white);
	transform: rotate(-2deg);
}

/* main.css sets `svg { height: auto }`; a glyph in a flex row wants a size. */
.rp-lock__icon {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}

.rp-lock .rp-lock__headline {
	margin: 0 0 12px;
	font-family: var(--f-display);
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: var(--c-white);
}

.rp-lock__why {
	max-width: 60ch;
	margin: 0 0 20px;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	font-weight: 600;
	line-height: 1.4;
	color: #dbe9f8;
}

.rp-lock__promise {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 24px);
	width: 100%;
	margin: 0;
	padding: clamp(14px, 2.2vw, 20px) clamp(16px, 2.6vw, 28px);
	border: 2px solid var(--rp-lock-orange);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.07);
	font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--c-white);
}

.rp-lock__promise .rp-lock__icon {
	width: 1.7em;
	height: 1.7em;
	color: var(--rp-lock-orange);
}

.rp-lock__promise b {
	color: var(--rp-lock-orange);
}

@media (min-width: 1025px) {
	.rp-thanks__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
		align-items: center;
		justify-items: stretch;
		column-gap: clamp(40px, 6vw, 96px);
		text-align: left;
	}

	.rp-thanks__status {
		display: grid;
		justify-items: start;
	}

	.rp-thanks__offer {
		margin-top: 0;
	}

	.rp-lock {
		grid-column: 1 / -1;
		width: 100%;
	}

	.rp-thanks__img {
		width: min(100%, 440px);
	}

	.rp-thanks__offer {
		width: auto;
	}
}