/**
 * Home — Figma-exact section styles.
 *
 * Rebuilt directly from the Figma source of truth (file Qc0svJadX2mkcEk7D5wHUl,
 * frame home_new 7107:14377), NOT reverse-engineered from the Webflow export.
 * Loaded AFTER webflow.css so it corrects any drift from the design.
 * Each block cites its Figma node id + the named text styles it implements.
 *
 * Figma type system (canonical):
 *   Button/Regular  DM Mono 400 14/20 UPPER  (eyebrows -> purple #5D4AF5)
 *   H2/Medium       Archivo 500 40/48        (section titles)
 *   H5/Semi-bold    Archivo 600 24/32        (card titles)
 *   P md/Regular    Geist   400 16/24        (lead / summary)
 *   P lg/Regular    Geist   400 20/28        (card body)
 *   Button/Medium   DM Mono 500 14/14 UPPER  (CTA labels)
 * Colors: purple #5D4AF5, ink #1A1A1A, line #E6E9EE, paper #F7F7F7, card #FFF.
 *
 * @package Limestone
 */

/* ============================================================
 * hero-pp  (Figma node 7388:15501) — the small gradient sphere
 * on the AI-Velocity-Pod ("Ellipse 5": 11x11, radial gradient,
 * shadow + 1px blur) that the flat pod PNG was missing.
 * ============================================================ */
.hero-pp__col-right {
	position: relative;
}

/* Hero pod LCP weight-saver: the carried baseline (webflow.css) paints the pod
 * from hero-pod-4x.png (~1.8 MB). Serve modern formats via image-set with the
 * PNG as the universal fallback — AVIF (~26 KB) first, then WebP (~43 KB), then
 * the original PNG for anything that supports neither image-set nor the new
 * codecs. background-image is the only property overridden; size/position/inset
 * stay from the carried .hero-pp__pod rule. The mobile @media (767px) below
 * swaps in the mobile-cropped asset and wins by source order. */
.hero-pp__pod {
	background-image: url("../images/home/hero-pod-4x.png");
	background-image: image-set(
		url("../images/home/hero-pod.avif") type("image/avif"),
		url("../images/home/hero-pod.webp") type("image/webp"),
		url("../images/home/hero-pod-4x.png") type("image/png")
	);
}

/* Hero pod illustration: the connector dot is baked into the image export
 * (Figma node 7388:15516, "col") so it scales with the artwork — no separate
 * positioned element (the old .hero-pp__pod-ball mis-placed on mobile). */

/* Figma hero Section (7388:15501) padding is 240px 140px 80px; the carried
 * Webflow build left a 180px bottom pad. Trim to the Figma 80px. */
.hero-pp {
	/* No bottom padding: the logo band is the last thing in the hero and must sit
	 * flush against the problem section's top separator (Figma: the logo band's
	 * bottom edge = the problem section's top edge, no gap). */
	padding-bottom: 0;
}

/* Client-logo band (Figma Logo Group 7388:15526): a centered heading above the
 * marquee, framed by a divider above and below. */
.hero-pp__logos {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 40px;
	padding: 40px 0;
}
/* Full-bleed divider ABOVE the band only — the Figma Logo Group has a single
 * border-top spanning the whole frame width (edge to edge). The line BELOW the
 * band is the next section's own top separator (.s1-problem border-top), not a
 * second divider on the logos — adding one here was redundant. overflow-x:hidden
 * (webflow.css) clips the 100vw so there is no horizontal scroll. */
.hero-pp__logos::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	border-top: 1px solid #e6e9ee;
	pointer-events: none;
}
.hero-pp__logos-heading {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	color: #1a1a1a;
}
/* Animated client-logo marquee (Figma Logo Group 7388:15526: row gap 120, opacity .5,
   blur(10px) edge fade reproduced as a mask gradient). Two identical tracks scroll left
   for a seamless loop; respects prefers-reduced-motion. */
.hero-pp__marquee {
	display: flex;
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.hero-pp__logo-track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 120px;
	margin: 0;
	padding: 0 120px 0 0;
	list-style: none;
	animation: hero-logo-marquee 38s linear infinite;
}
.hero-pp__logo-item { flex: 0 0 auto; display: flex; align-items: center; }
/* Logos: the source PNGs were exported at inconsistent tones (some pure black,
 * some light grey ~145) so they read unevenly on the light band — Brown Boots /
 * Valneva looked dark while OneRail / Swatch / PTI looked "faded" (Anastasiia #1).
 * `brightness(0)` flattens every mark to a single ink regardless of its source
 * tone; the shared 0.6 opacity then renders them all at the same Figma medium
 * grey (~102), so the whole strip is uniform. */
.hero-pp__logo-item img { display: block; width: auto; filter: brightness(0); opacity: 0.6; }
/* brightness(0) equalises ink COLOUR, but Valneva and Brown Boots use much
 * heavier/solid marks than the thin-stroke logos, so at the same opacity their
 * greater ink coverage still reads darker. Drop their opacity so their visual
 * weight matches the lighter marks and the whole row reads evenly. */
.hero-pp__logo-item img[src*="valneva"] { opacity: 0.42; }
.hero-pp__logo-item img[src*="brown"] { opacity: 0.5; }
.hero-pp__logo-item img[src*="gameforge"] { opacity: 0.4; } /* #4: Gameforge mark is bold/dense -> reads darker than the others at 0.6; 0.4 matches the OneRail/Swatch weight */
@keyframes hero-logo-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .hero-pp__logo-track { animation: none; } }

/* Figma H1/Medium declares no letter-spacing; the carried build tightened
 * the title by -0.01em. Reset to Figma-exact 0. */
.hero-pp__title {
	letter-spacing: 0;
}

/* Figma Button/Medium declares no letter-spacing; the carried build added
 * +0.02em on the CTA label. Reset to Figma-exact 0. */
.hero-pp__cta {
	letter-spacing: 0;
}

/* ============================================================
 * s1-problem  (Figma node 7388:15573)
 * ============================================================ */
.s1-problem__eyebrow {
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5d4af5;
}

.s1-problem__title {
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 48px;
	color: #1a1a1a;
}

