/* ==========================================================================
   v3 — Home / تحداني كبراند
   Figma node 8440:16183 (1440 x 5229.99)

   Desktop values are pinned to Figma. The phone/tablet behaviour is DERIVED:
   Figma's Mobile page is the in-app (isApp) design, not a responsive web view,
   so no phone-browser reference exists for this page. Breakpoints follow the
   project convention set in components.css: 1200 / 900 / 600.

   Depends on tokens.css + components.css. Load after both.
   ========================================================================== */

.v3-home { background: var(--v3-bg-page); overflow-x: hidden; }

/* ==========================================================================
   Hero — node 8440:16184 (1440 x 989)
   Figma positions everything absolutely. Here the copy is in normal flow so it
   reflows, while the decorative card cluster stays a positioned layer that is
   scaled as a unit — it is half-hidden by the wave anyway, so shrinking it
   proportionally reads better than rearranging it.
   ========================================================================== */

.v3-hero {
	position: relative;
	min-height: 989px;
	background: var(--v3-bg-brand);
}

/* The clip lives here now, on a layer that holds only the decoration.
   overflow on the SECTION made it the scroll container for the sticky navbar
   inside it, so the bar stuck to the hero and left with it. */
.v3-hero__deco {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

/* Ellipse 127 — a white circle r=274 under a 210.123 Gaussian blur.
   Reproduced in CSS rather than shipped as the 1388x1388 exported SVG: CSS
   blur() takes the standard deviation directly, so blur(210.123px) on a 548px
   circle is the same filter with the same parameter, without a huge asset.
   Anchored to the base so it tracks the cards as the hero shortens. */
.v3-hero__glow {
	position: absolute;
	left: calc(50% + 19px);
	bottom: 97px;                        /* centre sat at y=892 in a 989 hero */
	transform: translate(-50%, 50%);
	width: 548px;
	height: 548px;
	border-radius: 50%;
	background: var(--v3-white);
	filter: blur(210.123px);
	pointer-events: none;
	z-index: 0;
}

/* z-index only — the position comes from components.css, which makes the
   marketing bar sticky. Restating `relative` here would pin it to the hero. */
.v3-hero .v3-navbar { z-index: 40; }

/* --- Copy column. Figma: logo top 203, tagline 371 — i.e. 92px below the
   111px navbar, then 60px, then a 32px gap to the store pills. --- */
.v3-hero__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 120px var(--v3-space-5) 0;   /* was 92 to the logo, then 108+60 to the tagline */
	text-align: center;
}

.v3-hero__tagline {
	max-width: 1240px;
	margin: 0;
	color: var(--v3-text-inverse);
	font-size: var(--v3-fs-h3);          /* 32px Medium */
	font-weight: var(--v3-fw-medium);
	line-height: 1.5;                    /* Web/H3: Medium carries an explicit 1.5 */
}

/* The opening sentence, on a line of its own and in the bold weight — it is
   the promise the page is making and the rest of the paragraph explains it.

   display: block is what breaks the line, rather than a <br>: a break would
   still be there when the sentence wraps on a phone, leaving the second half
   stranded under a one-word line. As a block it takes the lines it needs and
   the explanation always starts under all of them. */
.v3-hero__lead {
	display: block;
	font-weight: var(--v3-fw-bold);
}

/* Play first, stores under it. The 32px that used to sit on the store row now
   sits on this wrapper, so the spacing above the block is unchanged. */
.v3-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--v3-space-5);              /* 24px */
	margin-top: var(--v3-space-6);       /* 32px */
}

.v3-hero__alt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--v3-space-3);              /* 12px */
}

.v3-hero__alt-label {
	color: var(--v3-text-inverse);
	font-family: var(--v3-font);
	font-size: var(--v3-fs-body);
	font-weight: var(--v3-fw-medium);
	line-height: var(--v3-lh-auto);
	opacity: .85;
}

.v3-hero__stores {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--v3-space-5);              /* 24px */
}

