/**
 * Outreach Landing Page - /why-transcon/
 *
 * Scoped to .outreach-lp so nothing leaks into the rest of the site.
 *
 * Direction: this page is read by a maintenance manager at a steel mill who
 * did not ask for the email. Everything is drawn from that world rather than
 * from a generic B2B kit.
 *
 *   Palette   cold-rolled steel. Blue-cast near-black, plate greys, and the
 *             Transcon red. One accent beyond that: mill safety yellow, used
 *             ONLY on the failure state. Red and yellow never touch, so the
 *             two colours stay semantic - yellow is the problem, red is us.
 *
 *   Type      Archivo for display (industrial American signage grotesque),
 *             Manrope for body (already self-hosted by the theme, so the page
 *             stays native to the site), IBM Plex Mono for technical callouts.
 *             Plex Mono was drawn for an engineering company and reads as a
 *             spec sheet without costume.
 *
 *   Signature The comparison pairs are inspection findings, not feature cards.
 *             The failure side carries a hazard-stripe edge, ours carries solid
 *             red, and both end with a mono spec line so the reader gets a
 *             number to compare instead of an adjective.
 *
 * Deliberately no scroll animation. The stripe is the one bold move and
 * stillness reads as more confident here.
 *
 * House rules honoured: no clamp() sizing, no 01/02/03 numbering, no decorative
 * dividers, explicit light colours on every dark-band descendant.
 */

.outreach-lp {
	/* ground */
	--tc-ink: #14171a;
	--tc-ink-2: #232a30;
	--tc-steel: #5c6873;
	--tc-line: #d5dade;
	--tc-plate: #eceef0;
	--tc-paper: #ffffff;

	/* signal */
	--tc-red: #d92a1c;
	--tc-red-dark: #b21f13;
	--tc-hazard: #f2b705;

	/* type */
	--tc-display: 'Archivo', 'Manrope', sans-serif;
	--tc-body: 'Manrope', sans-serif;
	--tc-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	color: var(--tc-ink);
	font-family: var(--tc-body);
	background: var(--tc-paper);
}

/* The theme's .container (1600px) stays the wrapper so the page lines up with
   the rest of the site. Content sits in one centred column inside it, set as a
   grid track rather than a max-width so a narrower child still left-aligns to
   the same edge as the full-width grids. */
.outreach-lp .container {
	display: grid;
	grid-template-columns: minmax(0, 1200px);
	justify-content: center;
}

.outreach-lp .lp-img,
.outreach-lp .lp-card__img,
.outreach-lp .lp-belt__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Shared type ──────────────────────────────────────────────── */

/* Technical label. Everything set in mono on this page is a real callout -
   a state, a section marker, a spec key. It is never used for decoration. */
.outreach-lp .lp-kicker {
	font-family: var(--tc-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tc-red);
	margin: 0 0 14px 0;
}

.outreach-lp .lp-kicker--warn {
	color: #8a6d00;
}

.outreach-lp .lp-kicker--invert {
	color: #ffffff;
}

.outreach-lp h2 {
	font-family: var(--tc-display);
	font-size: 2.5rem;
	line-height: 1.06;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tc-ink);
	margin: 0 0 22px 0;
}

.outreach-lp h3 {
	font-family: var(--tc-display);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tc-ink);
	margin: 0 0 10px 0;
}

.outreach-lp p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #3d464e;
	margin: 0 0 18px 0;
}

.outreach-lp .lp-lede {
	font-size: 1.1875rem;
	line-height: 1.62;
	color: #414b53;
	max-width: 54ch;
}

.outreach-lp .lp-lede--tight {
	margin-bottom: 30px;
}

.outreach-lp .lp-head {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 56px;
	align-items: start;
	margin-bottom: 52px;
}

.outreach-lp .lp-head__title h2 {
	margin-bottom: 0;
	max-width: 15ch;
}

.outreach-lp .lp-head__copy {
	max-width: 60ch;
	padding-top: 4px;
}

.outreach-lp .lp-head__copy p:last-child {
	margin-bottom: 0;
}