.s1-problem__lead,
.s1-problem__close {
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

/* card (layout_85JB1S): white, 1px #E6E9EE, radius 6, padding 40, gap 40 */
.s1-problem__card {
	background-color: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
	padding: 40px;
	gap: 40px;
}

/* numeral: 40x30 purple SVG (replaces the flat text "01") */
.s1-problem__num {
	display: block;
	height: 30px;
	line-height: 0;
}

.s1-problem__num img {
	display: block;
	height: 30px;
	width: auto;
}

/* text container gap 16 (title -> body) */
.s1-problem__h3 {
	font-family: Archivo, sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	color: #1a1a1a;
}

.s1-problem__body {
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #1a1a1a;
}

/* ============================================================
 * Per-section overrides — exact Figma values for each home
 * section node (eyebrow / title / cards / icons / spacing).
 * ============================================================ */

/* ===== s4-partner (Figma node 7388:15697) ===== */
.s4-partner { background-color:#f7f7f7; }
.s4-partner__head { gap:16px; }
.s4-partner__eyebrow { font-family:"DM Mono",monospace; font-weight:400; font-size:14px; line-height:20px; text-transform:uppercase; color:#5d4af5; text-align:center; }
.s4-partner__title { font-family:Archivo,sans-serif; font-weight:500; font-size:40px; line-height:48px; color:#1a1a1a; text-align:center; }
.s4-partner__cards { gap:40px; }
.s4-partner__col-right { gap:40px; }
.s4-partner__card { background-color:#fff; border:1px solid #e6e9ee; border-radius:6px; padding:44px; }
.s4-partner__card--dark { background-color:#1a1a1a; border:1px solid #e6e9ee; border-radius:6px; padding:44px; gap:32px; }
.s4-partner__card-body { gap:40px; }
.s4-partner__text { gap:16px; }
.s4-partner__h3 { font-family:Archivo,sans-serif; font-weight:500; font-size:28px; line-height:36px; color:#1a1a1a; }
.s4-partner__h3--light { color:#fdfdfc; }
.s4-partner__body { font-family:Geist,sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#1a1a1a; }
.s4-partner__body--light { color:#fdfdfc; }
.s4-partner__cta-light { display:flex; justify-content:center; align-items:center; gap:16px; padding:16px 32px; border:1px solid #fdfdfc; border-radius:4px; }
.s4-partner__cta-light span { font-family:"DM Mono",monospace; font-weight:500; font-size:14px; line-height:14px; text-transform:uppercase; color:#1a1a1a; }
/* ===== s5-pod (Figma node 7388:15731) ===== */
.s5-pod__eyebrow { font-family:"DM Mono",monospace; font-weight:400; font-size:14px; line-height:20px; text-transform:uppercase; color:#5d4af5; }
.s5-pod__title { font-family:Archivo,sans-serif; font-weight:500; font-size:40px; line-height:48px; color:#1a1a1a; }
.s5-pod__card { background-color:#fff; border:1px solid #e6e9ee; border-radius:6px; padding:32px; gap:28px; }
.s5-pod__label { font-family:"DM Mono",monospace; font-weight:400; font-size:14px; line-height:20px; text-transform:uppercase; color:#5d4af5; }
.s5-pod__body { font-family:Geist,sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#1a1a1a; }
.s5-pod__link,.s5-pod__link-arrow { font-family:"DM Mono",monospace; font-weight:500; font-size:14px; line-height:20px; text-transform:uppercase; color:#5d4af5; }
/* Long-arrow vector (Figma node 7388:15842, 31.69x12, #5D4AF5) replaces the short unicode glyph */
/* CTA arrow — the exact Figma "Frame 47" arrow (faded long shaft + solid head)
 * rendered as a currentColor mask, so every button/link arrow matches the design
 * and adapts to its own text colour. Replaces the old per-CTA glyph/stroke arrows. */
.hero-pp__cta-arrow,
.s7-sla__cta-arrow,
.s5-pod__link-arrow,
.s1-problem__cta-arrow {
	display: inline-block;
	font-size: 0;
	line-height: 0;
	flex-shrink: 0;
	vertical-align: middle;
	background: currentColor;
}
/* sla + pod use the long "Frame 47" arrow (faded shaft + solid head, 32×12). */
.s7-sla__cta-arrow,
.s5-pod__link-arrow {
	width: 32px;
	height: 12px;
	-webkit-mask: url("../images/icons/cta-arrow.svg") no-repeat center / contain;
	        mask: url("../images/icons/cta-arrow.svg") no-repeat center / contain;
}
/* hero + problem "GET IN TOUCH" use Font Awesome's short solid arrow-right (16px). */
.hero-pp__cta-arrow,
.s1-problem__cta-arrow {
	width: 18px;
	height: 16px;
	-webkit-mask: url("../images/icons/cta-arrow-short.svg") no-repeat center / contain;
	        mask: url("../images/icons/cta-arrow-short.svg") no-repeat center / contain;
}
/* ===== s6-tl (Figma node 7388:15845) ===== */
.s6-tl__eyebrow { font-family:"DM Mono",monospace; font-weight:400; font-size:14px; line-height:20px; text-transform:uppercase; color:#5d4af5; }
.s6-tl__title { font-family:Archivo,sans-serif; font-weight:500; font-size:40px; line-height:48px; color:#1a1a1a; }
.s6-tl__h3 { font-family:Archivo,sans-serif; font-weight:500; font-size:28px; line-height:36px; color:#1a1a1a; }
.s6-tl__body { font-family:Geist,sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#1a1a1a; }
.s6-tl__divider { background-color:#e6e9ee; height:1px; }
/* Figma: every step-number wrapper is a FIXED 50px box so the step text columns align;
   the carried build shrank --01/--03 to glyph width (40/48), misaligning the columns. */
.s6-tl__num { width: 50px; background-position: left center; }
.s6-tl__num--01, .s6-tl__num--03 { width: 50px; }
.s6-tl__roi { background-color:#fff; border:1px solid #e6e9ee; border-radius:6px; padding:52px 56px; gap:32px; }
.s6-tl__roi-title { font-family:"DM Mono",monospace; font-weight:500; font-size:28px; line-height:36px; color:#211753; }
.s6-tl__roi-item { font-family:"DM Mono",monospace; font-weight:400; font-size:28px; line-height:36px; color:#211753; }
.s6-tl__cta { background-color:#1a1a1a; border-radius:4px; padding:16px 32px; }
.s6-tl__cta span { font-family:"DM Mono",monospace; font-weight:500; font-size:14px; line-height:14px; text-transform:uppercase; color:#fff; }
/* ===== s7-sla (Figma node 7388:15880) ===== */
.s7-sla {
	gap:60px;
	padding:128px 140px;
}
.s7-sla__head {
	gap:16px;
}
.s7-sla__eyebrow {
	font-family:"DM Mono",monospace;
	font-weight:400;
	font-size:14px;
	line-height:20px;
	text-transform:uppercase;
	color:#5d4af5;
}
.s7-sla__title {
	font-family:Archivo,sans-serif;
	font-weight:500;
	font-size:40px;
	line-height:48px;
	color:#1a1a1a;
}
.s7-sla__cards {
	gap:40px;
}
.s7-sla__card {
	background-color:#fff;
	border:1px solid #e6e9ee;
	border-radius:6px;
	padding:44px;
	gap:40px;
}
.s7-sla__txt {
	gap:16px;
}
.s7-sla__label {
	font-family:"DM Mono",monospace;
	font-weight:400;
	font-size:14px;
	line-height:20px;
	text-transform:uppercase;
	color:#5d4af5;
}
.s7-sla__body {
	font-family:Geist,sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:24px;
	color:#1a1a1a;
}
.s7-sla__cta {
	background-color:#1a1a1a;
	border-radius:4px;
	gap:16px;
	padding:16px 32px;
	font-family:"DM Mono",monospace;
	font-weight:500;
	font-size:14px;
	line-height:20px;
	text-transform:uppercase;
	color:#fff;
}
.s7-sla__cta-arrow {
	color:#fff;
}
/* ===== homeai (Figma node 7388:15673) ===== */
.homeai { background-color:#f7f7f7; border-top:1px solid #e6e9ee; padding:128px 140px; }
.homeai__card { background-color:#5d4af5; border-radius:6px; padding:60px 64px; gap:64px; align-items:flex-end; }
.homeai__col { gap:40px; }
.homeai__head { gap:16px; }
.homeai__eyebrow { font-family:"DM Mono",monospace; font-weight:400; font-size:14px; line-height:20px; text-transform:uppercase; color:#aa9fff; }
.homeai__title { font-family:Archivo,sans-serif; font-weight:500; font-size:40px; line-height:48px; color:#fdfdfc; }
.homeai__row { gap:24px; align-items:center; }
.homeai__input { width:340px; gap:8px; }
.homeai__label { font-family:"DM Mono",monospace; font-weight:500; font-size:12px; line-height:16px; text-transform:uppercase; color:#fdfdfc; }
.homeai__select { background-color:#fdfdfc; border-radius:4px; padding:10px 12px; gap:8px; }
.homeai__select-text { font-family:"DM Mono",monospace; font-weight:400; font-size:14px; line-height:20px; color:#686868; }
.homeai__select-arrow { color:#686868; }
.homeai__chips { gap:8px; }
.homeai__chip { width:40px; height:40px; border:1px solid rgba(230,233,238,0.5); border-radius:4px; padding:8px; }
/* ===== s8-proof (Figma node 7388:15913) ===== */
.s8-proof {
	border-top:1px solid #e6e9ee;
}
.s8-proof__wrap {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:60px;
	/* The carried webflow.css section gives the section padding:128px 0 (vertical
	 * inset). Only supply the horizontal 140px here — declaring the full
	 * shorthand re-added 128px top/bottom on top of the section, doubling the
	 * vertical inset (984px tall vs Figma's 727px). */
	padding:0 140px;
}
.s8-proof__head {
	display:flex;
	flex-direction:column;
	gap:16px;
	text-align:center;
}
.s8-proof__eyebrow {
	font-family:"DM Mono",monospace;
	font-weight:400;
	font-size:14px;
	line-height:20px;
	text-transform:uppercase;
	color:#5d4af5;
}
.s8-proof__title {
	font-family:Archivo,sans-serif;
	font-weight:500;
	font-size:40px;
	line-height:48px;
	color:#1a1a1a;
}
.s8-proof__kpis {
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:24px;
}
.s8-proof__kpi {
	display:flex;
	flex-direction:column;
	gap:16px;
	padding:32px;
	background-color:#fff;
	border:1px solid #e6e9ee;
	border-radius:6px;
}
.s8-proof__kpi-label {
	font-family:"DM Mono",monospace;
	font-weight:400;
	font-size:14px;
	line-height:20px;
	text-transform:uppercase;
	color:#5d4af5;
	opacity:0.8;
}
.s8-proof__kpi-row {
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:8px;
}
.s8-proof__kpi-num {
	font-family:Archivo,sans-serif;
	font-weight:500;
	font-size:28px;
	line-height:36px;
	color:#1a1a1a;
}
.s8-proof__stories {
	display:flex;
	flex-direction:row;
	gap:24px;
}
.s8-proof__story {
	display:flex;
	flex-direction:column;
	gap:32px;
}
.s8-proof__story-divider {
	width:1px;
	background-color:#e6e9ee;
}
.s8-proof__story-txt {
	display:flex;
	flex-direction:column;
	gap:8px;
}
.s8-proof__story-title {
	font-family:Geist,sans-serif;
	font-weight:600;
	font-size:16px;
	line-height:24px;
	color:#1a1a1a;
}
.s8-proof__story-body {
	font-family:Geist,sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:24px;
	color:#1a1a1a;
}
/* ============================================================
 * s9-why  (Figma node 7388:15977)
 * ============================================================ */
.s9-why {
	border-top:1px solid #e6e9ee;
	border-bottom:1px solid #e6e9ee;
	padding:128px 140px;
	gap:60px;
}
.s9-why__head {
	gap:24px;
	max-width:1160px;
}
.s9-why__eyebrow {
	font-family:"DM Mono",monospace;
	font-weight:400;
	font-size:14px;
	line-height:20px;
	text-transform:uppercase;
	text-align:center;
	color:#5d4af5;
}
.s9-why__title {
	font-family:Archivo,sans-serif;
	font-weight:500;
	font-size:40px;
	line-height:48px;
	text-align:center;
	color:#1a1a1a;
}
.s9-why__grid {
	gap:40px;
	/* Cap the content to the 1160px Figma container (centered), matching the
	 * head + the other sections; without this the grid stretched to the full
	 * section padding-box on >1440 viewports and overshot every other section. */
	max-width:1160px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
.s9-why__col {
	gap:40px;
}
.s9-why__row {
	gap:64px;
}
.s9-why__txt {
	gap:16px;
}
.s9-why__h3 {
	font-family:Archivo,sans-serif;
	font-weight:500;
	font-size:28px;
	line-height:36px;
	color:#1a1a1a;
}
.s9-why__body {
	font-family:Geist,sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:24px;
	color:#1a1a1a;
}
.s9-why__divider-h {
	height:1px;
	background-color:#e6e9ee;
}
.s9-why__divider-v {
	width:1px;
	background-color:#e6e9ee;
}
.s9-why__close {
	font-family:Geist,sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:24px;
	text-align:center;
	color:#1a1a1a;
}
/* ============================================================
 * home_testimonials  (Figma node 7388:15631) — "Hear from our
 * customers" carousel. Dependency-free; JS in main.js drives it.
 * ============================================================ */
.home-tm {
	box-sizing: border-box;
	background-color: #f7f7f7;
	/* R30 (Anastasiia Design Audit) — the preceding .s1-problem section already
	   draws a 1px #e6e9ee bottom border, so a border-top here stacked into a 2px
	   line above the testimonials (thicker than the 1px side rails). Drop the
	   top border; the problem section's bottom border is the single 1px divider. */
	border-bottom: 1px solid #e6e9ee;
	padding: 128px 140px;
}
.home-tm__wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}
.home-tm__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}
.home-tm__eyebrow {
	margin: 0;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5d4af5;
}
.home-tm__title {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 48px;
	color: #1a1a1a;
}
.home-tm__carousel {
	width: 100%;
	max-width: 1160px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.home-tm__viewport {
	overflow: hidden;
	width: 100%;
}
.home-tm__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.45s ease;
}
.home-tm__slide {
	box-sizing: border-box;
	flex: 0 0 100%;
	display: flex;
	flex-direction: row;
	gap: 40px;
	background-color: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
	padding: 12px;
}
.home-tm__media {
	position: relative;
	flex: 0 0 345px;
	width: 345px;
	height: 480px;
	border-radius: 4px;
	overflow: hidden;
}
.home-tm__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.home-tm__media-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.3);
}
.home-tm__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: rgba(247, 247, 247, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
}
.home-tm__play img {
	width: 40px;
	height: 40px;
	display: block;
}
.home-tm__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	padding: 44px 32px 44px 0;
}
.home-tm__quote {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	color: #1a1a1a;
}
.home-tm__body {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a; /* Figma testimonial body is dark (desktop rgb(0,0,0) / mobile rgb(26,26,26)), matching the quote — NOT the secondary gray */
}
.home-tm__footer-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.home-tm__authors {
	display: flex;
	flex-direction: row;
	gap: 16px;
}
.home-tm__author {
	display: flex;
	flex-direction: column;
}
.home-tm__author-name {
	font-family: Geist, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}
.home-tm__author-role {
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #686868;
}
.home-tm__logo {
	height: 32px;
	width: auto;
	flex-shrink: 0;
}
.home-tm__ui {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.home-tm__fraction {
	margin: 0;
	padding-left: 16px;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	color: #1a1a1a;
}
.home-tm__frac-current {
	font-size: 24px;
	line-height: 32px;
}
.home-tm__frac-sep,
.home-tm__frac-total {
	font-size: 20px;
	line-height: 28px;
}
.home-tm__arrows {
	display: flex;
	flex-direction: row;
	gap: 12px;
}
.home-tm__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 1px solid #1a1a1a;
	border-radius: 4px;
	cursor: pointer;
}
.home-tm__arrow img {
	width: 14px;
	height: 14px;
}
/* Figma shows both nav arrows equally dark on slide 1/3 — keep the disabled
   (first-slide) prev visually identical, just non-interactive. */
.home-tm__arrow[disabled] {
	cursor: default;
}

/* video lightbox (testimonial play buttons) */
.ld-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: rgba(0, 0, 0, 0.82);
}
.ld-lightbox__inner {
	position: relative;
	width: 100%;
	max-width: 960px;
}
.ld-lightbox__frame {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
}
.ld-lightbox__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 8px;
}
.ld-lightbox__close {
	position: absolute;
	top: -42px;
	right: 0;
	padding: 0;
	background: none;
	border: 0;
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}

/* quote: no UA blockquote indent/border (Figma has none) */
.home-tm__quote { border: 0; padding: 0; }

/* ============================================================
 * Side vertical lines (Figma "Vertical lines" overlay, 1280-wide
 * content column at x80/x1360) — applied uniformly so they run
 * continuously down every home section, matching Figma.
 * ============================================================ */
.s1-problem, .home-tm, .s4-partner, .s5-pod, .s6-tl, .s7-sla, .s8-proof, .s9-why {
	position: relative;
}
.s1-problem::before, .home-tm::before, .s4-partner::before, .s5-pod::before,
.s6-tl::before, .s7-sla::before, .s8-proof::before, .s9-why::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: calc(50% - 640px);
	right: calc(50% - 640px);
	border-left: 1px solid #e6e9ee;
	border-right: 1px solid #e6e9ee;
	pointer-events: none;
}
/* keep each section's actual content above the lines */
.s1-problem__wrap, .home-tm__wrap, .s4-partner__wrap, .s5-pod__wrap,
.s6-tl__wrap, .s7-sla__wrap, .s8-proof__wrap, .s9-why__wrap {
	position: relative;
	z-index: 1;
}

/* ============================================================
 * s1-problem — complete the Figma-exact LAYOUT (the first-pass
 * block only set type/card; gaps+padding were left to carried CSS
 * and drifted). Figma node 7388:15573.
 * ============================================================ */
.s1-problem {
	padding: 128px 140px;
	/* Section separator: the Figma problem section carries a full-width top
	 * border (the line that divides the logo band from the problem). The section
	 * is full-bleed so this border spans the viewport like the other dividers. */
	border-top: 1px solid #e6e9ee;
}
.s1-problem__wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}
.s1-problem__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}
.s1-problem__steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}
.s1-problem__row {
	display: flex;
	flex-direction: row;
	gap: 24px;
	width: 100%;
}
.s1-problem__row--3 > .s1-problem__card,
.s1-problem__row--2 > .s1-problem__card {
	flex: 1 1 0;
	min-width: 0;
}
.s1-problem__card {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 40px;
}

/* problem cards must FILL the row (carried CSS capped their max-width →
   narrow cards, wrapped titles, asymmetry). Figma cards fill the column. */
.s1-problem__card {
	max-width: none;
	width: auto;
}

/* force the problem content column to the full Figma 1160 (carried CSS capped
   the wrap → narrow row → wrapped titles). */
.s1-problem__wrap { max-width: 1160px; width: 100%; }
.s1-problem__steps, .s1-problem__row { max-width: none; width: 100%; }

/* carried CSS pins the problem row narrow (live layout) — force Figma's full
   width so the 3 cards fill 1160 and titles sit on one line. */
.s1-problem__steps { width: 100% !important; max-width: none !important; }
.s1-problem__row { width: 100% !important; max-width: none !important; }
.s1-problem__row--3 > .s1-problem__card,
.s1-problem__row--2 > .s1-problem__card {
	flex: 1 1 0 !important;
	max-width: none !important;
	width: auto !important;
}

/* carried .s1-problem__wrap adds its own 140px padding ON TOP of the section
   padding (double inset → 880px content). Zero it: the section owns padding. */
.s1-problem__wrap { padding: 0 !important; }

/* lead paragraph: Figma Description node (7388:15580) is horizontal:fill →
   spans the full head width (1160). Carried webflow.css caps it at 720px;
   match Figma's fill behavior (.s1-problem__close already uses 1160). */
.s1-problem__lead { max-width: 1160px; }

/* card titles: negative tracking (design uses it on headings; hero=-0.01em).
   Closes the ~12px overflow so "You hired more engineers." sits on ONE line
   like Figma → all card bodies align. */

/* Figma renders Archivo ~4.6% narrower than Chrome's self-hosted cut, so card
   titles overflow by ~12px and wrap. Match Figma's effective width with -0.025em
   tracking → titles sit on one line, card bodies align. (Root: self-hosted
   Archivo width vs Figma — revisit with the variable font later.) */

/* card title weight: Figma renders this MUCH lighter than our 600 cut (our
   self-hosted Archivo is heavier). Match Figma's visual = Medium 500. */

/* DOUBLE-PADDING FIX: these 3 sections set section-padding (128/140) AND their
   carried __wrap also has 140px → content squeezed to 880. Zero the wrap padding
   so the section owns it → content 1160 (like s1-problem). */
.s7-sla__wrap, .homeai__wrap, .s9-why__wrap { padding: 0 !important; }

/* Cap the SLA content to the 1160px Figma container (centered) so its head +
 * card row stay inside the pinstripe frame on >1440 viewports — it was
 * stretching to the full section padding-box and overshooting the lines. */
.s7-sla__wrap { max-width: 1160px; margin-left: auto; margin-right: auto; }

/* homeai (AI summary): was excluded from the pinstripe guides AND its purple
 * card stretched past the 1280 lines on wide screens. Give it the same side
 * guides as every other section + cap the content to the 1160 Figma container. */
.homeai { position: relative; }
.homeai::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: calc(50% - 640px);
	right: calc(50% - 640px);
	border-left: 1px solid #e6e9ee;
	border-right: 1px solid #e6e9ee;
	pointer-events: none;
}
.homeai__wrap {
	position: relative;
	z-index: 1;
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
 * HEADER — floating pill navbar (Figma 7218:14167 / 7388:16045)
 * 3-way layout: logo (left) | nav (centered) | actions (right).
 * Collapses to a hamburger dropdown below the medium breakpoint.
 * ============================================================ */
.ld-header { position: fixed; top: 32px; left: 50%; transform: translateX(-50%); z-index: 1000; width: calc(100% - 48px); max-width: 1212px; }
.ld-header__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 32px; background-color: #f7f7f7; border: 1px solid #e6e9ee; border-radius: 12px; box-shadow: 0 67px 80px rgba(0,0,0,.07), 0 8.39px 10.02px rgba(0,0,0,.04); }
.ld-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.ld-header__logo img { display: block; width: 124px; height: 32px; }
.ld-header__nav { display: flex; align-items: center; gap: 28px; }
.ld-header__link { font-family: "DM Mono", monospace; font-weight: 400; font-size: 14px; line-height: 20px; text-transform: uppercase; color: #1a1a1a; text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.ld-header__link.is-active { font-weight: 500; color: #5d4af5; }
.ld-header__link:hover, .ld-header__link:focus-visible { color: #5d4af5; }
.ld-header__actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.ld-header__cta { display: inline-flex; align-items: center; gap: 12px; padding: 8px 24px; background-color: #5d4af5; border: 1px solid #5d4af5; border-radius: 4px; color: #fdfdfc; font-family: "DM Mono", monospace; font-weight: 500; font-size: 14px; line-height: 20px; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color 0.18s ease, color 0.18s ease; }
/* Hover — invert to purple-on-white (matches the production nav CTA interaction). */
.ld-header__cta:hover, .ld-header__cta:focus-visible { background-color: #fdfdfc; color: #5d4af5; }
.ld-header__cta-arrow { display: inline-flex; align-items: center; }
.ld-header__cta-arrow svg { display: block; }
/* Header-level horizontal frame line — completes the "frame" around the header
 * (with the vertical pinstripes), matching the PE/Insights pages + Figma's y=73
 * line. Page-bound (absolute, scrolls with the page), full width, same grey as
 * the vertical rails so the frame reads consistently. */
.ld-top-stripe {
	position: absolute;
	top: 66px; /* #3: centered on the navbar pill (top 32 + height 68/2) */
	left: 0;
	right: 0;
	height: 0;
	border-top: 1px solid #e6e9ee;
	z-index: 3;
	pointer-events: none;
}
/* #3/#8.1: the per-page PE/Insights hero stripe duplicated the global frame line
 * at a different y (73/52, not pill-centred) -> two lines. The global .ld-top-stripe
 * above now provides the single pill-centred line on every page, so hide the old one. */
.home-hero_top-stripe { display: none !important; }

/* Mobile menu CTA — hidden on desktop; the @media(max-width:991px) block flips
 * it to inline-flex at the top of the open dropdown. Styled as the purple button
 * (matches the live mobile menu's "Book a call"). */
.ld-header__cta--mobile {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 24px;
	background-color: #5d4af5;
	border: 1px solid #5d4af5;
	border-radius: 4px;
	color: #fdfdfc;
	font-family: "DM Mono", monospace;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.ld-header__cta--mobile:hover,
.ld-header__cta--mobile:focus-visible { background-color: #fdfdfc; color: #5d4af5; }
.ld-header__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; }
/* Thinner hamburger lines to match the live icon (was 2px — read as too heavy). */
.ld-header__burger span { display: block; width: 22px; height: 1.5px; margin: 0 auto; background-color: #1a1a1a; transition: transform .2s ease, opacity .2s ease; }
.ld-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ld-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ld-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991px) {
	.ld-header__burger { display: flex; }
	.ld-header__cta--desktop { display: none; }
	.ld-header__cta--mobile { display: inline-flex; justify-content: center; }
	.ld-header__nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 18px; padding: 24px; background-color: #f7f7f7; border: 1px solid #e6e9ee; border-radius: 12px; box-shadow: 0 24px 48px rgba(0,0,0,.12); display: none; }
	.ld-header__nav.is-open { display: flex; }
}
@media (max-width: 479px) {
	.ld-header { top: 16px; width: calc(100% - 32px); }
	.ld-header__bar { padding: 12px 16px; }
	.ld-top-stripe { top: 49px; } /* #3 mobile: pill center (top 16 + height 66/2) */
}
/* Interior pages need NO extra #main top padding: like the home page (and the
 * live site), every page's first section supplies its own top spacing to clear
 * the fixed header. The previous 120px here pushed all interior pages 120px below
 * their live positions (e.g. /customer-success H1 at 320 vs live 200). Zero it so
 * they match live; the about.css /team override (which only loaded on /team and
 * lost on specificity) is now redundant. */
body:not(.home):not(.single-case_study):not(.single-testimonial) #main { padding-top: 0; }

/* ============================================================
 * Font smoothing — Chrome's DEFAULT (subpixel) renders text HEAVIER
 * than Figma's grayscale antialiasing, making everything look bolder
 * than the design. Grayscale smoothing matches Figma → correct weight.
 * ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* ============================================================
 * MOBILE header → match the LIVE site: CTA stays inline as an
 * OUTLINED button (not hidden in the dropdown, not filled purple),
 * the dropdown nav is CENTERED, and a purple CUSTOMER HUB link sits
 * at the bottom of the menu.
 * ============================================================ */
.ld-header__hub { display: none; }
@media (max-width: 991px) {
	/* Live hides the header CTA on mobile — the bar is only logo + hamburger. */
	.ld-header__cta { display: none; }
	/* centered dropdown menu */
	.ld-header__nav { align-items: center; text-align: center; gap: 24px; padding: 28px 24px; }
	/* CUSTOMER HUB link */
	.ld-header__hub { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: "DM Mono", monospace; font-weight: 500; font-size: 14px; line-height: 20px; text-transform: uppercase; color: #5d4af5; text-decoration: none; }
	.ld-header__hub-arrow { display: inline-flex; align-items: center; }
}
@media (max-width: 479px) {
	.ld-header__cta { padding: 8px 12px; }
	.ld-header__bar { gap: 12px; }
}

/* ============================================================
 * FOOTER (Figma footer 7217:12580 / live section_footer)
 * Purple footer: link groups, contact, subscribe, AI links,
 * large wordmark, Clutch + copyright.
 * ============================================================ */
.ld-footer {
	box-sizing: border-box;
	position: relative;
	/* Lift the footer above the site-wide fixed `.pinstripes` overlay. Without
	   this, that grey #e6e9ee rule paints OVER the purple footer as a bright white
	   side divider; the CTA band already clears it via its own z-index:7. The
	   intended faint dividers come from `.ld-footer::before` (white @20%), matching
	   live (whose footer carries a `.pinstripes.footer` at opacity .2 over the same
	   region). NB: the pinstripes overlay is z-index:4 (theme.css, raised so the
	   rails show through the light contact/content sections for Anastasiia #7), so
	   the footer must sit ABOVE 4 to stay clean — hence z-index:8. */
	z-index: 8;
	overflow: hidden;
	/* Figma footer bg = purple #614afc with a faint white dot grid, stretched 100%×100% */
	background-color: #614afc;
	background: #614afc url("../images/footer/footer-bg.png") center / cover no-repeat;
	background-image: image-set(
		url("../images/footer/footer-bg.webp") type("image/webp"),
		url("../images/footer/footer-bg.png") type("image/png")
	);
	color: #fdfdfc;
	padding: 80px 140px 48px;
	/* Figma footer sub-frame top stroke — faint full-width divider (white @20%)
	   separating the CTA band from the footer nav row. strokeWeight 1px 0 0. */
	border-top: 1px solid rgba(253, 253, 252, 0.2);
}
.ld-footer__inner {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
}
/* Figma "Vertical lines" overlay — the site-wide pinstripes at x80/x1360 continue
   through the footer. White @20% (the footer bg is purple, not the light page). */
.ld-footer::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: calc(50% - 640px);
	right: calc(50% - 640px);
	border-left: 1px solid rgba(253, 253, 252, 0.2);
	border-right: 1px solid rgba(253, 253, 252, 0.2);
	pointer-events: none;
}
.ld-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}
.ld-footer__links { display: flex; flex-wrap: wrap; gap: 24px; }
.ld-footer__link {
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #fdfdfc;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.ld-footer__link:hover { opacity: 0.7; }
.ld-footer__contact {
	margin: 52px 0 0;
	display: flex;
	gap: 8px;
	font-family: "DM Mono", monospace;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
}
.ld-footer__contact a { color: #fdfdfc; text-decoration: none; }
.ld-footer__contact-label { opacity: 0.7; }
.ld-footer__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-top: 52px;
	flex-wrap: wrap;
}
.ld-footer__subscribe { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
/* Figma: Input Label/Medium — DM Mono 500 12/16, #FDFDFC */
.ld-footer__sub-label {
	font-family: "DM Mono", monospace;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
}
.ld-footer__sub-row { display: flex; gap: 16px; }
/* Figma: Input Frame fill #FDFDFC (solid white), no border, h40, DM Mono 14, placeholder #686868.
   Figma Input instance is a fixed 340px column (layout_H5HG2C width:340); the Subscribe
   button (172px) sits to its right at the row gap. */
.ld-footer__sub-input {
	width: 340px;
	flex: 0 0 auto;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 4px;
	background-color: #fdfdfc;
	color: #1a1a1a;
	font-family: "DM Mono", monospace;
	font-size: 14px;
	line-height: 20px;
}
.ld-footer__sub-input::placeholder { color: #686868; }
/* Figma: Button "White Outline" — transparent fill, 1px #E6E9EE border, white text, h40, w172 */
.ld-footer__sub-btn {
	height: 40px;
	min-width: 172px;
	padding: 0 24px;
	border: 1px solid #e6e9ee;
	border-radius: 4px;
	background-color: transparent;
	color: #fdfdfc;
	font-family: "DM Mono", monospace;
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	cursor: pointer;
}
/* Figma: Input Label/Regular — DM Mono 400 12/16, #FDFDFC. Helper text lives inside the
   340px Input column in Figma, so it wraps to two lines there — cap width to match. */
.ld-footer__sub-note {
	margin: 0;
	max-width: 340px;
	font-family: "DM Mono", monospace;
	font-size: 12px;
	line-height: 16px;
	color: #fdfdfc;
}
.ld-footer__ai { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; text-align: right; }
.ld-footer__ai-links { display: flex; gap: 16px; }
/* Figma: AI buttons fill #FDFDFC (white chip), 1px #E6E9EE border, dark #1A1A1A icon */
.ld-footer__ai-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid #e6e9ee;
	border-radius: 4px;
	background-color: #fdfdfc;
}
.ld-footer__ai-btn img { width: 16px; height: 16px; object-fit: contain; }
/* "Ask AI…" caption — DM Mono 12/16. Lifted from Figma's #E6E9EE (4.43:1 on the
   purple footer, below AA) to #FDFDFC (5.30:1, AA-passing). This is our
   Figma-rebuilt footer, not a carried live element, so the bump keeps parity. */
.ld-footer__ai-desc { margin: 0; font-family: "DM Mono", monospace; font-size: 12px; line-height: 16px; color: #fdfdfc; }
.ld-footer__wordmark { display: block; }
/* Figma wordmark frame is a fixed 775px (53.8% of 1440) and overflows its column;
   the SVG's right edge clears the graphic, so reproduce the natural size. */
.ld-footer__wordmark img { display: block; width: clamp(240px, 53.8vw, 775px); max-width: none; height: auto; }
.ld-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.ld-footer__clutch img { display: block; height: 40px; width: auto; }
.ld-footer__copyright { margin: 0; font-family: Geist, sans-serif; font-size: 14px; line-height: 20px; color: #fdfdfc; }

@media (max-width: 991px) {
	.ld-footer { padding: 64px 24px 40px; }
	.ld-footer__row { flex-direction: column; align-items: stretch; gap: 32px; }
	.ld-footer__ai { align-items: flex-start; text-align: left; }
	.ld-footer__subscribe { min-width: 0; flex: 1 1 auto; }
	.ld-footer__sub-input { width: auto; flex: 1 1 auto; }
}

/* footer brand row: wordmark + clutch + copyright (left) | two-square graphic (right).
   The row breaks out of the centered max-width inner so the graphic bleeds flush to
   the footer's right + bottom edges, exactly like Figma "Footer Graphic 1" (682×452). */
.ld-footer__brand {
	display: flex;
	align-items: flex-end;
	gap: 0;
	margin-top: 64px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(140px, calc(50vw - 580px));
}
.ld-footer__brand-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.ld-footer__graphic {
	flex: 0 0 52.46%;            /* 682 of the 1300px content box (1440 − 140 left pad) */
	align-self: flex-end;
	position: relative;
	aspect-ratio: 682 / 452;
	margin-bottom: -48px;        /* bleed past the footer's bottom padding to the edge */
	background: none;
}
/* two white rectangles, anti-diagonal step (Figma): top-right 391×291 @ (291,0); bottom-left 291×161 @ (0,291) */
.ld-footer__graphic::before,
.ld-footer__graphic::after { content: ""; position: absolute; background-color: #fdfdfc; }
.ld-footer__graphic::before { top: 0;      left: 42.67%; width: 57.33%; height: 64.38%; } /* 291/682 · 391/682 · 291/452 */
.ld-footer__graphic::after  { top: 64.38%; left: 0;      width: 42.67%; height: 35.62%; } /* 291/452 · 291/682 · 161/452 */
@media (max-width: 991px) {
	.ld-footer__graphic { display: none; }
	/* graphic is hidden on mobile — undo the desktop full-bleed break-out so the
	   wordmark/clutch/copyright align to the footer's normal left edge */
	.ld-footer__brand { width: auto; margin-left: 0; margin-right: 0; padding-left: 0; }
}

/* ── Footer CTA band (.section_footer-cta) — Figma node I7388:16043;4086:466 ──
   The cta is the top band of the Figma footer INSTANCE (7388:16043), which carries a
   dark IMAGE background fill (imageRef 5c1747ff…). WP renders the band as a standalone
   section on the near-white #F7F7F7 paper body, so its #FDFDFC white text was invisible
   (~1.02:1 contrast). Restore legibility with a scoped dark ink surface + Figma-exact
   button/typography. All rules SCOPED to .section_footer-cta — no shared surfaces touched.
   FLAG-FOR-HUMAN: flat #1A1A1A ink is the minimum legibility autofix; the live design
   intends the footer's dark IMAGE bg (imageRef 5c1747ff…) — confirm with Sandro whether
   that asset should be exported + applied instead of the flat fill. */
.section_footer-cta {
	background-color: #1a1a1a;                       /* dark ink so #FDFDFC text reads */
	border-top: 1px solid rgba(253, 253, 252, 0.2);  /* Figma cta top stroke 1px 0 0 */
}
.section_footer-cta .heading-style-h1 {
	font-family: Archivo, sans-serif;                /* Figma H1/Medium (was Helvetica Now Display) */
}
.section_footer-cta .paragraph-6 {
	font-family: Geist, sans-serif;                  /* Figma P lg/Medium (was Helvetica Neue) */
	line-height: 28px;                               /* Figma 28px (was 30px) */
}
.section_footer-cta .link-block-4 {
	border: 1px solid #e6e9ee;                       /* Figma stroke fill_N3CZLV (was 1px #FDFDFC, invisible) */
	border-radius: 4px;                              /* Figma Button borderRadius (was 6px) */
	padding: 12px 32px;                              /* Figma button layout_7G57DC (was 16px 32px) */
}
.section_footer-cta .padding-vertical {
	padding-top: 124px;                              /* Figma cta frame padding 124px (was 128px) */
	padding-bottom: 124px;                           /* Figma cta frame padding 124px (was 128px) */
}
.section_footer-cta .text-block-29 {
	font-weight: 500;                                /* Figma Button/Medium DM Mono 500 (was 400) */
	line-height: 20px;                               /* Figma Button/Medium 14/20 (was 14px) */
}

/* ============================================================
 * Mobile parity — desktop-first sections need fluid widths +
 * reduced padding so nothing overflows the small viewport.
 * ============================================================ */
@media (max-width: 991px) {
	/* homeai purple card: fluid, no fixed 340 input, reduced padding */
	.homeai { padding: 64px 24px; }
	.homeai__card { padding: 32px; gap: 32px; align-items: stretch; }
	.homeai__title { font-size: 32px; line-height: 40px; }
	.homeai__row { flex-direction: column; align-items: stretch; gap: 24px; }
	.homeai__input { width: 100%; }
	.homeai__illus { width: 100%; }
}
@media (max-width: 479px) {
	.homeai { padding: 56px 20px; }
	.homeai__card { padding: 24px 20px; gap: 24px; }
	.homeai__title { font-size: 26px; line-height: 32px; }
}

/* Side vertical pinstripes are a 1280px-wide centred overlay (Figma x80/x1360);
   below 1280 the calc(50% - 640px) goes negative and the ::before spills past the
   viewport → horizontal scroll on tablet/mobile. They are a wide-desktop guide, so
   hide them under 1280 (the design width). */
@media (max-width: 1279px) {
	.s1-problem::before, .home-tm::before, .s4-partner::before, .s5-pod::before,
	.s6-tl::before, .s7-sla::before, .s8-proof::before, .s9-why::before, .homeai::before,
	.section_footer-cta::before, .ld-footer::before { display: none; }
}

/* Content sections carry the Figma desktop padding (128px 140px) unconditionally,
   which clobbers the Webflow mobile padding → 110px content at 390. Restore mobile
   padding so content has room (and nowrap rows like proof KPIs stop overflowing). */
@media (max-width: 991px) {
	.s1-problem, .home-tm, .s4-partner, .s5-pod, .s6-tl, .s7-sla, .s8-proof, .s9-why { padding: 64px 24px; }
}
@media (max-width: 479px) {
	.s1-problem, .home-tm, .s4-partner, .s5-pod, .s6-tl, .s7-sla, .s8-proof, .s9-why { padding: 48px 20px; }
}

/* proof: the content (KPIs + stories) and the KPI metric row are desktop side-by-side;
   stack + wrap them on mobile so the 3 metric cards don't overflow. */
@media (max-width: 991px) {
	.s8-proof__content { flex-direction: column; }
	.s8-proof__kpis { flex-wrap: wrap; }
}

/* Footer CTA band (top of footer) = SOLID purple, NO dots. Per the live site, the
   dotted texture lives only on the lower .ld-footer; this band is a flat purple panel. */
.section_footer-cta {
	background: #614afc;
	position: relative;
	overflow: hidden;
}
/* Side vertical dividers — the Figma footer's "Vertical lines" (7388:16043) span the
   WHOLE footer (this CTA band + the lower footer). The WP split left them only on
   .ld-footer; mirror the same 1280-wide pinstripes here so the lines run continuously. */
.section_footer-cta::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: calc(50% - 640px);
	right: calc(50% - 640px);
	border-left: 1px solid rgba(253, 253, 252, 0.2);
	border-right: 1px solid rgba(253, 253, 252, 0.2);
	pointer-events: none;
}
.section_footer-cta > * {
	position: relative;
	z-index: 1;
}

/* Scroll / entrance animations are handled by GSAP + ScrollTrigger
   (assets/js/home-animations.js), matching the production site 1:1.
   The former CSS `html.js-reveal` hero/section reveal was removed. */

/* ── Forms — honeypot + subscribe status states ─────────────────────────────
   Honeypot inputs are off-screen (present in the DOM for bots, hidden from
   humans + assistive tech via aria-hidden on the wrapper). Subscribe status
   messages sit on the purple footer, so use light tints for contrast. ── */
.ld-footer__sub-hp,
.ld-cta-form_hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
}
.ld-footer__sub-msg {
	margin: 0;
	max-width: 340px;
	font-family: "DM Mono", monospace;
	font-size: 12px;
	line-height: 16px;
}
.ld-footer__sub-msg.is-success { color: #9ff0c0; }
.ld-footer__sub-msg.is-error { color: #ffc2c2; }

/* ============================================================
 * MOBILE (≤767px) — Figma mobile frame 7059:15346 (390px) parity.
 * Per-section overrides matching each section's Figma mobile node.
 * Placed LAST so it wins the source-order tie over webflow.css @767
 * AND the desktop rules in this file that leak into mobile.
 * Desktop is untouched (everything is inside the media query).
 * ============================================================ */
@media (max-width: 767px) {
	/* ---------- hero (Figma mobile) ---------- */
	/* hero-pp — Figma mobile parity (node 7059:15347, 390px frame, 24px gutters -> 342px content) */
	.hero-pp {
	  /* Figma mobile section frame: pt 114 / pb 40 / px 24. webflow.css 767px block set pb to 60. */
	  padding: 114px 24px 40px;
	}
	.hero-pp__wrap {
	  padding: 0 24px;
	}
	/* Figma inner Container gap between the text block and the pod img is 32px (desktop is 64). */
	.hero-pp__container {
	  gap: 32px;
	}
	/* Top row stacks to a single column on mobile (Figma: clutch/title/body/cta over pod). */
	.hero-pp__top-row {
	  flex-direction: column;
	  gap: 32px;
	}
	.hero-pp__col-left {
	  flex: auto;
	  max-width: 100%;
	  width: 100%;
	  gap: 32px;
	}
	/* Clutch badge: Figma mobile is 188.8 x 32 (desktop 236 x 40). */
	.hero-pp__clutch {
	  width: 188.8px;
	  height: 32px;
	}
	/* Title H2/Medium 5xl: 40 / 48 (desktop 76 / 80). */
	.hero-pp__title {
	  font-size: 40px;
	  line-height: 48px;
	}
	/* Body P md/Regular: 16 / 24 (desktop 20 / 28). */
	.hero-pp__subtitle {
	  font-size: 16px;
	  line-height: 24px;
	}
	/* CTA button: full-width, Figma py 12 / px 32, min-height 48. */
	.hero-pp__cta {
	  width: 100%;
	  justify-content: center;
	  padding: 12px 32px;
	}
	/* Pod img column: stacks under the text, no reserved desktop height; caption flows below. */
	.hero-pp__col-right {
	  width: 100%;
	  min-height: auto;
	  flex-direction: column;
	  display: flex;
	  position: relative;
	}
	.hero-pp__pod {
	  width: 100%;
	  height: 344px;
	  position: relative;
	  inset: auto;
	}
	/* Pod caption: static, stacked below the pod (desktop overlays it absolute); 342 max, px 20. */
	.hero-pp__pod-caption {
	  position: static;
	  inset: auto;
	  width: 100%;
	  max-width: 342px;
	  margin: 24px 0 0;
	  padding: 0 20px;
	  text-align: left;
	  align-items: flex-start;
	}
	/* Logo band full-width, left-flowing wrap. */
	.hero-pp__logos {
	  width: 100%;
	  max-width: 100%;
	}

	/* ---------- problem (Figma mobile) ---------- */
	/* s1-problem — Figma MOBILE (node 7059:15390, 390px frame).
	   home-figma.css loads AFTER webflow.css and its desktop rules (incl.
	   !important on the rows/cards) leak into mobile, clobbering webflow.css's
	   own 767px block. Re-assert the Figma mobile values here. */

	/* Section: 64px top/bottom, 24px gutters (342px content). Top divider kept. */
	.s1-problem {
		padding: 64px 24px;
	}

	/* Outer wrap stacks; gap 32px between head / steps / close / cta. */
	.s1-problem__wrap {
		gap: 32px;
	}

	/* Head: eyebrow / title / lead, centered (matches desktop), gap 12px. */
	.s1-problem__head {
		gap: 12px;
	}

	/* Type scaled to Figma mobile. */
	.s1-problem__eyebrow {
		font-size: 12px;
		line-height: 16px;
	}
	.s1-problem__title {
		font-size: 28px;
		line-height: 36px;
	}
	.s1-problem__lead,
	.s1-problem__close {
		font-size: 14px;
		line-height: 20px;
	}

	/* Steps column: all 5 cards stack vertically, 16px gap. */
	.s1-problem__steps {
		gap: 16px;
	}

	/* Collapse both desktop rows (3-up + 2-up) to a single stacked column.
	   Override the leaking home-figma.css !important rules (lines 879-886). */
	.s1-problem__row,
	.s1-problem__row--3,
	.s1-problem__row--2 {
		flex-direction: column;
		width: 100% !important;
		max-width: none !important;
		gap: 16px;
	}

	/* Each card spans the full width (342px), not flex:1 across a row. */
	.s1-problem__row--3 > .s1-problem__card,
	.s1-problem__row--2 > .s1-problem__card {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: none !important;
	}

	/* Card: padding 24px, internal gap 16px (Figma mobile, down from 40px). */
	.s1-problem__card {
		padding: 24px;
		gap: 16px;
	}

	/* Card title + body to Figma mobile sizes. */
	.s1-problem__h3 {
		font-size: 20px;
		line-height: 28px;
		/* #11 — the mobile card is a flex column with gap:16px, but the h3 keeps a
		   residual margin-bottom from the Webflow heading reset, so title->body
		   stacked to 32px (twice the desktop 16px). Zero the margin so only the
		   16px flex gap applies and the gap matches desktop. */
		margin: 0;
	}
	.s1-problem__body {
		font-size: 16px;
		line-height: 24px;
	}

	/* ---------- testimonials (Figma mobile) ---------- */
	/* testimonials (.home-tm) — match Figma mobile 7059-15421 (390px, 24px gutters) */

	/* Section frame: Figma mobile padding 64/24, head→card→nav gap 32 */
	.home-tm { padding: 64px 24px; }
	.home-tm__wrap { gap: 32px; }
	.home-tm__head { gap: 8px; }
	.home-tm__carousel { gap: 32px; }

	/* Title H4/Medium 28/36, eyebrow xs 12/16 */
	.home-tm__title { font-size: 28px; line-height: 36px; }
	.home-tm__eyebrow { font-size: 12px; line-height: 16px; }

	/* Card stacks vertically on mobile (desktop is a 345px media + flex content row).
	   Figma card: column, gap 24, padding 12 12 40. */
	.home-tm__slide {
		flex-direction: column;
		gap: 24px;
		padding: 12px 12px 40px;
	}

	/* Media: full-width image with Figma's 317/441 aspect (desktop fixes 345x480). */
	.home-tm__media {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 317 / 441;
	}

	/* Content: drop desktop side padding, Figma inner block = pt16 px12, gap 24. */
	.home-tm__content {
		gap: 24px;
		padding: 16px 12px 0;
		justify-content: flex-start;
	}

	/* Footer: authors + logo become one vertical stack (desktop is space-between row). */
	.home-tm__footer-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.home-tm__authors {
		flex-direction: column;
		gap: 16px;
	}

	/* Author role matches Figma mobile P md (16/24, secondary). */
	.home-tm__author-role { font-size: 16px; line-height: 24px; }

	/* ---------- aisummary (Figma mobile) ---------- */
	  .homeai {
	    padding: 64px 24px;
	  }
	  .homeai__wrap {
	    padding: 0;
	  }
	  .homeai__card {
	    flex-direction: column;
	    align-items: center;
	    gap: 40px;
	    padding: 32px;
	  }
	  .homeai__col {
	    gap: 24px;
	    width: 100%;
	  }
	  .homeai__head {
	    gap: 12px;
	  }
	  .homeai__eyebrow {
	    font-size: 12px;
	    line-height: 16px;
	  }
	  .homeai__title {
	    font-size: 36px;
	    line-height: 44px;
	  }
	  .homeai__row {
	    flex-direction: column;
	    align-items: stretch;
	    gap: 16px;
	    width: 100%;
	  }
	  .homeai__input {
	    width: 100%;
	  }
	  .homeai__label {
	    font-size: 10px;
	    line-height: 14px;
	  }
	  .homeai__select-text {
	    font-size: 12px;
	    line-height: 16px;
	  }
	  .homeai__chips {
	    gap: 8px;
	    width: 100%;
	    padding-top: 0;
	    flex-wrap: nowrap;
	  }
	  .homeai__chip {
	    flex: 1 0 0;
	    min-width: 0;
	    width: auto;
	    height: 40px;
	  }
	  .homeai__illus {
	    align-self: center;
	    width: 256px;
	    height: 256px;
	  }

	/* ---------- partner (Figma mobile) ---------- */
	.s4-partner { padding: 64px 24px; }
	.s4-partner__wrap { gap: 32px; padding: 0; }
	.s4-partner__head { gap: 8px; }
	.s4-partner__eyebrow { font-size: 12px; line-height: 16px; }
	.s4-partner__title { font-size: 28px; line-height: 36px; }
	.s4-partner__cards { flex-direction: column; gap: 16px; }
	.s4-partner__col-right { gap: 16px; }
	.s4-partner__card { padding: 24px; gap: 32px; }
	.s4-partner__card--dark { width: 100%; }
	.s4-partner__card-body { gap: 24px; }
	.s4-partner__text { gap: 8px; }
	.s4-partner__icon { width: 32px; height: 32px; }
	.s4-partner__h3 { font-size: 24px; line-height: 32px; }
	.s4-partner__cta-light { min-height: 40px; padding: 12px 24px; }

	/* ---------- pod (Figma mobile) ---------- */
	.s5-pod__eyebrow { font-size: 12px; line-height: 16px; }
	.s5-pod__title { font-size: 28px; line-height: 36px; }
	.s5-pod__card { padding: 24px; }

	/* ---------- timeline (Figma mobile) ---------- */
	.s6-tl { padding: 64px 24px; }
	.s6-tl__wrap { padding: 0; gap: 32px; max-width: 100%; }
	.s6-tl__head { gap: 8px; }
	.s6-tl__eyebrow { font-size: 12px; line-height: 16px; }
	.s6-tl__title { font-size: 28px; line-height: 36px; }
	.s6-tl__grid { display: flex; flex-direction: column; gap: 28px; grid-column-gap: 28px; grid-row-gap: 28px; align-items: stretch; }
	.s6-tl__steps { max-width: 100%; gap: 24px; grid-column-gap: 24px; grid-row-gap: 24px; }
	.s6-tl__step { gap: 27px; grid-column-gap: 27px; grid-row-gap: 27px; align-items: flex-start; }
	.s6-tl__txt { gap: 8px; grid-column-gap: 8px; grid-row-gap: 8px; max-width: 100%; }
	.s6-tl__h3 { font-size: 20px; line-height: 28px; }
	.s6-tl__body { font-size: 16px; line-height: 24px; }
	.s6-tl__roi { width: 100%; padding: 24px; gap: 24px; grid-column-gap: 24px; grid-row-gap: 24px; align-items: center; }
	.s6-tl__roi-title { font-size: 20px; line-height: 28px; }
	.s6-tl__roi-list { gap: 8px; grid-column-gap: 8px; grid-row-gap: 8px; width: 100%; }
	.s6-tl__roi-item { font-size: 16px; line-height: 24px; }
	.s6-tl__cta { min-height: 40px; padding: 12px 24px; }

	/* ---------- sla (Figma mobile) ---------- */
	.s7-sla {
	  padding: 64px 24px;
	}
	.s7-sla__wrap {
	  gap: 32px;
	  grid-column-gap: 32px;
	  grid-row-gap: 32px;
	  max-width: none;
	  padding: 0;
	}
	.s7-sla__head {
	  gap: 8px;
	  grid-column-gap: 8px;
	  grid-row-gap: 8px;
	}
	.s7-sla__eyebrow {
	  font-size: 12px;
	  line-height: 16px;
	}
	.s7-sla__title {
	  font-size: 28px;
	  line-height: 36px;
	}
	.s7-sla__cards {
	  display: flex;
	  flex-direction: column;
	  flex-wrap: nowrap;
	  gap: 16px;
	  grid-column-gap: 16px;
	  grid-row-gap: 16px;
	  width: 100%;
	}
	.s7-sla__card {
	  width: 100%;
	  min-width: 0;
	  flex: 0 0 auto;
	  padding: 24px;
	  gap: 16px;
	  grid-column-gap: 16px;
	  grid-row-gap: 16px;
	}
	.s7-sla__icon {
	  width: 20px;
	  height: 20px;
	}
	.s7-sla__txt {
	  gap: 8px;
	  grid-column-gap: 8px;
	  grid-row-gap: 8px;
	}
	.s7-sla__label {
	  font-size: 12px;
	  line-height: 16px;
	}
	.s7-sla__cta {
	  display: flex;
	  width: 100%;
	  min-height: 40px;
	  padding: 12px 24px;
	  gap: 12px;
	  grid-column-gap: 12px;
	  grid-row-gap: 12px;
	}

	/* ---------- proof (Figma mobile) ---------- */
	  /* proof — Figma mobile (390px, node 7059-15705). home-figma.css loads LAST,
	     so these win over both webflow.css @767 and home-figma.css @991/@479. */
	  .s8-proof { padding: 64px 24px; }
	  .s8-proof__wrap { gap: 32px; padding: 0; }
	  .s8-proof__head { gap: 8px; }
	  .s8-proof__eyebrow { font-size: 12px; line-height: 16px; }
	  .s8-proof__title { font-size: 28px; line-height: 36px; }

	  /* Collapse the desktop side-by-side KPI row + stories row into single columns.
	     home-figma's @991 flex-wrap:wrap was leaving them side-by-side/overflowing. */
	  .s8-proof__content { flex-direction: column; gap: 32px; }
	  .s8-proof__kpis { flex-direction: column; flex-wrap: nowrap; gap: 16px; align-items: stretch; }
	  .s8-proof__kpi { width: 100%; flex: 1 1 auto; padding: 24px; }
	  .s8-proof__stories { flex-direction: column; gap: 32px; align-items: stretch; }
	  .s8-proof__story { width: 100%; flex: 1 1 auto; max-width: none; gap: 16px; }

	  /* Vertical 1px separator is a desktop-only between-column divider — Figma mobile
	     stacks with whitespace, no vertical rule. */
	  .s8-proof__story-divider { display: none; }

	/* ---------- why (Figma mobile) ---------- */
	  .s9-why {
	    padding: 64px 24px;
	  }
	  .s9-why__wrap {
	    gap: 32px;
	    padding: 0;
	  }
	  .s9-why__head {
	    gap: 8px;
	  }
	  .s9-why__eyebrow {
	    font-size: 12px;
	    line-height: 16px;
	  }
	  .s9-why__title {
	    font-size: 28px;
	    line-height: 36px;
	  }
	  .s9-why__grid {
	    flex-direction: column;
	    gap: 24px;
	  }
	  .s9-why__col {
	    width: 100%;
	    gap: 24px;
	  }
	  .s9-why__divider-v {
	    display: none;
	  }
	  .s9-why__row {
	    gap: 24px;
	    min-height: auto;
	  }
	  .s9-why__row:first-child {
	    min-height: auto;
	  }
	  .s9-why__txt {
	    gap: 8px;
	  }
	  .s9-why__h3 {
	    font-size: 20px;
	    line-height: 28px;
	  }
	  .s9-why__body {
	    font-size: 16px;
	    line-height: 24px;
	  }
	  .s9-why__close {
	    font-size: 14px;
	    line-height: 20px;
	  }

}

/* ============================================================
 * Home parity-audit fixes (2026-06-05) — mobile residuals found by
 * the adversarial section-by-section Figma audit. All mobile-scoped;
 * desktop is untouched (every rule is inside the mobile media query).
 * ============================================================ */
@media (max-width: 767px) {
	/* hero: the wrapper added a SECOND 24px gutter on top of .hero-pp's,
	   shrinking the content frame to 294px. Drop it → single 24px gutter,
	   restoring the Figma 342px frame. */
	.hero-pp__wrap { padding: 0; }

	/* pod: the 479px block left a 20px gutter; Figma mobile is 24px. */
	.s5-pod { padding-left: 24px; padding-right: 24px; }

	/* timeline: the ROI card title was centered by align-items:center;
	   Figma left-aligns it flush with the list + CTA. */
	.s6-tl__roi { align-items: flex-start; }

	/* why: stacked pods were column-major (Velocity, Pods, Top 1%, Risk) with
	   only 2 dividers; Figma is row-major (Velocity, Top 1%, Pods, Risk) with a
	   divider between all four. Flatten the two columns, reorder the rows +
	   in-column dividers, and synthesise the one missing divider. */
	.s9-why__grid { flex-direction: column; gap: 24px; }
	.s9-why__col { display: contents; }
	.s9-why__col:first-child > .s9-why__row:first-child { order: 1; }
	.s9-why__col:last-child  > .s9-why__row:first-child { order: 2; border-top: 1px solid #e6e9ee; padding-top: 24px; }
	.s9-why__col:first-child > .s9-why__divider-h        { order: 3; }
	.s9-why__col:first-child > .s9-why__row:last-child   { order: 4; }
	.s9-why__col:last-child  > .s9-why__divider-h        { order: 5; }
	.s9-why__col:last-child  > .s9-why__row:last-child   { order: 6; }
}

/* ============================================================
 * Sandro home-parity batch (2026-06-05) — 9 fixes from the
 * section-by-section Figma review (issue #s in comments).
 * Mobile rules in @media(max-width:767px); desktop-only rules
 * guarded by @media(min-width:768px) or pseudo-els that skip mobile.
 * ============================================================ */

/* #1 — full-bleed 1px header hairline (#ebedf1) running edge-to-edge THROUGH
 * the floating pill (Figma 7388-15525: a 1440-wide line at y73, i.e. the pill's
 * vertical centre). Anchored to the header's own box (position:absolute) and
 * centred on the viewport (left:50% + translateX) so it spans the full width
 * symmetrically; the pill's opaque #f7f7f7 bar paints over the middle, leaving
 * the line "entering" the pill from both sides — connected, not cut off.
 * NB: the old position:fixed + z-index:-1 dropped the line behind page content
 * and anchored it to the off-centre header edge, so only stubs showed. */
/* Removed: the live site draws NO full-width hairline behind the floating
 * header (verified on / and /insights — live's navbar has no such pseudo-line).
 * This was a dev-only addition from the home build; dropping it so every page's
 * header matches live (the pill's own 1px border + shadow stay). */
.ld-header::before {
	content: none;
}

/* #3 — problem cards too tall: the 40px card flex-gap was applied num→h3 AND
 * h3→body, + the h3's 16px margin = 56px title→body (Figma 16px). Zero the gap,
 * move the 40px to the numeral; the h3 margin then supplies the 16px. Desktop only. */
@media (min-width: 768px) {
	.s1-problem__card { gap: 0; }
	.s1-problem__num { margin-bottom: 40px; }
}

/* #4 RE-FIXED (Anastasiia R10 "vertical divider is missing") — the previous
 * "pixel-snap via box-shadow" set width:0, but a 0-width box casts a 0-width
 * shadow, so the vertical column dividers rendered INVISIBLE. Restore a real 1px
 * line. Both are display:none ≤767, so desktop-only. */
.s9-why__divider-v,
.s8-proof__story-divider {
	width: 1px;
	background-color: #e6e9ee;
	box-shadow: none;
}

/* R10 cont. (Anastasiia + QA both still read the vertical as "missing") — at
 * #e6e9ee a full-width HORIZONTAL hairline reads, but a 1px VERTICAL line of the
 * same colour is sub-perceptible. Nudge BOTH s9-why column rules a touch darker
 * so the vertical reads as clearly as the horizontal, kept identical (they cross
 * at the grid centre). Scoped to s9-why so other sections keep #e6e9ee. */
.s9-why__divider-v,
.s9-why__divider-h {
	background-color: #d6dae3;
}

@media (max-width: 767px) {
	.ld-header::before { display: none; }                 /* #1 no hairline on mobile */
	/* Pod (Figma mobile 7102:14163 — artwork ≈273px wide, caption directly below).
	 * hero-pod-4x.png is ~83% artwork + a 324px faint bottom-shadow zone; with
	 * background-size:contain the box reserved that empty zone → caption ~82px below
	 * the visible dot. Using a mobile-cropped asset (hero-pod-mobile.png = artwork +
	 * the dot's glow, dead shadow removed) lets contain show the WHOLE image (no
	 * overflow crop — the dot keeps its breathing room, not chopped) at ≈274px wide
	 * (matches Figma, not enlarged), with the caption a balanced ~28px below the dot. */
	.hero-pp__pod {
		height: 370px;
		background-image: url("../images/home/hero-pod-mobile.png");
		background-image: image-set(
			url("../images/home/hero-pod-mobile.avif") type("image/avif"),
			url("../images/home/hero-pod-mobile.webp") type("image/webp"),
			url("../images/home/hero-pod-mobile.png") type("image/png")
		);
		background-size: contain;
		background-position: top center;
	}
	.hero-pp__pod-caption { margin-top: 16px; }            /* image ↔ caption balanced, per Figma */
	.hero-pp__logos-heading { font-size: 14px; line-height: 20px; } /* #6 heading 14/20, one line */
	/* Logo band height: Figma mobile (7102:14172) is ~133px = 24 pad / 20 heading /
	 * 32 gap / 33 logos / 24 pad. Ours was 183px — desktop padding 40 + margin-top 40
	 * leaked in, and logos ran up to 43px tall. Trim to Figma spacing + cap logo height. */
	.hero-pp__logos { margin-top: 0; padding: 24px 0; gap: 32px; }
	.hero-pp__logo-item img { max-height: 32px; }          /* cap oversized marks, keep small ones */
	.homeai__chips { justify-content: flex-start; }        /* #7 chips left-aligned */
	.homeai__chip { flex: 0 0 auto; width: 48px; height: 40px; } /* #7 fixed tiles, no stretch */
	.s9-why__icon,
	.s9-why__icon--talent { width: 20px; height: 20px; }   /* #9 why icons 20px */
	/* #10 mobile footer: two clean stacked nav columns + full-width stacked subscribe */
	.ld-footer__top { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 0; align-items: start; }
	.ld-footer__links { flex-direction: column; gap: 24px; align-content: start; }
	.ld-footer__sub-row { flex-direction: column; gap: 12px; }
	.ld-footer__sub-input { width: 100%; flex: 1 1 auto; }
	.ld-footer__sub-btn { width: 100%; min-width: 0; }
}

/* #8 — proof mobile order: Figma (7059-15705) interleaves each KPI with its
 * matching story in divider-separated pairs (KPI1,story1,hr,KPI2,story2,hr,KPI3,
 * story3). Our DOM has two sibling containers (.s8-proof__kpis, .s8-proof__stories).
 * Mobile-ONLY: dissolve both containers with display:contents so their children
 * become direct flex items of .s8-proof__content, then `order` them into pairs and
 * repurpose the existing story-dividers as the horizontal between-pair rules.
 * Desktop is 100% untouched (this is all inside the mobile query). */
@media (max-width: 767px) {
	.s8-proof__content { display: flex; flex-direction: column; gap: 16px; }
	.s8-proof__kpis,
	.s8-proof__stories { display: contents; }
	.s8-proof__kpis > .s8-proof__kpi:nth-child(1)              { order: 1; }
	.s8-proof__stories > .s8-proof__story:nth-child(1)         { order: 2; }
	.s8-proof__stories > .s8-proof__story-divider:nth-child(2) { order: 3; }
	.s8-proof__kpis > .s8-proof__kpi:nth-child(2)              { order: 4; }
	.s8-proof__stories > .s8-proof__story:nth-child(3)         { order: 5; }
	.s8-proof__stories > .s8-proof__story-divider:nth-child(4) { order: 6; }
	.s8-proof__kpis > .s8-proof__kpi:nth-child(3)              { order: 7; }
	.s8-proof__stories > .s8-proof__story:nth-child(5)         { order: 8; }
	/* turn the (desktop-vertical) story dividers into full-width horizontal rules */
	.s8-proof__story-divider {
		display: block;
		width: 100%;
		height: 1px;
		background-color: #e6e9ee;
		box-shadow: none;
		margin: 16px 0;
	}
}

/* #10 — footer pinstripe frame on MOBILE (Figma footer "Vertical lines" 7217:12724,
 * inset 0 10px). Our desktop guides sit at calc(50%-640px) which goes off-screen
 * below 768 (so they're display:none); re-show them at the footer's own 10px inset
 * in the Figma white-25% on the purple band. Frames the whole footer like Figma. */
@media (max-width: 767px) {
	.ld-footer::before,
	.section_footer-cta::before {
		display: block;
		left: 10px;
		right: 10px;
		border-left: 1px solid rgba(247, 247, 247, 0.25);
		border-right: 1px solid rgba(247, 247, 247, 0.25);
	}
}

/* #5/#6 (Anastasiia QA 2026-06-22): two home section separators were missing —
   the top hairline above "We're a Velocity Partner" (.s4-partner, after Ask-AI)
   and above "Legacy Vendor Rescue" (.s7-sla, after the timeline). Every other
   section carries this 1px #e6e9ee divider; add it to these two for parity. */
.s4-partner { border-top: 1px solid #e6e9ee; }
.s7-sla { border-top: 1px solid #e6e9ee; }

/* ─── Anastasiia (mobile menu QA, UI-Kit 4451:18196) — book-a-call in the header
   + drop Customer Hub. Figma's mobile header (component set 7663:15172) = logo +
   CTA button + burger. On dev the bar CTA (.ld-header__cta in .ld-header__actions)
   was hidden on mobile, while a second in-menu CTA (.ld-header__cta--mobile) and
   the Customer Hub link (.ld-header__hub) sat inside the dropdown. Surface the bar
   CTA (always visible next to the burger), drop the in-menu CTA, and drop Customer
   Hub (it lives in the footer now). Desktop (>991px) is untouched. */
@media (max-width: 991px) {
	.ld-header__cta { display: inline-flex; }
	.ld-header__cta--mobile { display: none; }
	.ld-header__hub { display: none; }
}

/* ─── Anastasiia (mobile QA) — spacing above the footer "Limestone Digital"
   wordmark should be 20px (Figma footer 7217:12582). The .ld-footer__brand block
   carries a 64px top margin; tighten it to 20px on mobile only. */
@media (max-width: 767px) {
	.ld-footer__brand { margin-top: 20px; }
}

/* ─── r3 (Anastasiia Design Audit 4, re-fix after QA-fail) — mobile footer-CTA must
   MATCH desktop. The live Webflow baseline swaps buttons by viewport: desktop shows
   "See if we're a fit" (.link-block-4 → /contact popup) and HIDES .button-footer-mob;
   mobile (≤767) does the reverse — hides .link-block-4 and shows "Book diagnostic"
   (.button-footer-mob → HubSpot). Anastasiia's QA note: "keep the name consistent
   'see if we're a fit' — it should open a contact form" → so REVERSE the mobile
   toggle: show .link-block-4 and hide .button-footer-mob on mobile too. Result: a
   single "See if we're a fit" button → on-site /contact popup on EVERY breakpoint.
   (This intentionally overrides the older Figma node 7059-15833, which had shown a
   single "Book Diagnostic" button on mobile — superseded by her explicit QA note.) */
@media (max-width: 767px) {
	.section_footer-cta .link-block-4,
	.section_footer-cta .link-block-4.openpopup.open-popup-trigger {
		display: inline-block !important;
	}
	.section_footer-cta .button-footer-mob,
	.section_footer-cta .button-footer-mob.openpopup.open-popup-trigger {
		display: none !important;
	}
}

/* ─── R4 (Anastasiia Design Audit, re-fix after QA-fail) — Proof section: the gap
   ABOVE each company logo. NB this is the s8-proof STORY logo (OneRail / Brown
   Boots / etc.), not the footer wordmark (my first pass fixed the wrong element).
   In the interleaved mobile order each .s8-proof__story (logo + text) follows its
   KPI card; the gap was the 16px content flex-gap — Anastasiia's note sets it to
   20px. A 4px top margin on the story lifts the kpi→logo gap to 20px while leaving
   the divider/between-pair gaps untouched. */
@media (max-width: 767px) {
	.s8-proof__story { margin-top: 4px; }
}