/* Hero store buttons are their own thing: outlined pills, NOT the footer's
   dark chips. Their apple/play glyphs are also different exports from the
   footer's — genuinely different paths, not rescales, so both are kept. */
.v3-hero__store {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--v3-space-4);              /* 16px */
	width: 180px;
	padding: var(--v3-space-3) 22px;
	direction: ltr;                      /* Latin label + leading glyph: this pill
	                                        is LTR content inside an RTL page */
	text-align: left;
	border: 1px solid var(--v3-border-white);
	border-radius: 40px;
	color: var(--v3-text-inverse);
	text-decoration: none;
}

.v3-hero__store span {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--v3-space-1);              /* 4px */
	font-size: var(--v3-fs-body);        /* 16px Bold */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
	white-space: nowrap;
}

/* DERIVED: Figma defines no hover for the hero store pills. */
.v3-hero__store:hover { background: rgba(255, 255, 255, .12); }

/* See the link-state guard in components.css — MDB's `a:hover` (0,1,1) beats a
   bare class, so the hero store pill needs its colour restated. */
.v3-hero__store:link, .v3-hero__store:visited,
.v3-hero__store:hover, .v3-hero__store:focus, .v3-hero__store:active {
	color: var(--v3-text-inverse);
	text-decoration: none;
}

/* --- The two tilted cards — node 8440:16186 ---
   A 1440x989 layer pinned to the hero's base, so the cards keep their designed
   distance above the wave at any hero height, and scale as a unit on narrow
   viewports (origin at the base, so they stay glued to the wave).

   Figma nests a -12.79deg group with a +26.68deg child. Flattened to two
   absolute cards at their computed centres and effective rotations
   (-12.79 and -12.79+26.68 = +13.89).

   The y values come from get_design_context (top:621 for the group), NOT from
   get_metadata, which reports y=679.68 for the same frame — the frame holds
   rotated children and its metadata box does not match the render. Card B's
   centre was likewise derived by composing the nested transforms rather than
   read from metadata, which had it 86px off. Both confirmed by a
   difference-blend against the 1:1 Figma render. */
.v3-hero__cards {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 1;
	width: 1440px;
	height: 989px;
	transform: translateX(-50%);
	transform-origin: 50% 100%;
	pointer-events: none;
}

.v3-hero__card {
	position: absolute;
	width: 265.112px;
	height: 341.7px;
	border: 3.4px solid var(--v3-border-orange-alt);
	border-radius: 20.4px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
	overflow: hidden;
}

/* Figma does NOT cover-fit the artwork: node 8440:16188 places a
   278.073x347.591 image (larger than the 265.112x341.7 card) inside a wrapper
   at (-13.82, -3.24), rotated -0.34deg. That puts the image centre at
   (126.24, 171.38) from the card's border box — 6.32px left of the card centre.
   Absolute children resolve against the padding box, so the 3.4px border is
   subtracted from both offsets. */
.v3-hero__card img {
	position: absolute;
	left: 122.84px;                      /* 126.24 - 3.4 border */
	top: 167.98px;                       /* 171.38 - 3.4 border */
	display: block;
	width: 278.073px;
	height: 347.591px;
	max-width: none;
	transform: translate(-50%, -50%) rotate(-0.34deg);
	object-fit: cover;
}

/* The same shine arc as the button, top-right of each card (leaf 22x16.103 at
   right 9.5 / top 8.53 => asset box offset by its 4px stroke overhang). */
.v3-hero__card::after {
	content: "";
	position: absolute;
	top: 4.53px;
	right: 5.5px;
	width: 30.0015px;
	height: 24.1013px;
	background: url("/img/v3/btn-shine-right.svg") no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: 1;
}

.v3-hero__card--a {
	left: 590.08px;
	top: 816.95px;
	transform: translate(-50%, -50%) rotate(-12.79deg);
}

.v3-hero__card--b {
	left: 899.70px;
	top: 815.67px;
	transform: translate(-50%, -50%) rotate(13.89deg);
}