/* A head with a single short paragraph does not need the two-column split. */
.outreach-lp .lp-head--narrow {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.outreach-lp .lp-head--narrow .lp-head__title {
	margin-bottom: 20px;
}

.outreach-lp .lp-head--narrow h2 {
	max-width: 20ch;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.outreach-lp .lp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.outreach-lp .lp-btn {
	display: inline-block;
	font-family: var(--tc-body);
	font-size: 1rem;
	font-weight: 700;
	padding: 16px 30px;
	border: 2px solid transparent;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.outreach-lp .lp-btn--primary {
	background: var(--tc-red);
	color: #ffffff;
}

.outreach-lp .lp-btn--primary:hover,
.outreach-lp .lp-btn--primary:focus-visible {
	background: var(--tc-red-dark);
	color: #ffffff;
	text-decoration: none;
}

.outreach-lp .lp-btn--ghost {
	background: transparent;
	color: var(--tc-ink);
	border-color: #b9c1c7;
}

.outreach-lp .lp-btn--ghost:hover,
.outreach-lp .lp-btn--ghost:focus-visible {
	border-color: var(--tc-ink);
	color: var(--tc-ink);
	text-decoration: none;
}

.outreach-lp a:focus-visible,
.outreach-lp button:focus-visible,
.outreach-lp input:focus-visible,
.outreach-lp textarea:focus-visible {
	outline: 3px solid var(--tc-red);
	outline-offset: 2px;
}

/* ── Claim ────────────────────────────────────────────────────── */
.outreach-lp .lp-hero {
	background: var(--tc-plate);
	border-top: 5px solid var(--tc-red);
	padding: 72px 0 0 0;
}

.outreach-lp .lp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
	gap: 72px;
	align-items: center;
	padding-bottom: 64px;
}

/* The routing stamp. This is the personalised line, and it is the one thing
   that makes a cold recipient feel the page was cut for them - so it is set
   like a stamp on a drawing package rather than a small coloured eyebrow.
   Sized up 2026-08-27 at Rich's request: the company name is now the second
   loudest thing in the hero after the headline, because a recipient deciding
   in two seconds whether this was written for them is the whole motion. The
   label sits in a solid red ink block so the stamp reads as issued, not as a
   caption. Red here is tc-red-dark, not tc-red, so white on it clears AA. */
.outreach-lp .lp-stamp {
	display: inline-flex;
	align-items: stretch;
	font-family: var(--tc-mono);
	text-transform: uppercase;
	margin: 0 0 30px 0;
	border: 2px solid var(--tc-ink);
	background: var(--tc-paper);
}

.outreach-lp .lp-stamp__label {
	display: flex;
	align-items: center;
	padding: 12px 14px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: #ffffff;
	background: var(--tc-red-dark);
}

.outreach-lp .lp-stamp__value {
	display: flex;
	align-items: center;
	padding: 10px 18px;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--tc-ink);
}

/* The un-personalised /why-transcon/ renders "Transcon Conveyor / Mentor,
   Ohio", which has nothing to shout about. It keeps the original quiet stamp
   so the loud version stays a signal that the page was cut for someone. */
.outreach-lp .lp-stamp--generic {
	border: 1px solid #c2cad0;
	background: rgba(255, 255, 255, 0.7);
}

.outreach-lp .lp-stamp--generic .lp-stamp__label {
	padding: 9px 12px;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--tc-steel);
	background: transparent;
	border-right: 1px solid #c2cad0;
}

.outreach-lp .lp-stamp--generic .lp-stamp__value {
	padding: 9px 14px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
}

.outreach-lp .lp-hero__title {
	font-family: var(--tc-display);
	font-size: 3.75rem;
	line-height: 0.98;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--tc-ink);
	margin: 0 0 26px 0;
	max-width: 17ch;
}

.outreach-lp .lp-hero__figure {
	margin: 0;
}

.outreach-lp .lp-hero__figure .lp-img {
	box-shadow: 0 18px 44px rgba(20, 23, 26, 0.22);
}

/* Credential rail. A nameplate, not a feature list - it front-loads the
   legitimacy a cold reader needs before they will spend two minutes. */
.outreach-lp .lp-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #c9d0d5;
}

