/*
 * X-Mod review landing page (Milestone 2).
 *
 * Values are taken from the designer's Figma frame "1440w", not eyeballed:
 * 1440 frame, 144px side gutters, 1152 container, 20px inner padding, so the
 * live content column is 1112px. Section rhythm is 80px top and bottom.
 *
 * This page runs on Elementor Canvas, so it has no site header, no nav and no
 * footer links. That is deliberate and contractual: the only things a visitor
 * can act on are the two forms and the phone number.
 *
 * Palette note. The designer worked in #A5010C, which is a shade darker than
 * the site's #C00000. Kept as designed because this page is a standalone paid
 * traffic destination that never sits next to site chrome, but it is a real
 * divergence from the brand tokens and is flagged rather than silently blended.
 */

body.xr-page {
	--xr-red:     #A5010C;
	--xr-ink:     #0D0D0D;
	--xr-black:   #000000;
	--xr-body:    #555555;
	--xr-surface: #F4F4F4;
	--xr-line:    #E3E3E3;
	--xr-white:   #FFFFFF;
	--xr-head: 'Poppins', 'Carlito', Calibri, Arial, sans-serif;
	--xr-text: 'Carlito', Calibri, Arial, sans-serif;

	font-family: var(--xr-text);
	color: var(--xr-body);
	-webkit-font-smoothing: antialiased;
}

body.xr-page *, body.xr-page *::before, body.xr-page *::after { box-sizing: border-box; }

/* ---- shared shapes ------------------------------------------------ */

.xr-wrap { max-width: 1152px; margin: 0 auto; padding: 0 20px; }
.xr-wrap--narrow { max-width: 768px; }
.xr-wrap--mid    { max-width: 896px; }

.xr-eyebrow {
	font-family: var(--xr-text);
	font-size: 11.2px; font-weight: 700; line-height: 17px;
	letter-spacing: 2.24px; text-transform: uppercase;
	color: var(--xr-red); margin: 0;
}
.xr-rule { width: 64px; height: 3px; background: var(--xr-red); margin: 12px 0 0; border: 0; }

.xr-h1 {
	font-family: var(--xr-head);
	font-size: 54.4px; font-weight: 800; line-height: 57px;
	letter-spacing: -0.816px; color: var(--xr-white); margin: 0;
}
.xr-h1 em { font-style: normal; color: var(--xr-red); display: block; }

.xr-h2 {
	font-family: var(--xr-head);
	font-size: 41.6px; font-weight: 700; line-height: 52px;
	letter-spacing: -0.624px; color: var(--xr-black); margin: 0;
}
body.xr-page .xr--dark .xr-h2 { color: var(--xr-white); }

.xr-lead  { font-size: 16.3px; line-height: 27px; margin: 0; }
.xr-lead strong { color: var(--xr-black); }
body.xr-page .xr--dark .xr-lead, body.xr-page .xr--dark .xr-lead strong { color: var(--xr-white); }

/* ---- 1. top bar --------------------------------------------------- */

.xr-topbar { background: var(--xr-ink); }
.xr-topbar .xr-wrap {
	display: flex; align-items: center; justify-content: space-between;
	min-height: 85px; gap: 24px;
}
.xr-topbar img { width: 282px; max-width: 60%; height: auto; display: block; }
.xr-topbar__tag {
	font-size: 12px; font-weight: 700; line-height: 16px;
	letter-spacing: 1.68px; text-transform: uppercase;
	color: var(--xr-white); text-align: right; margin: 0;
}
.xr-topbar__tag a { color: inherit; text-decoration: none; }

/* ---- 2. hero ------------------------------------------------------ */

.xr-hero { position: relative; background: var(--xr-ink); overflow: hidden; }
.xr-hero__bg {
	position: absolute; inset: 0;
	background: url('xmod/hero-construction.jpg') center/cover no-repeat;
}
/* The photograph is busy. Without this the white headline loses contrast in
   the bright upper right and the eyebrow becomes unreadable. */