/* The hero's bottom divider. Figma places it at y=875 in a 989px section, so
   it hangs 66px past the edge — the .v3-wave default. */
.v3-hero .v3-wave { z-index: 2; }

/* ==========================================================================
   RESPONSIVE — DERIVED (no Figma reference; see the header note)
   The card cluster scales as a unit; the copy reflows and steps down.
   ========================================================================== */

@media (max-width: 1200px) {
	.v3-hero { min-height: 880px; }
	.v3-hero__body { padding-top: 72px; }
	.v3-hero__tagline { margin-top: 44px; font-size: 28px; }
	.v3-hero__cards { transform: translateX(-50%) scale(.82); }
}

@media (max-width: 900px) {
	.v3-hero { min-height: 740px; }
	.v3-hero__body { padding-top: 56px; }
	.v3-hero__tagline { margin-top: 32px; font-size: var(--v3-fs-h4); }  /* 24 */
	.v3-hero__actions { margin-top: var(--v3-space-5); }
	.v3-hero__cards { transform: translateX(-50%) scale(.62); }
	.v3-hero .v3-wave { height: 140px; --v3-wave-drop: 50px; }

	/* The hard <br> is a desktop line break; let the copy reflow. */
	.v3-hero__tagline br { display: none; }
}

@media (max-width: 600px) {
	/* 660, not 600: the hero gained a play button and its "أو حمّل التطبيق"
	   label — about 108px — and the card cluster is a bottom-anchored layer, so
	   content that outgrows the hero runs into it rather than pushing it. */
	.v3-hero { min-height: 700px; }
	.v3-hero__body { padding: 40px var(--v3-space-4) 0; }
	.v3-hero__tagline { margin-top: 0; font-size: var(--v3-fs-h5); }  /* 20 */
	.v3-hero__actions { margin-top: var(--v3-space-5); }
	.v3-hero__stores { gap: var(--v3-space-3); }
	.v3-hero__store { width: 158px; padding: 10px 16px; gap: var(--v3-space-3); }
	.v3-hero__store img { height: 22px; }
	.v3-hero__store span { font-size: var(--v3-fs-caption); }
	.v3-hero__cards { transform: translateX(-50%) scale(.44); }
	.v3-hero .v3-wave { height: 110px; --v3-wave-drop: 38px; }
}

/* ==========================================================================
   Features — "تعرف على تحداني", node 8440:16210 (1440 x 1533.99)
   Section title pill, then two alternating rows: phone mockup on one side,
   copy + CTA on the other. Sits on the page ground, so the title pill's
   #f4fce2 fill is the same colour as the section behind it.
   ========================================================================== */

.v3-features {
	position: relative;
	padding: 56px 0;                     /* 56 top AND bottom — the section is
	                                        1533.99 tall in Figma */
	background: var(--v3-bg-page);
	overflow: hidden;
}

/* Title pill — node 8440:16211. bg is Bg/Primary/Basic, i.e. invisible
   against the section; kept for its padding/shape only. */
.v3-features__title {
	width: max-content;
	margin: 0 auto;
	padding: var(--v3-space-4) 39px;
	border-radius: 40px;
	background: var(--v3-bg-page);
	color: var(--v3-text-secondary);
	font-size: var(--v3-fs-h2);          /* 40px Bold */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
	text-align: center;
}

.v3-features__rows {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-5);              /* 24px — row2 sits at y=655.494 in a
	                                        631.494-tall row (8440:16215) */
	margin-top: 56px;
}

/* --- One row — node 8440:16216 --- */
.v3-feature {
	display: flex;
	align-items: center;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 100px;
	min-height: 631.494px;
}

/* Row 2 mirrors: phone on the right, copy on the left (node 8440:16226). */
.v3-feature--reverse { flex-direction: row-reverse; }

.v3-feature__body {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--v3-space-8);              /* 48px */
}

.v3-feature__copy {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 44px;
	width: 100%;
	text-align: right;
}