.outreach-lp .lp-rail li {
	font-family: var(--tc-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tc-steel);
	padding: 18px 30px 18px 0;
	margin-right: 30px;
	position: relative;
}

.outreach-lp .lp-rail li + li::before {
	content: '';
	position: absolute;
	left: -30px;
	top: 50%;
	width: 4px;
	height: 4px;
	background: var(--tc-red);
	transform: translateY(-50%);
}

/* ── Proof ────────────────────────────────────────────────────── */
.outreach-lp .lp-proof {
	padding: 88px 0 92px 0;
}

.outreach-lp .lp-compare {
	margin-bottom: 40px;
}

.outreach-lp .lp-compare__label {
	font-family: var(--tc-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tc-steel);
	margin: 0 0 14px 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--tc-line);
}

.outreach-lp .lp-compare__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.outreach-lp .lp-card {
	display: flex;
	flex-direction: column;
	background: var(--tc-paper);
	border: 1px solid var(--tc-line);
	padding: 30px 30px 0 30px;
	position: relative;
}

/* The signature. A mill floor marks a hazard with diagonal striping and a
   machine with a solid colour, so the failure state gets stripes and ours gets
   the brand red. The two never appear together, which keeps them readable as
   meaning rather than decoration. */
.outreach-lp .lp-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
}

.outreach-lp .lp-card--fail::before {
	background-image: repeating-linear-gradient(
		45deg,
		var(--tc-hazard) 0,
		var(--tc-hazard) 7px,
		var(--tc-ink) 7px,
		var(--tc-ink) 14px
	);
}

.outreach-lp .lp-card--pass::before {
	background: var(--tc-red);
}

.outreach-lp .lp-card--fail {
	background: #fbfbfa;
}

.outreach-lp .lp-card__state {
	font-family: var(--tc-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 20px 0;
}

.outreach-lp .lp-card--fail .lp-card__state {
	color: #8a6d00;
}

.outreach-lp .lp-card--pass .lp-card__state {
	color: var(--tc-red);
}

.outreach-lp .lp-card__art {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 168px;
	margin-bottom: 26px;
}

.outreach-lp .lp-card__img {
	max-width: 430px;
}

.outreach-lp .lp-card__title {
	margin-bottom: 8px;
}

.outreach-lp .lp-card__copy {
	font-size: 1rem;
	line-height: 1.6;
	color: #4c565e;
	margin: 0 0 24px 0;
	flex-grow: 1;
}

/* The spec line gives the reader a figure to compare instead of an adjective.
   Both pan thicknesses are Rich's own numbers. */
.outreach-lp .lp-spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--tc-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 -30px;
	padding: 16px 30px;
	border-top: 1px solid var(--tc-line);
}

.outreach-lp .lp-spec__key {
	color: var(--tc-steel);
	font-weight: 500;
}

.outreach-lp .lp-spec__val {
	color: var(--tc-ink);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.outreach-lp .lp-card--pass .lp-spec__val {
	color: var(--tc-red);
}

/* ── Evidence ─────────────────────────────────────────────────── */
.outreach-lp .lp-evidence {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: 48px;
	align-items: stretch;
	margin: 64px 0 0 0;
	padding: 40px;
	background: var(--tc-ink);
}

.outreach-lp .lp-evidence__media {
	min-height: 440px;
}

.outreach-lp .lp-evidence__media .lp-img {
	height: 100%;
	object-fit: cover;
	object-position: 62% center;
}

.outreach-lp .lp-evidence__caption {
	align-self: center;
}

.outreach-lp .lp-evidence__caption {
	margin: 0;
}

.outreach-lp .lp-evidence .lp-kicker--warn {
	color: var(--tc-hazard);
}

/* Rich's own sentence, and the most persuasive one in the whole deck. It earns
   display size rather than sitting inside a paragraph. */
.outreach-lp .lp-pull {
	font-family: var(--tc-display);
	font-size: 2.25rem;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #ffffff;
	margin: 0 0 24px 0;
	padding: 0;
	border: 0;
	quotes: none;
}

.outreach-lp .lp-evidence__caption p {
	color: #b9c4cc;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.outreach-lp .lp-evidence__caption p:last-child {
	margin-bottom: 0;
}

.outreach-lp .lp-evidence__caption strong {
	color: #ffffff;
}

/* ── Build specs ──────────────────────────────────────────────── */
.outreach-lp .lp-build {
	margin-top: 72px;
}

.outreach-lp .lp-build__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0;
	border-top: 2px solid var(--tc-ink);
}