.xr-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(13,13,13,.94) 0%, rgba(13,13,13,.88) 48%, rgba(13,13,13,.72) 100%);
}
.xr-hero .xr-wrap {
	position: relative;
	display: grid; grid-template-columns: 563px 509px; gap: 40px;
	align-items: center; min-height: 632px; padding-top: 48px; padding-bottom: 48px;
}
.xr-hero__copy > * + * { margin-top: 16px; }
/* The hero sits on a photograph, so the body tokens (dark grey on white) are
   wrong here. Scoped rather than global: .xr-lead is reused on light sections. */
.xr-hero__copy .xr-lead, .xr-hero__copy .xr-lead strong { color: var(--xr-white); }
.xr-hero__reassure { font-size: 16.3px; font-weight: 700; line-height: 27px; color: var(--xr-white); margin: 0; }
.xr-hero__trust {
	font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .96px;
	text-transform: uppercase; color: var(--xr-white); margin: 0;
	border-left: 3px solid var(--xr-red); padding-left: 12px;
}

body.xr-page a.xr-call {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--xr-red); color: var(--xr-white) !important; text-decoration: none;
	font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: .64px;
	text-transform: uppercase; padding: 16px 28px; border-radius: 3px;
	transition: background .15s ease;
}
body.xr-page a.xr-call:hover, body.xr-page a.xr-call:focus { background: #8A010A; color: var(--xr-white); }

/* Hero actions.
 * Saad's frames differ by breakpoint and the client confirmed we follow them:
 * the desktop hero carries the phone button, the phone hero carries the form
 * CTA instead and the number appears only in the closing bar. The reasoning is
 * that on a phone, starting a form is a smaller commitment than ringing a
 * stranger, so the lower-friction action should be the one above the fold. */
.xr-hero__actions { margin: 0; }
body.xr-page a.xr-cta-form {
	display: none; align-items: center; justify-content: center; gap: 8px;
	background: var(--xr-red); color: var(--xr-white) !important; text-decoration: none;
	font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: .64px;
	text-transform: uppercase; padding: 17px 28px; border-radius: 3px;
	transition: background .15s ease;
}
body.xr-page a.xr-cta-form:hover, body.xr-page a.xr-cta-form:focus { background: #8A010A; }

/* ---- form cards --------------------------------------------------- */

.xr-card {
	background: var(--xr-white); padding: 28px;
	box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.xr-card__h { font-family: var(--xr-head); font-size: 20px; font-weight: 700; line-height: 28px;
	letter-spacing: -.3px; color: var(--xr-black); margin: 0; }
.xr-card__sub { font-size: 14px; line-height: 20px; margin: 4px 0 18px; }

/* The request card is an Elementor inner section (white, red top rule) so the
   form and the note below the button are siblings inside it. */
.xr-formnote { font-size: 12px; line-height: 20px; margin: 14px 0 0; }

/* ---- 3. the problem ----------------------------------------------- */

.xr-sec { padding: 80px 0; }
.xr-sec--surface { background: var(--xr-surface); }
.xr-sec--dark { background: var(--xr-ink); }
.xr-sec__head > * + * { margin-top: 12px; }
.xr-sec__body { max-width: 768px; margin-top: 24px; }
.xr-sec__body > * + * { margin-top: 15px; }

.xr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.xr-stat { background: var(--xr-white); border-top: 3px solid var(--xr-red); padding: 20px 22px 24px; }
.xr-stat__n { font-family: var(--xr-head); font-size: 30px; font-weight: 800; line-height: 36px;
	color: var(--xr-red); margin: 0 0 10px; }
.xr-stat__t { font-size: 15.5px; line-height: 25px; color: var(--xr-black); margin: 0; }

/* ---- 4. the offer -------------------------------------------------- */

.xr-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; align-items: start; }
/* Filled card with a red left edge and a line icon, per Saad's frames. The copy
   doc describes none of this, which is why the first build had bare rules. */
.xr-feat {
	background: var(--xr-white); border-left: 3px solid var(--xr-red);
	padding: 18px 22px 20px; display: grid; grid-template-columns: 26px 1fr;
	column-gap: 12px; align-items: start;
}
.xr-feat + .xr-feat { margin-top: 16px; }
.xr-feat__icon { grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--xr-red); margin-top: 3px; }
.xr-feat__icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none;
	stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xr-feat__h { font-family: var(--xr-head); font-size: 18px; font-weight: 700; line-height: 28px;
	letter-spacing: -.27px; color: var(--xr-black); margin: 0 0 4px; }
.xr-feat__p { font-size: 15.5px; line-height: 25px; margin: 0; }

.xr-sample__link { display: block; }
.xr-sample__open { color: var(--xr-red); font-weight: 700; text-decoration: underline; }
.xr-sample img { display: block; width: 100%; height: auto; border: 1px solid var(--xr-line); background: #fff; }
.xr-sample__note { background: var(--xr-ink); color: var(--xr-white); font-size: 15.5px; line-height: 25px;
	padding: 20px 22px; margin: 0; display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; align-items: start; }
.xr-sample__note .xr-feat__icon { margin-top: 2px; }
.xr-sample__cap { font-size: 14px; line-height: 20px; margin: 10px 0 0; text-align: center; }
.xr-sample__cap strong { color: var(--xr-black); }

/* ---- 5. social proof ----------------------------------------------- */

.xr-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.xr-quote { border: 0; border-top: 3px solid var(--xr-black); background: var(--xr-surface);
	padding: 22px 24px 24px; margin: 0; }
.xr-quote p { font-size: 16px; line-height: 26px; color: var(--xr-black); margin: 0; }
.xr-quote footer { font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .96px;
	text-transform: uppercase; color: var(--xr-red); margin-top: 14px; }
.xr-quote--empty { border-top: 3px dashed var(--xr-red); display: flex; align-items: center; justify-content: center; }
.xr-quote--empty span { font-size: 14px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--xr-body); }

/* ---- 6. why us ------------------------------------------------------ */

.xr-props { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; margin-top: 40px; }
.xr-props > div { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.18); }
.xr-prop__h { font-family: var(--xr-head); font-size: 18px; font-weight: 700; line-height: 28px;
	letter-spacing: -.27px; color: var(--xr-red); margin: 0 0 6px; }
