/* Mobile vs Figma fixes: sales-variants — Growth Rizz (page 4144), Spree
   (4145), Etched Monthly (4146).

   All three pages are generated by build-scripts/migration/build_product_page.py
   from one section anatomy, so they share one rule set keyed to STRUCTURE
   (section position), not to per-page element ids:
     1 hero · 2 intro · 3 how it works · 4 who is this for · 5 FAQ ·
     6 pricing · 7 lead form · 8 coal CTA · 9 newsletter · 10 footer
   Target: Figma frame 109:8 "Sales, Product - Mobile" (440px artboard). The
   builder only emitted desktop sizes (70px Cepelin headings, two-column rows,
   40-60px side padding), so on a phone headings broke mid-word and every
   two-up row squeezed into 160px columns. Values below are the frame's.

   Figma type scale used throughout (measured on the homepage pass):
   Cepelin 45/37.8, Cepelin 40/36 (ls -0.4), Cepelin 30/27.7 (ls -0.3),
   Carta Nueva script 50/36, Source Serif 22/22 (ls -0.66), Sofia 20/18.4.

   QA 2026-10-04 — the pages no longer share one section order, so the
   position keys below are mapped per page:
     Etched (4146):               3 how it works · 4 who · 5 FAQ · 6 pricing
     Growth Rizz / Spree (4144/5): 3 who · 4 FAQ · 5 pricing · 6 how it works
   ("How it works" was moved below pricing on those two pages; before this
   mapping each of the four blocks styled its neighbour.) On all three pages a
   logo strip (8) and the review carousel (9) now sit between the form (7)
   and the coal CTA, so the coal rules are keyed to position 10, not 8. */