.v3-feature__heading {
	width: 100%;
	margin: 0;
	color: var(--v3-text-brand);         /* #dc6f38 */
	font-size: var(--v3-fs-h1);          /* 48px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
}

.v3-feature__text {
	width: 100%;
	margin: 0;
	color: var(--v3-text-primary);       /* #04372a */
	font-size: var(--v3-fs-h4);          /* 24px Medium */
	font-weight: var(--v3-fw-medium);
	line-height: 38px;                   /* Web/H4: Medium carries an explicit 38px */
}

/* Figma's export says justify-end, but that describes an RTL design rendered
   as LTR code: the button sits at the copy block's START edge (right, in RTL). */
.v3-feature__cta {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

.v3-feature__cta .v3-btn { width: 230px; }

/* --- Phone mockup ---
   A SINGLE flattened image per row: bezel, screen and the -11deg/+11deg tilt
   are all baked in, so the box is Figma's rotated wrapper (387.586 x 631.494)
   and CSS applies no transform. Replaces the old three-layer stack
   (bezel-a + bezel-b + screen) — see docs/v3-image-exports.md for the export
   spec these files follow. */
.v3-feature__phone {
	--phone-scale: 1;

	position: relative;
	flex: 0 0 auto;
	width: calc(387.586px * var(--phone-scale));
	height: calc(631.494px * var(--phone-scale));
}

.v3-feature__shot {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Decorative hand — nodes 8440:16213 / 8440:16214.
   Figma exports these image fills as fully TRANSPARENT PNGs (a recurring
   failure in this file — the footer mark did the same). Worked around by using
   the node's RENDERED png from get_screenshot, which comes back correct and
   with a transparent background.

   Anchored to the phone rather than the section: in Figma each hand sits at its
   own phone's top corner, so tying it to the mockup keeps the relationship
   intact at every breakpoint instead of needing separate coordinates per
   media query. Offsets are measured from the phone wrapper's top-left and
   scale with it. Sits BEHIND the phone, as in the design. */
.v3-feature__deco {
	position: absolute;
	z-index: 0;
	left: calc(var(--deco-x, 0px) * var(--phone-scale));
	top: calc(var(--deco-y, 0px) * var(--phone-scale));
	width: calc(155.489px * var(--phone-scale));
	height: calc(171.832px * var(--phone-scale));
	object-fit: contain;
	pointer-events: none;
}

.v3-feature__phone { --deco-x: -0.2px; --deco-y: -81px; }
.v3-feature--reverse .v3-feature__phone { --deco-x: 116.44px; --deco-y: -130.5px; }

/* --- RESPONSIVE — DERIVED --- */
@media (max-width: 1200px) {
	.v3-feature { padding: 0 40px; gap: var(--v3-space-5); }
	.v3-feature__heading { font-size: var(--v3-fs-h2); }   /* 40 */
	.v3-feature__copy { gap: var(--v3-space-6); }
}

@media (max-width: 900px) {
	.v3-features { padding-top: 40px; }
	.v3-features__title { font-size: var(--v3-fs-h3); padding: var(--v3-space-3) 24px; }
	.v3-features__rows { margin-top: 32px; }
	/* Stack: copy first, phone under it. */
	.v3-feature,
	.v3-feature--reverse {
		flex-direction: column;
		min-height: 0;
		padding: var(--v3-space-8) var(--v3-space-5);
		gap: var(--v3-space-6);
	}
	.v3-feature__body { align-items: stretch; gap: var(--v3-space-6); }

	/* Once the row stacks, the phone sits directly under the CTA and the hand —
	   which overhangs the phone by 81px — lands on top of the button. It is
	   purely decorative and there is no phone design to defer to, so it is
	   dropped rather than relocated. */
	.v3-feature__deco { display: none; }
	.v3-feature__copy { align-items: stretch; gap: var(--v3-space-5); text-align: center; }
	.v3-feature__heading { font-size: var(--v3-fs-h3); text-align: center; }   /* 32 */
	.v3-feature__text { font-size: var(--v3-fs-h5); line-height: 1.7; text-align: center; }
	.v3-feature__cta { justify-content: center; }

	/* Scale the mockup as a unit rather than re-laying it out. */
	.v3-feature__phone { --phone-scale: .7; }
}

@media (max-width: 600px) {
	.v3-feature { padding: var(--v3-space-7) var(--v3-space-4); }
	.v3-feature__heading { font-size: var(--v3-fs-h4); }   /* 24 */
	.v3-feature__text { font-size: var(--v3-fs-body); line-height: 1.8; }
	.v3-feature__cta .v3-btn { width: 100%; }
	.v3-feature__phone { --phone-scale: .5; }
}

/* ==========================================================================
   FAQ section — node 8440:16264 (1440 x 925)
   Title / three cards / "show more", on the page ground.
   ========================================================================== */

.v3-faqs {
	position: relative;
	padding: 80px 100px;
	background: var(--v3-bg-page);
	overflow: hidden;
}

.v3-faqs__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--v3-space-8);              /* 48px */
	max-width: 1240px;
	margin: 0 auto;
}