/* Four independent properties, not a sequence, so they are not numbered.
   The shared top rule and the dividers read as one spec block. */
.outreach-lp .lp-build__item {
	padding: 26px 28px 28px 0;
	border-right: 1px solid var(--tc-line);
}

.outreach-lp .lp-build__item:last-child {
	border-right: 0;
}

.outreach-lp .lp-build__item + .lp-build__item {
	padding-left: 28px;
}

.outreach-lp .lp-build__item p {
	font-size: 0.9875rem;
	line-height: 1.6;
	color: #4c565e;
	margin: 0;
}

.outreach-lp .lp-build__proof {
	margin: 40px 0 0 0;
}

.outreach-lp .lp-build__proof .lp-img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: center 55%;
}

/* ── Range ────────────────────────────────────────────────────── */
.outreach-lp .lp-range {
	background: var(--tc-plate);
	padding: 88px 0 92px 0;
}

.outreach-lp .lp-belts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 24px;
}

.outreach-lp .lp-belt {
	background: var(--tc-paper);
	border: 1px solid var(--tc-line);
	padding-bottom: 26px;
}

.outreach-lp .lp-belt__media {
	position: relative;
	margin-bottom: 22px;
}

.outreach-lp .lp-belt__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.outreach-lp .lp-belt__tag {
	position: absolute;
	left: 0;
	bottom: 0;
	font-family: var(--tc-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	background: var(--tc-ink);
	padding: 7px 12px;
}

.outreach-lp .lp-belt h3 {
	margin: 0 26px 8px 26px;
}

.outreach-lp .lp-belt p {
	margin: 0 26px;
	font-size: 1rem;
	line-height: 1.6;
	color: #4c565e;
}

/* ── Act ──────────────────────────────────────────────────────── */
.outreach-lp .lp-act {
	background: var(--tc-ink);
	padding: 76px 0 80px 0;
}

.outreach-lp .lp-act__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 24px;
	align-items: stretch;
}

/* The four actions are not equal, so they are not drawn equal. The form is the
   conversion; the other three are ways to keep looking. */
.outreach-lp .lp-act__lead {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--tc-red);
	padding: 34px;
	text-decoration: none;
	transition: background-color 0.15s ease;
	min-height: 240px;
}

.outreach-lp .lp-act__lead:hover,
.outreach-lp .lp-act__lead:focus-visible {
	background: var(--tc-red-dark);
	text-decoration: none;
}

.outreach-lp .lp-act__title {
	display: block;
	font-family: var(--tc-display);
	font-size: 2rem;
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #ffffff;
	margin-bottom: 10px;
}

.outreach-lp .lp-act__copy {
	display: block;
	font-size: 1rem;
	line-height: 1.6;
	color: #ffe4e1;
	max-width: 34ch;
}

.outreach-lp .lp-act__rest {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	gap: 1px;
	background: #333c44;
	border: 1px solid #333c44;
}

.outreach-lp .lp-act__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--tc-ink-2);
	padding: 22px 28px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.outreach-lp .lp-act__item:hover,
.outreach-lp .lp-act__item:focus-visible {
	background: #2d353c;
	text-decoration: none;
}

.outreach-lp .lp-act__item-title {
	display: block;
	font-family: var(--tc-display);
	font-size: 1.1875rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 5px;
}

.outreach-lp .lp-act__item-copy {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #9daab4;
}

/* ── Form ─────────────────────────────────────────────────────── */
.outreach-lp .lp-form {
	padding: 84px 0 92px 0;
}

.outreach-lp .lp-form__inner {
	max-width: 680px;
}

.outreach-lp .lp-form .gform_wrapper {
	margin-top: 28px;
}