.xr-prop__p { font-size: 15.5px; line-height: 25px; color: var(--xr-white); margin: 0; }
.xr-note { font-size: 15.7px; line-height: 25px; color: var(--xr-white); margin: 36px 0 0;
	border-top: 1px solid rgba(255,255,255,.22); padding-top: 22px; }

/* ---- 7. process ----------------------------------------------------- */

.xr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.xr-step { border: 1px solid var(--xr-line); padding: 22px 24px 26px; }
.xr-step__n { display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; background: var(--xr-red); color: var(--xr-white);
	font-family: var(--xr-head); font-size: 18px; font-weight: 800; line-height: 28px; }
.xr-step__h { font-family: var(--xr-head); font-size: 20px; font-weight: 700; line-height: 28px;
	color: var(--xr-black); margin: 14px 0 8px; }
.xr-step__p { font-size: 15.5px; line-height: 25px; margin: 0; }
.xr-steps__after { font-size: 16.3px; line-height: 27px; color: var(--xr-black); margin: 24px 0 0; max-width: 768px; }

/* ---- 9. closing bar -------------------------------------------------- */

.xr-close { background: var(--xr-red); color: var(--xr-white); text-align: center; padding: 44px 0; }
.xr-close__h { font-family: var(--xr-head); font-size: 30px; font-weight: 700; line-height: 36px;
	color: var(--xr-white); margin: 0; }
.xr-close__p { font-size: 18px; line-height: 28px; color: var(--xr-white); margin: 8px 0 0; }
.xr-close__p a { color: var(--xr-white); text-decoration: underline; font-weight: 700; }
.xr-close__fine { font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .96px;
	text-transform: uppercase; color: var(--xr-white); margin: 10px 0 0; }

/* ---- Fluent Forms, restyled to the design ---------------------------- */