/* Two-tone title: the last word is brand orange (node 8440:16266) */
.v3-faqs__title {
	width: 100%;
	margin: 0;
	color: var(--v3-text-primary);       /* #04372a */
	font-size: var(--v3-fs-h2);          /* 40px Bold */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
	text-align: center;
}

.v3-faqs__title em { font-style: normal; color: var(--v3-text-brand); }

.v3-faqs__list {
	position: relative;                  /* anchors the decorative hand */
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-7);              /* 40px */
	width: 100%;
}

/* Decorative hand — node 8440:16272. Same broken-export workaround as the
   features section. Anchored to the LIST, whose top-left corner is the first
   question card, so it tracks that card at every width instead of being pinned
   to the section edge. Figma puts it at (67.94, 108.89) in the section, i.e.
   (-32.06, -66.11) from the first card. It cannot live inside .v3-faq itself —
   that card clips its overflow. */
.v3-faqs__deco {
	position: absolute;
	left: calc(-32.06px * var(--deco-scale, 1));
	top: calc(-66.11px * var(--deco-scale, 1));
	width: calc(155.846px * var(--deco-scale, 1));
	height: calc(172.269px * var(--deco-scale, 1));
	object-fit: contain;
	pointer-events: none;
	z-index: 2;
}

.v3-faqs__more { width: 353px; }

/* ==========================================================================
   Instagram — node 8440:16299 (1440 x 696)
   Heading + handle, then a full-bleed strip of 6 photo cards that deliberately
   overflows both edges. Made scrollable rather than clipped, so the off-screen
   cards stay reachable on narrow viewports.
   ========================================================================== */

.v3-ig {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 56px;
	padding: 80px 0;
	background: var(--v3-bg-page);
}

.v3-ig__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--v3-space-5);              /* 24px */
}

.v3-ig__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--v3-space-5);
}

.v3-ig__head img { display: block; width: 40px; height: 40px; }

.v3-ig__head h2 {
	margin: 0;
	color: var(--v3-neutral-950);        /* #0a0a0a */
	font-size: var(--v3-fs-h2);          /* 40px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
	white-space: nowrap;
}

.v3-ig__handle {
	margin: 0;
	color: var(--v3-text-brand);
	font-size: var(--v3-fs-body);        /* 16px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
	text-align: center;
}

.v3-ig__strip {
	display: flex;
	align-items: center;
	gap: var(--v3-space-5);              /* 24px */
	width: 100%;
	/* Matches the 1240 content column the other sections use, so the first card
	   starts on the same line as the FAQ/feature content at any width — while
	   the strip itself still overflows and scrolls. */
	padding-inline: max(24px, calc((100% - 1240px) / 2));
	overflow-x: auto;
	scrollbar-width: none;
	cursor: grab;
	scroll-behavior: smooth;
}

.v3-ig__strip.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	-webkit-user-select: none;   /* Safari, iOS Safari */
	user-select: none;
}