/* Gravity's own layout stylesheet does not load on this template, so
   .gform_fields falls back to a raw <ul> - browser discs, a 40px indent, and
   seven visible empty rows for the hidden tracking fields. Rather than depend
   on their CSS arriving, the layout is owned here. */
.outreach-lp .lp-form .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.outreach-lp .lp-form .gform_wrapper .gfield {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	grid-column: span 2;
}

.outreach-lp .lp-form .gform_wrapper .gfield::marker {
	content: none;
}

/* Name and contact pairs sit two-up; everything else runs full width. */
.outreach-lp .lp-form .gform_wrapper .gfield--width-half {
	grid-column: span 1;
}

/* The tracking fields carry no UI and must not occupy a grid cell. */
.outreach-lp .lp-form .gform_wrapper .gfield--type-hidden,
.outreach-lp .lp-form .gform_wrapper .gform_hidden {
	display: none !important;
}

.outreach-lp .lp-form .gform_wrapper .ginput_container {
	margin-top: 7px;
}

.outreach-lp .lp-form .gform_wrapper .gfield_required {
	color: var(--tc-red);
}

.outreach-lp .lp-form .gform_wrapper .gfield_description {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--tc-steel);
	padding-top: 7px;
}

.outreach-lp .lp-form .gform_wrapper .gform_footer {
	margin: 26px 0 0 0;
	padding: 0;
}

.outreach-lp .lp-form .gform_wrapper label.gform-field-label {
	font-family: var(--tc-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tc-steel);
}