@media (max-width: 767px) {

	/* ── Section backdrops ─────────────────────────────────────────────
	   The generic mobile rule `.e-image-base { height:auto !important }`
	   collapses every absolutely-positioned section backdrop to its image's
	   aspect height (the form marble covered 495px of a 2,300px band, the
	   coal and newsletter textures 203px and 76px). Re-assert full cover. */
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con > img.e-image-base,
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(7) > img.e-image-base {
		height: 100% !important;
		object-fit: cover !important;
	}

	/* ── 1 · Hero (olive band to y=781) ─────────────────────────────────
	   stag 65x98 at y=125 (44 under the bar), eyebrow 244, h1 282 (45px,
	   five lines in 384px), body 509 (22px, 313px measure), 232x51 CTA 644. */
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(1) > .e-con:not(.sh-nav) {
		min-height: 0 !important;
		padding: 44px 28px 86px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(1) > .e-con:not(.sh-nav) > img {
		width: 66px !important;
		height: 98px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(1) > .e-con:not(.sh-nav) > p:first-of-type {
		margin-top: 21px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(1) h1 {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: 0 !important;
		margin-top: 20px !important;
		max-width: min(384px, 100%) !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(1) h1 + p {
		margin-top: 38px !important;
		max-width: min(313px, 100%) !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(1) a.e-button-base {
		margin-top: 47px !important;
	}

	/* ── 2 · Intro (cream, 781-2121) ────────────────────────────────────
	   script at 868 (87 in), h2 32px under it, CENTRED 22px copy in a 370px
	   measure 28px under the h2 with one blank line between paragraphs, dark
	   CTA 51px under the copy, band ends 86px under the CTA. */
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(2) {
		padding: 87px 28px 86px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(2) > h2:nth-of-type(1) {
		font-size: 50px !important;
		line-height: 36px !important;
		letter-spacing: -0.5px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(2) > h2:nth-of-type(2) {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: 0 !important;
		margin-top: 32px !important;
		max-width: min(385px, 100%) !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(2) > .e-con {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 22px !important;
		margin-top: 28px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(2) > .e-con > .e-con {
		width: 100% !important;
		align-items: center !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(2) > .e-con p {
		max-width: min(370px, 100%) !important;
		margin: 0 0 22px !important;
		text-align: center !important;
		font-size: 22px !important;
		line-height: 22px !important;
		letter-spacing: -0.66px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(2) > .e-con > .e-con:last-child > p:last-child {
		margin-bottom: 0 !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(2) > a.e-button-base {
		margin-top: 51px !important;
	}

	/* ── 3 · How it works (pink, 2121-3342) ─────────────────────────────
	   45px h2 at 2207 (86 in); no sub-line on mobile; steps from 2338 in
	   ONE column: 40px titles with the number hanging (numeral ink at x=35,
	   text and turnover lines at x=70), 22px body at x=27 25px under the
	   title, 62px between steps, band ends 92px under the last body. */
	:is(.page-id-4146 .elementor > .e-con:nth-child(3), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(6)) {
		padding: 86px 0 92px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(3), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(6)) > .e-con {
		width: 100% !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(3), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(6)) > .e-con > h2 {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: 0 !important;
		padding: 0 28px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(3), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(6)) > .e-con > p {
		display: none !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(3), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(6)) > .e-con > .e-con {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;
		width: 100% !important;
		padding: 0 28px 0 27px !important;
		margin-top: 93px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(3), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(6)) > .e-con > .e-con > .e-con {
		width: 100% !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(3), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(6)) > .e-con > .e-con > .e-con > .e-con {
		margin: 0 0 62px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(3), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(6)) > .e-con > .e-con > .e-con:last-child > .e-con:last-child {
		margin-bottom: 0 !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(3), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(6)) h4 {
		font-size: 40px !important;
		line-height: 36px !important;
		letter-spacing: -0.4px !important;
		padding-left: 43px !important;
		text-indent: -35px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(3), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(6)) h4 + p {
		margin-top: 25px !important;
		max-width: min(371px, 100%) !important;
		font-size: 22px !important;
		line-height: 22px !important;
		letter-spacing: -0.66px !important;
	}

	/* ── 4 · Who is this for (cream, 3342-5040) ─────────────────────────
	   The 316x416 cat-and-mirror art hangs from y=3224 at x=196, over the
	   pink band's foot; eyebrow 3608 (266 into the cream), h2 43px lower,
	   personas from 3736 stacked in one centred column (40px titles, 22px
	   copy 20px under, 50px between), 232x51 CTA 74px under the last copy,
	   band ends 110px under the CTA. */
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) {
		padding: 266px 28px 110px !important;
		z-index: 2 !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3))::before {
		content: "";
		position: absolute;
		top: -118px;
		left: calc(50% - 24px);
		width: 316px;
		height: 416px;
		background: url('../../../../../uploads/2026/08/svc_cat_mirror.png') no-repeat left bottom / cover;
		z-index: -1;
		pointer-events: none;
	}
	/* Growth Rizz / Spree: this band now follows the intro, whose CTA sits
	   86px above the band; at -118px the art covered that button. Hang it
	   60px over the intro's foot instead and give the 58px back as padding. */
	:is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3) {
		padding-top: 324px !important;
	}
	:is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)::before {
		top: -60px;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) > .e-con:first-child {
		gap: 10px !important;
		margin: 0 0 47px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) > .e-con:first-child > h2 {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: 0 !important;
		margin-top: 15px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) > .e-con:nth-child(2) {
		width: 100% !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) > .e-con:nth-child(2) > .e-con {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 50px !important;
		margin: 0 !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) > .e-con:nth-child(2) > .e-con + .e-con {
		margin-top: 50px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) > .e-con:nth-child(2) > .e-con > .e-con {
		width: 100% !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) h3 {
		font-size: 40px !important;
		line-height: 36px !important;
		letter-spacing: -0.4px !important;
	}
	/* Figma breaks the persona titles "FOUNDERS THAT / WANT RESULTS",
	   "MARKETING TEAMS / THAT NEED / OWNERSHIP" (329px box) and "CREATORS THAT /
	   WANT SCALE"; the fourth runs the full 381px. Measures chosen so the
	   same breaks fall out of the live copy without editing it. */
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) > .e-con:nth-child(2) > .e-con:nth-child(1) > .e-con:nth-child(1) h3,
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) > .e-con:nth-child(2) > .e-con:nth-child(2) > .e-con:nth-child(1) h3 {
		max-width: min(300px, 100%) !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) > .e-con:nth-child(2) > .e-con:nth-child(1) > .e-con:nth-child(2) h3 {
		max-width: min(329px, 100%) !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) h3 + p {
		margin-top: 20px !important;
		max-width: min(381px, 100%) !important;
		font-size: 22px !important;
		line-height: 22px !important;
		letter-spacing: -0.66px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(4), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(3)) > a.e-button-base {
		margin-top: 74px !important;
	}

	/* ── 5 · FAQ (sand, 5040-6718) ──────────────────────────────────────
	   script 127px in, h2 64px below it, first box 27px under the h2.
	   Boxes 382px wide at x=28, 17px apart: question 40px in a 269px
	   measure at 23px/29px in, a 33px dark roundel with cream hairline
	   plus/minus 22px from the right edge, top-aligned; answer 22px in a
	   321px measure 59px under the question; 35px (open: 39px) under the
	   last line. Band ends 86px under the last box. */
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) {
		padding: 127px 30px 86px 28px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) > .e-con {
		width: 100% !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) > .e-con > .e-con:first-child {
		gap: 28px !important;
		padding: 0 0 27px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) > .e-con > .e-con:first-child > h2:first-child {
		font-size: 50px !important;
		line-height: 36px !important;
		letter-spacing: -0.5px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) > .e-con > .e-con:first-child > h2 + h2 {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) .sh-faq-row {
		padding: 29px 22px 35px 23px !important;
		margin: 0 0 17px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) .sh-faq-row.sh-faq-open {
		padding-bottom: 39px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) .sh-faq-row:last-child {
		margin-bottom: 0 !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) .sh-faq-head {
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) .sh-faq-head > span {
		font-size: 40px !important;
		line-height: 36px !important;
		letter-spacing: -0.4px !important;
		max-width: 269px !important;
		width: 269px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) .sh-faq-icon {
		margin: 1px 0 0 auto !important;
		background-image:
			linear-gradient(#EAE4D8, #EAE4D8),
			linear-gradient(#EAE4D8, #EAE4D8) !important;
		background-repeat: no-repeat !important;
		background-size: 20px 1px, 1px 20px !important;
		background-position: 6.5px 16px, 16px 6.5px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) .sh-faq-open .sh-faq-icon {
		background-size: 20px 1px, 0 0 !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) .sh-faq-icon > span {
		font-size: 0 !important;
		color: transparent !important;
	}
	/* Full row width, matching the desktop change (Bevon, QC 2026-09-19).
	   Figma's 321px cap left the answer short of the question above it. */
	:is(.page-id-4146 .elementor > .e-con:nth-child(5), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(4)) .sh-faq-answer {
		margin-top: 59px !important;
		max-width: 100% !important;
		width: 100% !important;
		font-size: 22px !important;
		line-height: 22px !important;
		letter-spacing: -0.66px !important;
	}

	/* ── 6 · Pricing (cream, 6718-8535) ─────────────────────────────────
	   script 85px in (two lines in 345px), h2 28px under it, price line 32px
	   under the h2, 200px rule, then single-column 384px boxes from 45px under
	   the rule: 133px minimum, 30px copy in a 352px measure. Figma's own box
	   gaps alternate 19/20/29/30px; reproduced row by row. 46px to the CTA,
	   band ends 86px under it. */
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) {
		padding: 85px 28px 86px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) > h2:nth-of-type(1) {
		font-size: 50px !important;
		line-height: 36px !important;
		letter-spacing: -0.5px !important;
		max-width: min(345px, 100%) !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) > h2:nth-of-type(2) {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: 0 !important;
		margin-top: 28px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) > p {
		margin-top: 32px !important;
	}
	/* The hairline is itself an .e-con div-block, hence the :not() below. */
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) > .e-div-block-base {
		width: 200px !important;
		margin-top: 11px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) > .e-con:not(.e-div-block-base) {
		width: 100% !important;
		margin-top: 45px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) > .e-con > .e-con {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 19px !important;
		margin: 20px 0 0 !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) > .e-con > .e-con:first-child {
		margin-top: 0 !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) > .e-con > .e-con:nth-child(even) {
		gap: 29px !important;
		margin-top: 20px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) > .e-con > .e-con:nth-child(odd):not(:first-child) {
		margin-top: 30px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) > .e-con > .e-con > .e-con {
		flex: 0 0 auto !important;
		width: 100% !important;
		min-height: 133px !important;
		padding: 16px !important;
		border-color: #462222 !important;
	}
	/* Growth Rizz and Etched: each box has its own colour and an inset frame
	   (custom.css, client feedback 2026-10-11), so no outer border, and
	   room for the text inside the frame. */
	body.page-id-4144 .elementor > .e-con:nth-child(5) > .e-con > .e-con > .e-con,
	body.page-id-4146 .elementor > .e-con:nth-child(6) > .e-con > .e-con > .e-con {
		border-color: transparent !important;
		padding: 24px 22px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) h4 {
		font-size: 30px !important;
		line-height: 27.7px !important;
		letter-spacing: -0.3px !important;
	}
	:is(.page-id-4146 .elementor > .e-con:nth-child(6), :is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(5)) > a.e-button-base {
		margin-top: 46px !important;
	}

	/* ── 7 · Lead form (marble, 8535-9939) ──────────────────────────────
	   script 115px in, h2 39px under the script, form card 382px wide at
	   x=30 with a #462222 hairline, 87px under the h2; band ends 68px under
	   the card. The luggage tag (274x283 at x=131) hangs 58px over the coal
	   band below; it lives on this section so the coal band's overflow
	   clipping cannot cut it off. */
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(7) > .e-con {
		padding: 115px 28px 68px 30px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(7) > .e-con > h2:nth-of-type(1) {
		font-size: 50px !important;
		line-height: 36px !important;
		letter-spacing: -0.5px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(7) > .e-con > h2:nth-of-type(2) {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: 0 !important;
		margin-top: 39px !important;
		max-width: min(384px, 100%) !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(7) .sh-lead-form {
		width: 100% !important;
		max-width: min(382px, 100%) !important;
		margin-top: 87px !important;
		padding: 30px !important;
		border: 1px solid #462222 !important;
	}
	/* custom.css spaces this form's fields 105px apart for the desktop mockup;
	   on a phone that stretched the card past 1,500px. */
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .sh-lead-form .elementor-field-group {
		margin-bottom: 30px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .sh-lead-form .elementor-field-group:last-of-type {
		margin-bottom: 0 !important;
	}
	/* The form's submit button fell back to Elementor's default sans in
	   sentence case; Figma draws every CTA as 25px Sofia Sans Extra Condensed
	   700 uppercase in a 232x51, 4px-radius block. */
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .sh-lead-form .e-form__buttons .elementor-button {
		font-family: "Sofia Sans Extra Condensed", sans-serif !important;
		font-size: 25px !important;
		font-weight: 700 !important;
		letter-spacing: -0.25px !important;
		text-transform: uppercase !important;
		min-width: 232px !important;
		min-height: 51px !important;
		padding: 0 20px !important;
	}
	/* QA 2026-10-04: the tag used to hang from the form band (7), which is no
	   longer the coal band's neighbour, so it landed on the logo strip's
	   "socialhart has worked with" label. It now hangs from the review
	   carousel, the section directly above the coal band. */
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-testi-frame::after {
		content: "";
		position: absolute;
		bottom: -225px;
		left: 29.77%;
		width: 62.27%;
		aspect-ratio: 274 / 283;
		background: url('../../../../../uploads/2026/08/tag_transparent.png') no-repeat center / contain;
		z-index: 4;
		pointer-events: none;
	}

	/* Growth Rizz / Spree: the lead form is hidden and a Flodesk waitlist
	   button follows the band's inner container. It was painted UNDER the
	   absolutely-positioned backdrop image (static vs positioned), ran edge to
	   edge and sat flush on the band's bottom edge. Lift it above the backdrop
	   and give it the page's usual CTA measure and band-end spacing. */
	:is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(7) > .e-con {
		padding-bottom: 0 !important;
	}
	:is(.page-id-4144, .page-id-4145) .elementor > .e-con:nth-child(7) > a.sh-waitlist-flodesk {
		position: relative !important;
		z-index: 1 !important;
		align-self: center !important;
		width: calc(100% - 56px) !important;
		margin: 51px 28px 86px !important;
	}

	/* ── 8 · Coal CTA (olive, 9939-10716) — same geometry as the homepage:
	   stag 150px in, h2 125px under the stag top, copy 40px under the h2,
	   238x51 CTA 43px under the copy, 145px to the newsletter band. */
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(10) > .e-con {
		padding: 150px 28px 145px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(10) > .e-con > img {
		width: 66px !important;
		height: 98px !important;
		margin: 0 0 27px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(10) > .e-con > h2 {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: 0 !important;
		margin: 0 !important;
		max-width: min(383px, 100%) !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(10) > .e-con > p {
		margin: 40px 0 43px !important;
		max-width: min(383px, 100%) !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(10) > .e-con > a.e-button-base {
		min-width: 238px !important;
		width: 238px !important;
	}

	/* ── 9 · Newsletter (pink, 10716-11208) — same as the homepage: ruled top
	   and bottom, 45px h2 59px in, 383x55 fields 13px apart from 49px under
	   the h2, 281x51 left-aligned button 27px under the last field. */
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-newsletter {
		border-top: 1px solid #3B1919;
		border-bottom: 1px solid #3B1919;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-newsletter > .e-con {
		padding: 58px 28px 69px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-newsletter > .e-con > h2 {
		font-size: 45px !important;
		line-height: 37.8px !important;
		letter-spacing: 0 !important;
		width: 100% !important;
		max-width: none !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-newsletter .sh-newsletter-form {
		width: 100% !important;
		max-width: none !important;
		margin-top: 49px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .sh-newsletter-form .elementor-form-fields-wrapper {
		margin-bottom: 0 !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .sh-newsletter-form .elementor-field-group {
		margin-bottom: 13px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .sh-newsletter-form .elementor-field-group.e-form__buttons {
		margin: 14px 0 0 !important;
		justify-content: flex-start !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .sh-newsletter-form input.elementor-field-textual {
		height: 55px !important;
		min-height: 55px !important;
		padding: 0 19px !important;
		border: 1px solid #3B1919 !important;
		border-radius: 0 !important;
		background: transparent !important;
		font-family: 'Source Serif Pro', Georgia, serif !important;
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
		color: #3B1919 !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .sh-newsletter-form input.elementor-field-textual::placeholder {
		color: #3B1919 !important;
		opacity: 1 !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .sh-newsletter-form .e-form__buttons .elementor-button {
		flex: 0 0 auto !important;
		min-width: 281px !important;
		width: 281px !important;
		min-height: 51px !important;
		height: 51px !important;
		padding: 0 20px !important;
		white-space: nowrap !important;
	}

	/* ── 10 · Footer — same as the homepage: no blurb; NAVIGATION x=60,
	   CONNECT x=275, 70px under the pink; 20px links on a 28px pitch; stacked
	   wordmark 376x173 91px under the links; one 89px legal row. */
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .sh-footer-top {
		padding: 70px 28px 0 !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .sh-footer-top > .e-con:first-child {
		display: none !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .sh-footer-top > .e-con:nth-child(2) {
		margin-left: 32px !important;
		gap: 0 !important;
		flex-wrap: nowrap !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .sh-footer-top > .e-con:nth-child(2) > .e-con:first-child {
		flex: 0 0 215px !important;
		width: 215px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .sh-footer-top > .e-con:nth-child(2) > .e-con:first-child > p:not(:first-child) {
		padding-left: 4px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .sh-footer-top .e-paragraph-link-base {
		min-height: 28px !important;
		line-height: 28px !important;
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .e-con:nth-child(2) {
		padding: 91px 28px 27px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .e-con:nth-child(2) > img {
		content: url('../../img/socialhart-wordmark-2line-dark.png');
		width: 376px !important;
		max-width: 100% !important;
		height: 173px !important;
		object-fit: contain !important;
		margin: 0 !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .e-con:nth-child(3) {
		padding: 23px 26px 22px !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		column-gap: 12px !important;
	}
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .e-con:nth-child(3) > .e-con {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		flex-wrap: nowrap !important;
		column-gap: 12px !important;
		justify-content: flex-start !important;
	}
}

/* Below the 440px artboard the legal row cannot hold all three links. */
@media (max-width: 439px) {
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .e-con:nth-child(3),
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con.sh-sales-footer > .e-con:nth-child(3) > .e-con {
		flex-wrap: wrap !important;
	}
}