.v3-ig__strip.is-dragging img { pointer-events: none; }

.v3-ig__strip::-webkit-scrollbar { display: none; }

.v3-ig__card {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 282px;
	height: 390px;
	border-radius: var(--v3-space-2);    /* the design binds this to its "8" token */
	overflow: hidden;
}

.v3-ig__card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay + glyph. Node 8349:6973 (the "Default" variant) carries no overlay,
   so the first card opts out. */
.v3-ig__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .2) url("/img/v3/ig/badge.svg") no-repeat center / 56px 56px;
	pointer-events: none;
}

.v3-ig__card--plain::after { display: none; }

/* ==========================================================================
   Closing CTA — node 8728:8372 (1440 x 625)
   Copy on the right; a desktop screenshot and a landscape phone on the left,
   under an inverted wave that caps the section.
   ========================================================================== */

.v3-cta {
	/* THE ARTWORK IS MEASURED FROM THE COPY, not from the column's left edge,
	   and these two numbers are what make that possible.

	   The copy is a flex item at the column's START — the RIGHT, in RTL — so its
	   left edge is always (column right - its own width). The devices used to be
	   placed from the left with fixed offsets, which meant the two converged
	   every time the column narrowed: the gap held at 40.5 down to 1360, was
	   36.5 at 1300 and a 23.5 OVERLAP at 1240, and below 1200 it ran to -138.
	   That is the band the report came from, and why it only showed on some
	   screens.

	   Anchored to the copy instead, the gap is the same at every width. 56
	   rather than the 40.5 8728:8372 draws, for margin. */
	--cta-copy: 645px;
	--cta-art-gap: 56px;

	position: relative;
	padding: 80px 0 60px;
	background: var(--v3-bg-page);
	overflow: hidden;
}

/* The section used to pad itself by 100px, which pinned its copy to the
   viewport edge instead of the 1240 column every other section centres. */
.v3-cta__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;         /* copy hugs the start = right, in RTL */
	gap: var(--v3-space-7);              /* 40px */
	width: min(1240px, calc(100% - 48px));
	min-height: 555px;                   /* 485 + the 10% the devices grew */
	margin: 0 auto;
}

/* Ellipse 131 again, but 1998x159 and FLIPPED vertically, capping the section
   top (node 8728:8385). Masked so the fill stays a token. */
.v3-cta__wave {
	position: absolute;
	left: 50%;
	top: -31.72px;
	transform: translateX(-50%) scaleY(-1);
	width: 1998px;
	height: 159px;
	background: var(--v3-bg-page);
	-webkit-mask: url("/img/v3/cta/wave.svg") no-repeat center / 100% 100%;
	mask: url("/img/v3/cta/wave.svg") no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: 0;                          /* decorative: must stay behind the copy,
	                                        which it covered once the section
	                                        shortened on phones */
}

.v3-cta__copy {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;             /* right, in RTL */
	gap: var(--v3-space-8);              /* 48px */
	width: 645px;
}

.v3-cta__text {
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-5);              /* 24px */
	width: 100%;
	color: var(--v3-text-secondary);     /* #064e3b */
	text-align: right;
}

.v3-cta__text h2 {
	margin: 0;
	font-size: var(--v3-fs-h1);          /* 48px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
}

.v3-cta__text p {
	margin: 0;
	font-size: var(--v3-fs-h4);          /* 24px SemiBold */
	font-weight: var(--v3-fw-semibold);
	line-height: var(--v3-lh-auto);
}

.v3-cta .v3-btn { width: 353px; }

/* Desktop screenshot — node 8953:17130, 560x434 at (94.5, 79.01).
   Figma does NOT cover-fit it: the image is blown up to 130.94% x 135.45% and
   offset, i.e. a zoomed crop, so it needs a clipping wrapper. */