body.xr-page .fluentform .ff-el-group { margin-bottom: 16px; }
body.xr-page .fluentform .ff-el-input--label label {
	font-family: var(--xr-text); font-size: 11.2px; font-weight: 700; line-height: 17px;
	letter-spacing: 1.008px; text-transform: uppercase; color: var(--xr-body); margin-bottom: 6px;
}
body.xr-page .fluentform .ff-el-form-control {
	font-family: var(--xr-text); font-size: 15.2px; line-height: 18px; color: var(--xr-black);
	border: 1px solid var(--xr-line); border-radius: 2px; padding: 12px 13px; height: auto;
	background: var(--xr-white); box-shadow: none; width: 100%;
}
body.xr-page .fluentform .ff-el-form-control:focus {
	border-color: var(--xr-red); outline: 2px solid rgba(165,1,12,.18); outline-offset: 0;
}
body.xr-page .fluentform select.ff-el-form-control { color: var(--xr-black); }
body.xr-page .fluentform .ff-btn-submit {
	width: 100%; background: var(--xr-red); border: 0; border-radius: 3px; color: var(--xr-white);
	font-family: var(--xr-text); font-size: 16px; font-weight: 700; line-height: 24px;
	letter-spacing: .64px; text-transform: uppercase; padding: 15px 20px; cursor: pointer;
	transition: background .15s ease;
}
body.xr-page .fluentform .ff-btn-submit:hover { background: #8A010A; }
body.xr-page .fluentform .ff-el-group.ff-el-form-check label { text-transform: none; letter-spacing: 0;
	font-size: 13.5px; font-weight: 400; color: var(--xr-body); }

/* ---------------------------------------------------------------------
 * Responsive. The designer supplied desktop frames only, so every rule
 * below is an implementation decision rather than a drawn design, and is
 * called out as such for review. The order of collapse follows what the
 * page is for: the form and the phone number stay reachable, decoration
 * gives way first.
 * ------------------------------------------------------------------ */

@media (max-width: 1180px) {
	.xr-hero .xr-wrap { grid-template-columns: 1fr 460px; gap: 32px; }
	.xr-h1 { font-size: 46px; line-height: 50px; }
	.xr-h2 { font-size: 36px; line-height: 44px; }
}

@media (max-width: 960px) {
	/* Form above the fold is the whole point of the page, so it stacks
	   directly under the headline rather than being pushed below the copy. */
	.xr-hero .xr-wrap { grid-template-columns: 1fr; min-height: 0; gap: 28px; }
	.xr-offer { grid-template-columns: 1fr; gap: 32px; }
	.xr-props { grid-template-columns: 1fr; gap: 26px; }
	.xr-quotes { grid-template-columns: 1fr; }
	.xr-steps { grid-template-columns: 1fr; }
	.xr-stats { grid-template-columns: 1fr; gap: 20px; }
	.xr-sec { padding: 56px 0; }
}

@media (max-width: 680px) {
	.xr-wrap { padding: 0 18px; }
	/* The hero sits inside Elementor's own container rather than .xr-wrap, and
	   that container drops to nearly zero padding on a phone, so the copy ran
	   flush to the screen edge. Give the hero its own gutter at this width. */
	.xr-hero__copy { padding: 0 18px; }
	body.xr-page .xr-card { margin: 0 14px; }
	.xr-h1 { font-size: 34px; line-height: 39px; letter-spacing: -.4px; }
	.xr-h2 { font-size: 27px; line-height: 34px; letter-spacing: -.3px; }
	.xr-close__h { font-size: 23px; line-height: 30px; }
	.xr-topbar .xr-wrap { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 16px; padding-bottom: 16px; min-height: 0; }
	.xr-topbar__tag { text-align: left; }
	.xr-topbar img { width: 220px; max-width: 78%; }
	/* On a phone the phone button gives way to the form CTA, per the design.
	   The number is still one tap away in the closing bar. */
	body.xr-page a.xr-call { display: none; }
	body.xr-page a.xr-cta-form { display: flex; width: 100%; }
	.xr-formwrap { padding: 26px 20px 24px; }
	.xr-card { padding: 22px 20px; }
	.xr-sec { padding: 44px 0; }
	.xr-sample__note { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	body.xr-page *, body.xr-page *::before, body.xr-page *::after { transition: none !important; animation: none !important; }
}

/* ---- case study callout (Meta campaign copy, last page) --------------
 * Brief: visually distinct from its neighbours, warm background, red top
 * border, dollar figures bold and larger, closing three lines landing as
 * the punch. Sits between the offer checklist and the testimonials so a
 * real outcome is shown before social proof validates it.
 * ------------------------------------------------------------------ */

.xr-case {
	background: #FDF6E3; border-top: 4px solid var(--xr-red);
	padding: 44px 48px 40px; margin: 0;
}
.xr-case .xr-eyebrow { color: var(--xr-red); }
.xr-case__h {
	font-family: var(--xr-head); font-size: 34px; font-weight: 800; line-height: 42px;
	letter-spacing: -.5px; color: var(--xr-black); margin: 10px 0 22px;
}
.xr-case p { font-size: 16.3px; line-height: 28px; color: #3A3A3A; margin: 0 0 14px; }
/* Dollar figures: "bold and slightly larger than body text" per the copy doc.
   That instruction is about body copy. Inside the headline the figure has to
   take the headline's size, or it renders smaller than the words around it. */
.xr-case p .xr-money { font-weight: 700; font-size: 17.6px; color: var(--xr-black); }
.xr-case__h .xr-money { font-size: inherit; font-weight: inherit; color: inherit; }
.xr-case__punch { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(165,1,12,.22); }
.xr-case__punch p { font-size: 18px; line-height: 29px; font-weight: 700; color: var(--xr-black); margin: 0 0 6px; }
.xr-case__punch p:last-child { color: var(--xr-red); }
.xr-case__cta { margin-top: 26px; }

@media (max-width: 680px) {
	.xr-case { padding: 30px 20px 28px; }
	.xr-case__h { font-size: 25px; line-height: 32px; }
	.xr-case__punch p { font-size: 16.5px; line-height: 26px; }
}

/* ---- confirmation page ----------------------------------------------
 * The page Google Ads counts a conversion on, and the last thing someone
 * sees after converting. It carries no navigation for the same reason the
 * landing page does not, and it spends its space telling them what to go
 * and find, because the gap between "requested" and "sent the documents"
 * is where this funnel actually loses people.
 * ------------------------------------------------------------------ */

.xr-confirm { padding: 72px 0 64px; }
.xr-confirm__tick {
	width: 52px; height: 52px; border-radius: 50%; background: var(--xr-red);
	color: var(--xr-white); display: flex; align-items: center; justify-content: center;
	font-size: 27px; line-height: 1; margin-bottom: 22px;
}
.xr-confirm__h {
	font-family: var(--xr-head); font-size: 41.6px; font-weight: 700; line-height: 52px;
	letter-spacing: -.624px; color: var(--xr-black); margin: 0 0 16px;
}
.xr-confirm__lead { font-size: 18px; line-height: 29px; margin: 0 0 12px; max-width: 720px; }
.xr-confirm__lead strong { color: var(--xr-black); }

.xr-next { background: var(--xr-surface); padding: 32px 34px; margin: 36px 0 0; }
.xr-next__h { font-family: var(--xr-head); font-size: 20px; font-weight: 700; line-height: 28px;
	color: var(--xr-black); margin: 0 0 6px; }
.xr-next__sub { font-size: 15.5px; line-height: 25px; margin: 0 0 20px; }
.xr-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.xr-docs li { border-left: 3px solid var(--xr-red); padding: 2px 0 2px 16px; }
.xr-docs b { display: block; font-family: var(--xr-head); font-size: 16px; font-weight: 700;
	color: var(--xr-black); margin-bottom: 3px; }
.xr-docs span { font-size: 15.5px; line-height: 25px; }
.xr-confirm__call { margin-top: 34px; }
.xr-confirm__spam { font-size: 14px; line-height: 22px; margin-top: 26px; color: var(--xr-body); }

@media (max-width: 680px) {
	.xr-confirm { padding: 44px 0 40px; }
	.xr-confirm__h { font-size: 27px; line-height: 34px; }
	.xr-confirm__lead { font-size: 16.5px; line-height: 27px; }
	.xr-next { padding: 24px 20px; }
}