/* Gravity ships its own theme at a specificity that needs the extra weight. */
.outreach-lp .lp-form .gform_wrapper input[type="text"],
.outreach-lp .lp-form .gform_wrapper input[type="email"],
.outreach-lp .lp-form .gform_wrapper input[type="tel"],
.outreach-lp .lp-form .gform_wrapper textarea {
	border: 1px solid #c2cad0 !important;
	border-radius: 0 !important;
	padding: 13px 14px !important;
	font-family: var(--tc-body) !important;
	font-size: 1rem !important;
	color: var(--tc-ink) !important;
	background: var(--tc-paper) !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Textarea only. This lived in the grouped input rule for one deploy and set
   every single-line field to 150px tall. */
.outreach-lp .lp-form .gform_wrapper textarea {
	min-height: 150px !important;
	line-height: 1.55 !important;
	resize: vertical;
}

.outreach-lp .lp-form .gform_wrapper input[type="text"]:focus,
.outreach-lp .lp-form .gform_wrapper input[type="email"]:focus,
.outreach-lp .lp-form .gform_wrapper input[type="tel"]:focus,
.outreach-lp .lp-form .gform_wrapper textarea:focus {
	border-color: var(--tc-red) !important;
	outline: 2px solid rgba(217, 42, 28, 0.28);
	outline-offset: 0;
}

.outreach-lp .lp-form .gform_wrapper .gform_footer input[type="submit"] {
	background: var(--tc-red) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 16px 36px !important;
	font-family: var(--tc-body) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.outreach-lp .lp-form .gform_wrapper .gform_footer input[type="submit"]:hover {
	background: var(--tc-red-dark) !important;
}

.outreach-lp .lp-form .gform_confirmation_message {
	border-left: 5px solid var(--tc-red);
	background: var(--tc-plate);
	padding: 26px 28px;
}

.outreach-lp .lp-form .gform_confirmation_message p:last-child {
	margin-bottom: 0;
}

/* ── Breakpoints ──────────────────────────────────────────────── */
@media (max-width: 1199px) {
	.outreach-lp .lp-hero__title {
		font-size: 3rem;
	}

	.outreach-lp .lp-hero__grid {
		gap: 48px;
	}

	.outreach-lp h2 {
		font-size: 2.125rem;
	}

	.outreach-lp .lp-pull {
		font-size: 1.875rem;
	}

	.outreach-lp .lp-act__title {
		font-size: 1.75rem;
	}
}

@media (max-width: 991px) {
	.outreach-lp .lp-hero {
		padding-top: 52px;
	}

	.outreach-lp .lp-hero__grid,
	.outreach-lp .lp-evidence,
	.outreach-lp .lp-act__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.outreach-lp .lp-head {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.outreach-lp .lp-head__title {
		margin-bottom: 20px;
	}

	.outreach-lp .lp-head h2 {
		max-width: 20ch;
	}

	.outreach-lp .lp-evidence__media .lp-img {
		max-height: 420px;
		object-position: center 45%;
	}

	.outreach-lp .lp-hero__title {
		font-size: 2.625rem;
		max-width: none;
	}

	.outreach-lp .lp-evidence {
		padding: 30px;
	}

	.outreach-lp .lp-evidence__media .lp-img {
		max-height: 340px;
	}

	.outreach-lp .lp-act__lead {
		min-height: 0;
	}

	/* The single-column spec block keeps its rules as stacked dividers. */
	.outreach-lp .lp-build__item {
		border-right: 0;
		border-bottom: 1px solid var(--tc-line);
		padding: 22px 0;
	}

	.outreach-lp .lp-build__item + .lp-build__item {
		padding-left: 0;
	}

	.outreach-lp .lp-build__item:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 767px) {
	.outreach-lp .lp-hero {
		padding-top: 40px;
	}

	/* The enlarged stamp is too wide to sit on one line on a 320px phone, so
	   it stacks into a title block instead of shrinking back to invisible.
	   The quiet generic variant still fits side by side, so it stays a row. */
	.outreach-lp .lp-stamp {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 24px;
	}

	.outreach-lp .lp-stamp__label {
		align-self: stretch;
		padding: 8px 12px;
		font-size: 0.75rem;
	}

	.outreach-lp .lp-stamp__value {
		padding: 9px 12px;
		font-size: 1.125rem;
	}

	.outreach-lp .lp-stamp--generic {
		flex-direction: row;
	}

	.outreach-lp .lp-stamp--generic .lp-stamp__value {
		font-size: 0.75rem;
	}

	.outreach-lp .lp-hero__grid {
		padding-bottom: 40px;
		gap: 30px;
	}

	.outreach-lp .lp-proof,
	.outreach-lp .lp-range {
		padding: 56px 0 60px 0;
	}

	.outreach-lp .lp-act {
		padding: 52px 0 56px 0;
	}

	.outreach-lp .lp-form {
		padding: 56px 0 64px 0;
	}

	.outreach-lp .lp-hero__title {
		font-size: 2.125rem;
	}

	.outreach-lp h2 {
		font-size: 1.8125rem;
	}

	.outreach-lp .lp-pull {
		font-size: 1.625rem;
	}

	.outreach-lp .lp-act__title {
		font-size: 1.5rem;
	}

	.outreach-lp .lp-compare__pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.outreach-lp .lp-build__proof .lp-img {
		aspect-ratio: 3 / 2;
	}

	.outreach-lp .lp-card {
		padding: 26px 24px 0 24px;
	}

	.outreach-lp .lp-spec {
		margin: 0 -24px;
		padding: 14px 24px;
	}

	.outreach-lp .lp-card__art {
		min-height: 0;
	}

	.outreach-lp .lp-evidence {
		padding: 24px;
		margin-top: 44px;
	}

	.outreach-lp .lp-build {
		margin-top: 52px;
	}

	.outreach-lp .lp-btn {
		display: block;
		text-align: center;
	}

	.outreach-lp .lp-form .gform_wrapper .gform_fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.outreach-lp .lp-form .gform_wrapper .gfield,
	.outreach-lp .lp-form .gform_wrapper .gfield--width-half {
		grid-column: span 1;
	}

	.outreach-lp .lp-evidence__media {
		min-height: 300px;
	}

	.outreach-lp .lp-hero__actions {
		display: block;
	}

	.outreach-lp .lp-hero__actions .lp-btn + .lp-btn {
		margin-top: 10px;
	}

	.outreach-lp .lp-rail li {
		padding: 12px 20px 12px 0;
		margin-right: 20px;
	}

	.outreach-lp .lp-rail li + li::before {
		left: -20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.outreach-lp * {
		transition: none !important;
		animation: none !important;
	}
}