.v3-cta__shot {
	position: absolute;
	right: calc(var(--cta-copy) + var(--cta-art-gap));
	top: -0.99px;                        /* 79.01 - 80 padding */
	/* +10% (§2.6), and it grows AWAY FROM THE COPY, not toward it.

	   Scaling about the top-left added the whole 56 of new width on the side the
	   text is on, which is what closed the drawn gap. The phone below keeps its
	   distance from this element rather than its own offset from the column, so
	   the pair still holds the composition Figma drew. */
	z-index: 1;
	width: 616px;
	height: 477.4px;
	overflow: hidden;
}

.v3-cta__shot img {
	position: absolute;
	left: -15.73%;
	top: -17.64%;
	width: 130.94%;
	height: 135.45%;
	max-width: none;
}

/* Landscape phone — node 8728:8386. One flattened image; the -90deg rotation
   is baked in, so the box is the rotated wrapper 420.03 x 200.014. */
.v3-cta__phone {
	position: absolute;
	/* 235.4 to the right of the monitor's right edge — 789.9 against 554.5 at
	   the drawn positions — so the two move as one. */
	right: calc(var(--cta-copy) + var(--cta-art-gap) - 235.4px);
	top: 333.4px;                        /* (383.01 - 80) x 1.1 */
	z-index: 1;
	width: 462px;
	height: 220px;
}

.v3-cta__phone img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/* ==========================================================================
   RESPONSIVE — DERIVED (no Figma reference)
   ========================================================================== */

@media (max-width: 1200px) {
	.v3-faqs { padding: 64px 40px; }
	.v3-cta { padding: 64px 0 48px; }
	.v3-cta { --cta-copy: 520px; }
	.v3-cta__copy { width: 520px; }
	/* The artwork is absolutely positioned, so it contributes nothing to this
	   box and the box has to be told how tall it is. At 420 the phone already
	   ran 83px past the section and into the footer; at the enlarged size it is
	   133. 560 clears the phone’s foot (333.4 + 220) with a little air. */
	.v3-cta__inner { min-height: 560px; }

}

@media (max-width: 900px) {
	.v3-faqs { padding: 48px 24px; }
	.v3-faqs__inner { gap: var(--v3-space-6); }
	.v3-faqs__title { font-size: var(--v3-fs-h3); }
	.v3-faqs__list { gap: var(--v3-space-5); }
	.v3-faqs__deco { --deco-scale: .62; }
	.v3-faqs__more { width: 100%; max-width: 353px; }

	.v3-ig { gap: var(--v3-space-6); padding: 48px 0; }
	.v3-ig__head h2 { font-size: var(--v3-fs-h3); }
	.v3-ig__head img { width: 32px; height: 32px; }
	.v3-ig__strip { gap: var(--v3-space-4); }
	.v3-ig__card { width: 216px; height: 299px; }

	/* CTA stacks: copy first, artwork below it in flow. */
	.v3-cta { padding: 56px 0 40px; }
	.v3-cta__inner {
		flex-direction: column;
		align-items: center;
		min-height: 0;
		gap: var(--v3-space-6);
	}
	.v3-cta__copy { width: 100%; align-items: center; }
	.v3-cta__text { text-align: center; }
	.v3-cta__text h2 { font-size: var(--v3-fs-h3); }
	.v3-cta__text p { font-size: var(--v3-fs-h5); line-height: 1.7; }
	.v3-cta__wave { width: 220%; }

	/* The absolute artwork has nowhere to sit once the copy is full width. */
	.v3-cta__shot {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		width: 100%;
		max-width: 560px;
		height: 434px;
	}
	.v3-cta__phone { display: none; }
}

@media (max-width: 600px) {
	.v3-faqs__title { font-size: var(--v3-fs-h4); }
	.v3-faqs__deco { display: none; }
	.v3-ig__head h2 { font-size: var(--v3-fs-h4); }
	.v3-ig__card { width: 170px; height: 235px; }
	.v3-cta__text h2 { font-size: var(--v3-fs-h4); }
	.v3-cta__text p { font-size: var(--v3-fs-body); }
	.v3-cta .v3-btn, .v3-faqs__more { width: 100%; }
}