/* ==========================================================================
   Submarine Max Pro — landing page
   Two independent Figma canvases (desktop 1728x15162, mobile 440x11658).
   Coordinates below are taken verbatim from Figma; nothing here is eyeballed.
   ========================================================================== */

/* ---------- Fonts (the exact families used in the design) ---------- */
@font-face {
	font-family: 'Gveret Levin';
	src: url('../fonts/GveretLevinAlefAlefAlef-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Tel Aviv Brutalist';
	src: url('../fonts/TelAviv-BrutalistRegular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Tel Aviv Brutalist';
	src: url('../fonts/TelAviv-BrutalistBold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Tel Aviv Brutalist';
	src: url('../fonts/TelAviv-BrutalistLight.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Tel Aviv Modernist';
	src: url('../fonts/TelAviv-ModernistRegular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Tel Aviv Modernist';
	src: url('../fonts/TelAviv-ModernistBold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Stage / canvas ---------------------------------------------
   The canvas is rendered at its intrinsic Figma size and scaled to the
   viewport. transform-origin is top-left because Figma coordinates are
   measured from the left edge even in an RTL design.
   --------------------------------------------------------------------- */
.sl-root {
	background: #fff;
	overflow-x: hidden;
	width: 100%;
}

.sl-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* Height is set by JS to designH * scale, since a transform does not
	   contribute to layout. */
}

/* The canvas is anchored explicitly rather than left in flow: it is wider than
   its stage, and in an RTL context an over-wide box overflows to the LEFT, which
   would push the whole design off-screen. Its own direction is LTR because Figma
   coordinates are measured from the left edge in every design, RTL included —
   the text nodes carry their own dir="rtl". */
.sl-canvas {
	position: absolute;
	left: 0;
	top: 0;
	direction: ltr;
	transform-origin: top left;
	background: #fff;
	/* Set by JS: transform: scale(n), and left, to centre it once the scale caps. */
}

/* Past the scale cap the canvas is narrower than the window, which would leave a
   white strip down each side wherever a section is not white. Only the full-bleed
   background bands need to cover them — everything between those bands is white in
   the design already — so those bands are widened by exactly the shortfall.
   --sl-bleed-x is 1 until the cap bites, which makes this rule a no-op below it. */
/* Scoped to .sl-stage purely for specificity: a bare .sl-bleed--c ties with the
   band's own .m-band-top rule, which is declared later in this file and therefore
   won its transform back — the two centred bands then sat inside the canvas and
   left a white strip down each side of the page at every width past the cap. */
.sl-stage .sl-bleed { transform: scaleX( var( --sl-bleed-x, 1 ) ); }
/* Bands that already carry a transform have to keep it; scaleX alone would drop
   the centring translate and shove the band half its width to the right. */
.sl-stage .sl-bleed--c { transform: translateX( -50% ) scaleX( var( --sl-bleed-x, 1 ) ); }

/* Only elements with NOTHING inside them may be tagged .sl-bleed. scaleX on a
   box that holds copy stretches the copy with it — tagging the hero <section>
   was the first attempt and it drew the headline 1.7x too wide on a tablet.
   The hero therefore gets two empty stand-ins behind it instead. The bar's
   second gradient layer is the seam fix: the first layer repaints the real
   1728/440px ramp over the middle, and the half-and-half underneath extends the
   ramp's own end colour into each gutter, so the join is invisible. */
.d-hero-bleed,
.m-hero-bleed,
.d-hero-bleed-bar,
.m-hero-bleed-bar {
	position: absolute;
	top: 0;
	/* Widened, never scaled — see the comment above. */
	transform: none;
	left: calc( 0px - var( --sl-bleed, 0px ) );
}
/* The hero photo is anchored to the LEFT of the canvas and cannot be widened
   (it is masked, and the section clips it), so the left gutter meets the photo
   rather than the section colour. Sampled down the photo's own left edge it runs
   #2A2828…#301D1E…#291B1B, so the gutter carries #2c2122 instead of the flat
   #212121 and the join stops reading as an edge. The right gutter meets the flat
   colour and keeps it. */
.d-hero-bleed {
	height: 1182px;
	background: linear-gradient( to right,
		#2c2122 0, #2c2122 var( --sl-bleed, 0px ), #212121 var( --sl-bleed, 0px ) );
}
.m-hero-bleed { height: 956px;  background: #000; }
.d-hero-bleed,
.d-hero-bleed-bar { width: calc( 1728px + 2 * var( --sl-bleed, 0px ) ); }
.m-hero-bleed,
.m-hero-bleed-bar { width: calc( 440px + 2 * var( --sl-bleed, 0px ) ); }
.d-hero-bleed-bar,
.m-hero-bleed-bar {
	background-repeat: no-repeat, repeat;
	background-position: var( --sl-bleed, 0px ) 0, 0 0;
	background-image:
		linear-gradient( to right, #786452, #cec5bc ),
		linear-gradient( to right, #786452 50%, #cec5bc 50% );
}
.d-hero-bleed-bar { height: 87px; background-size: 1728px 100%, auto; }
.m-hero-bleed-bar { height: 62px; background-size: 440px 100%, auto; }

.sl-stage--mobile { display: none; }

@media (max-width: 900px) {
	.sl-stage--desktop { display: none; }
	.sl-stage--mobile  { display: block; }
}

/* Editor preview forces a single canvas regardless of viewport. */
.sl-root--force-desktop .sl-stage--desktop { display: block !important; }
.sl-root--force-desktop .sl-stage--mobile  { display: none !important; }
.sl-root--force-mobile  .sl-stage--mobile  { display: block !important; }
.sl-root--force-mobile  .sl-stage--desktop { display: none !important; }

/* ---------- Canvas reset -----------------------------------------------
   Every position in this file is an absolute Figma coordinate, so the browser's
   default margins must go: a <p> carries margin-block 1em and an <h1> 0.67em,
   which pushes each text node down by exactly its own font size and silently
   breaks every measurement. border-box keeps a bordered element (the glass pill)
   at its Figma width instead of growing by the border.
   --------------------------------------------------------------------- */
.sl-canvas *,
.sl-canvas *::before,
.sl-canvas *::after {
	box-sizing: border-box;
}

.sl-canvas p,
.sl-canvas h1,
.sl-canvas h2,
.sl-canvas h3,
.sl-canvas h4,
.sl-canvas h5,
.sl-canvas h6,
.sl-canvas ul,
.sl-canvas ol,
.sl-canvas li,
.sl-canvas figure,
.sl-canvas blockquote {
	margin: 0;
	padding: 0;
	/* NB: do not neutralise font-weight here. A element+class selector outranks the
	   single-class rules below, so anything set in this block wins over the
	   per-node values taken from Figma. Weights are declared per element. */
}

/* Typographic baseline. These are set on the canvas itself (inherited, and easy
   for the per-node rules to override) purely to stop the active theme's own
   typography from leaking in — a stray letter-spacing changes where every line
   wraps, which is exactly the kind of drift this file exists to prevent. */
.sl-canvas {
	letter-spacing: normal;
	word-spacing: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	text-indent: 0;
	font-kerning: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.sl-canvas * {
	letter-spacing: inherit;
	word-spacing: inherit;
}

/* ---------- Primitives used by the templates ---------- */
.sl-abs { position: absolute; }

.sl-canvas img { display: block; max-width: none; }

/* Text nodes: Figma centres text inside a fixed-width box. */
.sl-txt {
	position: absolute;
	margin: 0;
	padding: 0;
	text-align: center;
	white-space: pre-wrap;
	word-break: break-word;
}

/* ==========================================================================
   DESKTOP — 1728 x 15162
   ========================================================================== */

/* --- Section 1: Hero (Figma 75:3, 1728x1182) --- */
/* The root frame is white; the hero is a dark block sitting on it (Figma 75:3). */
.d-hero {
	position: absolute;
	inset: 0 auto auto 0;
	width: 1728px;
	height: 1182px;
	background: #212121;
	overflow: hidden;
}

/* Top bar (75:18) */
.d-hero__topbar {
	position: absolute;
	left: 0;
	top: 0;
	width: 1728px;
	height: 87px;
	background: linear-gradient(to right, #786452, #cec5bc);
	border-radius: 0;
}

/* Top bar text (75:16) — Gveret Levin 30px */
.d-hero__topbar-text {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 0.5px));
	top: 22px;
	width: 1591px;
	height: 65px;
	/* Figma sets Gveret Levin here — a script face — and Tel Aviv Modernist on the
	   mobile bar. Client asked for the two bars to match on the Modernist. */
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 30px;
	/* The leading-[0] trap, still here on the desktop after being fixed on the
	   mobile. Figma puts leading-[0] on node 75:16 and leading-[normal] on the
	   child <p>; dividing the 65px frame by its 2 line boxes gives 32.5, which
	   is not what the design says. `normal` is what centres the line optically in
	   the 87px bar — at 32.5 the text sat 6px high, with 22px of air above and
	   33px below. */
	line-height: normal;
	color: #fff;
	text-align: center;
}

/* Masked background photo (82:93 / 75:8) */
.d-hero__photo-clip {
	position: absolute;
	left: 0;
	top: 65px;
	width: 796px;
	height: 1117px;
	overflow: hidden;
}
.d-hero__photo-mask {
	position: absolute;
	left: 0;
	top: 22px;
	width: 726px;
	height: 1089px;
	-webkit-mask-image: var(--sl-hero-mask);
	mask-image: var(--sl-hero-mask);
	-webkit-mask-position: -13px 0;
	mask-position: -13px 0;
	-webkit-mask-size: 682px 1023px;
	mask-size: 682px 1023px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	mask-mode: alpha;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
.d-hero__photo-mask img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.d-hero__photo-scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
}

/* Decorative glows (75:90 / 82:91) — exported SVGs carry their own blur */
.d-hero__glow-right {
	position: absolute;
	left: 1200px;
	top: 714px;
	width: 328px;
	height: 344px;
}
.d-hero__glow-right img {
	position: absolute;
	inset: -290.7% -304.88%;
	width: auto;
	height: auto;
}
.d-hero__glow-left {
	position: absolute;
	left: 33px;
	top: 495px;
	width: 229px;
	height: 228px;
}
.d-hero__glow-left img {
	position: absolute;
	inset: -219.3% -218.34%;
	width: auto;
	height: auto;
}

/* Headline (75:19) — gradient-filled text */
.d-hero__headline {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 0.5px));
	top: 142px;
	width: 795px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 35px;
	/* 86px box / 2 lines. */
	line-height: 43px;
	text-align: center;
	background-image: linear-gradient(to right, #9f6739, #cec5bc 48.558%, #786452);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Sub-headline (75:20) */
.d-hero__sub {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 195px;
	width: 892px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 35px;
	/* 129px box / 3 lines (the first is Figma's empty leading line). */
	line-height: 43px;
	color: #fff;
	text-align: center;
}

/* Product badge plate (75:27) — rotated -2deg */
.d-hero__badge-plate {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% + 0.51px));
	top: 343.94px;
	width: 513.468px;
	height: 68.837px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.d-hero__badge-plate > span {
	display: block;
	width: 512px;
	height: 51px;
	border-radius: 10px;
	transform: rotate(-2deg);
	background: linear-gradient(to right, #9f6739, #cec5bc 48.558%, #786452);
}

/* Product badge text (75:25) */
.d-hero__badge-text {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% + 0.01px));
	top: 343px;
	width: 796.016px;
	height: 70.719px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.d-hero__badge-text > span {
	display: block;
	width: 795px;
	transform: rotate(-2deg);
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 35px;
	line-height: normal;
	color: #fff;
	text-align: center;
}

/* Tagline (75:28) */
.d-hero__tagline {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 1.49px));
	top: 426.86px;
	width: 674px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 28px;
	/* 105px box / 3 lines. */
	line-height: 35px;
	color: #fff;
	text-align: center;
}

/* Device shot (75:30) */
.d-hero__device {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 0.99px));
	/* The replacement shot adds a sixth label and reframes the device: it draws
	   the machine 4% larger inside its canvas and is 0.853 wide-to-tall, not
	   square. Left in a 363px square with `cover` it cropped the top and bottom
	   labels clean off. Sized instead so the DEVICE ITSELF lands at the width it
	   had before (the red seat measures 298px either way), and placed so the
	   bottom label clears the glass pill exactly as it used to. */
	top: 508.3px;
	width: 347.8px;
	height: 384.7px;
}
.d-hero__device img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

/* Glass pill (75:31) */
.d-hero__pill {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 7.99px));
	top: 828.86px;
	width: 595px;
	height: 64px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	border-right: 1px solid #9f6739;
	border-left: 1px solid #9f6739;
	border-bottom: 3px solid #9f6739;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
}

/* Glass pill text (75:33) */
.d-hero__pill-text {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 6px));
	top: 840px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 25px;
	line-height: normal;
	color: #fff;
	text-align: center;
	white-space: nowrap;
}

/* Body copy (75:35) */
.d-hero__body {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 0.49px));
	top: 911.86px;
	width: 636px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 25px;
	/* 124px box / 4 lines. */
	line-height: 31px;
	color: #fff;
	text-align: center;
}

/* ==========================================================================
   Forms (shared shell; each instance is positioned by its section rule)
   ========================================================================== */
.sl-form { margin: 0; }

.sl-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.sl-form-error {
	color: #ff383c;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-size: 16px;
	margin: 0 0 8px;
	text-align: center;
}

.sl-field input {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: transparent;
	border: 0;
	outline: 0;
	font-family: 'Tel Aviv Modernist', sans-serif;
	color: #fff;
	text-align: center;
}
.sl-field input::placeholder { color: rgba(255, 255, 255, 0.85); opacity: 1; }

.sl-field button {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 0;
	cursor: pointer;
	font-family: 'Tel Aviv Modernist', sans-serif;
	color: #fff;
	background: transparent;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.sl-canvas *,
	.sl-canvas *::before,
	.sl-canvas *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* --- Section 2: FDA band + video + CTA ring (Figma 94:2 … 94:18) --- */

/* Gradient band behind the video (94:2). The SVG carries its own blur/falloff. */
.d-band-top {
	position: absolute;
	left: -1.07px;
	top: 1025px;
	width: 1728.857px;
	height: 838.642px;
}
.d-band-top img {
	position: absolute;
	inset: -0.35% -1.74% -2.77% -1.74%;
	width: auto;
	height: auto;
}

/* Video plate (94:5) */
.d-video {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 0.5px));
	top: 1157px;
	width: 827px;
	height: 466px;
	border-radius: 31px;
	background: #383838;
	overflow: hidden;
}

/* Play button circle (94:6) */
.d-video__play-circle {
	position: absolute;
	left: 800px;
	top: 1311px;
	width: 127px;
	height: 128px;
}
.d-video__play-circle img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Play triangle (94:7) — Figma rotates it 90deg inside a 69x72 box. */
.d-video__play-tri {
	position: absolute;
	left: 829px;
	top: 1339px;
	width: 69px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.d-video__play-tri > span {
	flex: none;
	position: relative;
	display: block;
	width: 72px;
	height: 69px;
	transform: rotate(90deg);
}
.d-video__play-tri img {
	position: absolute;
	top: 0;
	bottom: 25%;
	left: 6.7%;
	right: 6.7%;
	width: auto;
	height: auto;
}

/* FDA approval copy (94:11) */
.d-fda {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 6px));
	top: 1634px;
	width: 674px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 28px;
	/* 105px box / 3 lines. */
	line-height: 35px;
	color: #fff;
	text-align: center;
}

/* CTA rings (94:15 outer, 94:16 inner) */
.d-cta-ring-outer {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 1706px;
	width: 250px;
	height: 250px;
}
.d-cta-ring-inner {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 0.5px));
	top: 1716px;
	width: 229px;
	height: 229px;
}
.d-cta-ring-outer img,
.d-cta-ring-inner img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* CTA label (94:17) */
.d-cta-label {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 1772px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 23px;
	/* 58px box / 2 lines. */
	line-height: 29px;
	color: #fff;
	text-align: center;
	white-space: pre;
}

/* Arrow icon inside the CTA ring (94:18) */
.d-cta-arrow {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% + 0.69px));
	top: 1854px;
	width: 68.736px;
	height: 68.736px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.d-cta-arrow > span {
	flex: none;
	position: relative;
	display: block;
	width: 48.606px;
	height: 48.606px;
	transform: rotate(-135.52deg);
}
.d-cta-arrow img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- Section 3: "אז מה זה בעצם הצוללת?" (94:25, 94:27, 94:29) --- */

/* Section heading with a black→grey→black gradient fill (94:25) */
.d-what-title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 2049px;
	width: 662px;
	height: 42px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: normal;
	text-align: center;
	background-image: linear-gradient(to right, #000, #6b6b6b 48.558%, #000);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Product line (94:27) — Brutalist Light on the white background */
.d-what-lead {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 2122px;
	width: 636px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 300;
	font-size: 35px;
	/* 172px box / 4 lines. */
	line-height: 43px;
	color: #000;
	text-align: center;
}

/* Body copy (94:29) */
.d-what-body {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 0.5px));
	top: 2224px;
	width: 963px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 28px;
	/* 245px box / 7 rendered lines. */
	line-height: 35px;
	color: #000;
	text-align: center;
}

/* --- Shared: frosted-glass plate (used by the hero pill and every label pill) --- */
.d-glass {
	position: absolute;
	height: 64px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	border-right: 1px solid #9f6739;
	border-left: 1px solid #9f6739;
	border-bottom: 3px solid #9f6739;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
}

/* Label sitting on a glass plate — Modernist 25px, never wraps. */
.d-glass-label {
	position: absolute;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 31px;
	color: #000;
	text-align: center;
	white-space: nowrap;
}

/* --- Section 4: mechanism (94:37, 94:26, glass pills, 94:43) --- */

/* "הצוללת עובדת על ידי מנגנון חכם" (94:37) */
.d-mech-title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 2553px;
	width: 798px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 50px;
	text-align: center;
	background-image: linear-gradient(to right, #000, #6b6b6b 48.558%, #000);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Mechanism photo (94:26) — Figma crops it inside a shorter frame. */
.d-mech-photo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 2727px;
	width: 778px;
	height: 594px;
	overflow: hidden;
	pointer-events: none;
}
.d-mech-photo img {
	position: absolute;
	left: 0;
	top: -18.35%;
	width: 100%;
	height: 130.98%;
}

/* The five callout plates (94:40, 94:31, 94:38, 94:35, 94:33) */
.d-mech-p1 { left: calc(50% - 319.5px); transform: translateX(-50%); top: 2723px; width: 313px; }
.d-mech-p2 { left: calc(50% + 292.5px); transform: translateX(-50%); top: 2748px; width: 313px; }
.d-mech-p3 { left: calc(50% - 436.5px); transform: translateX(-50%); top: 2960px; width: 313px; }
.d-mech-p4 { left: calc(50% + 392px);   transform: translateX(-50%); top: 3043px; width: 328px; }
.d-mech-p5 { left: calc(50% - 204.5px); transform: translateX(-50%); top: 3185px; width: 361px; }

/* Their labels (94:41, 94:32, 94:39, 94:36, 94:34) */
.d-mech-l1 { left: calc(50% - 315.51px); transform: translateX(-50%); top: 2740.14px; }
.d-mech-l2 { left: calc(50% + 296.99px); transform: translateX(-50%); top: 2765.14px; }
.d-mech-l3 { left: calc(50% - 432.51px); transform: translateX(-50%); top: 2977.14px; }
.d-mech-l4 { left: calc(50% + 388.49px); transform: translateX(-50%); top: 3060.14px; }
.d-mech-l5 { left: calc(50% - 202.01px); transform: translateX(-50%); top: 3202.14px; }

/* "וכל זה קורה כי…" (94:43) */
.d-mech-outro {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 3349px;
	width: 636px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 300;
	font-size: 35px;
	line-height: 43px;
	color: #000;
	text-align: center;
}

/* --- Section 5: "סוגי הטיפולים" (94:44, 94:45) --- */

/* Oversized watermark headline with a near-transparent gradient fill (94:44) */
.d-treat-watermark {
	position: absolute;
	left: calc(50% - 23px);
	transform: translateX(-50%);
	top: 3510px;
	width: 1264px;
	height: 148px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 700;
	font-size: 150px;
	line-height: 148px;
	text-align: center;
	background-image: linear-gradient(0.5280471061576861deg, rgba(228, 228, 228, 0.25) 11.748%, rgba(126, 126, 126, 0.5) 79.715%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	white-space: nowrap;
}

/* Sub-headline over the watermark (94:45) */
.d-treat-sub {
	position: absolute;
	left: calc(50% - 22.5px);
	transform: translateX(-50%);
	top: 3606px;
	width: 993px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 700;
	font-size: 60px;
	line-height: 74px;
	color: var(--sl-title-accent-2, #786452);
	text-align: center;
}

/* --- Section 7: "טכנולוגיה אחת / 5 אורכי גל / 7 סוגי טיפולים" (103:99) --- */
.d-onetech {
	position: absolute;
	left: calc(50% - 0.5px);
	transform: translateX(-50%);
	top: 4508px;
	width: 993px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 700;
	font-size: 60px;
	line-height: 74px;
	color: var(--sl-title-accent, #9f6739);
	text-align: center;
}

/* --- Section 6: six wavelength cards (94:49 … 94:82) ------------------------
   Two columns of three. Titles and bodies are right-anchored (translateX(-100%)
   off a calc'd left edge) exactly as Figma emits them for this RTL block.
   --------------------------------------------------------------------------- */
.d-wave-card {
	position: absolute;
	width: 750px;
	height: 170px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
}
.d-wave-card--l { left: 89px; }
.d-wave-card--r { left: 892px; }
.d-wave-card--row1 { top: 3804px; }
.d-wave-card--row2 { top: 4010px; }
.d-wave-card--row3 { top: 4216px; }

/* Glow ring behind the dot; the SVG carries the blur, hence the big negative inset. */
.d-wave-glow { position: absolute; width: 42px; height: 42px; }
.d-wave-glow img { position: absolute; inset: -95.24%; width: auto; height: auto; }
.d-wave-dot  { position: absolute; width: 42px; height: 42px; }
.d-wave-dot img { position: absolute; inset: 0; width: 100%; height: 100%; }

.d-wave-glow--l { left: 756px; }
.d-wave-glow--r { left: 1559px; }
.d-wave-dot--l  { left: 756px; }
.d-wave-dot--r  { left: 1559px; }
.d-wave-glow--row1 { top: 3859px; }
.d-wave-glow--row2 { top: 4065px; }
.d-wave-glow--row3 { top: 4271px; }
.d-wave-dot--row1  { top: 3858px; }
.d-wave-dot--row2  { top: 4064px; }
.d-wave-dot--row3  { top: 4270px; }

.d-wave-title {
	position: absolute;
	transform: translateX(-100%);
	width: 184px;
	height: 36px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	text-align: right;
	background-image: linear-gradient(to right, #000, #6b6b6b 48.558%, #000);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.d-wave-title--wide { width: 292px; }

.d-wave-body {
	position: absolute;
	transform: translateX(-100%);
	width: 636px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 31px;
	color: #000;
	text-align: right;
}
.d-wave-body--narrow { width: 593px; }

/* Right-hand anchor for each column. */
.d-wave-title--l, .d-wave-body--l { left: calc(50% - 144px); }
.d-wave-title--r, .d-wave-body--r { left: calc(50% + 659px); }

.d-wave-title--row1 { top: 3843px; }
.d-wave-title--row2 { top: 4049px; }
.d-wave-title--row3 { top: 4255px; }
.d-wave-body--row1  { top: 3885px; }
.d-wave-body--row2  { top: 4091px; }
.d-wave-body--row3  { top: 4297px; }

/* Section 7 body copy (103:100) */
.d-onetech-body {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 4718px;
	width: 712px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 31px;
	color: #000;
	text-align: center;
}

/* --- Section 8: audience band + lead form 1 (103:91 … 105:112) --- */

.d-aud-photo {
	position: absolute;
	left: -207px;
	top: 4900px;
	width: 1342px;
	height: 784px;
	overflow: hidden;
	pointer-events: none;
}
/* The replacement shot is the hood unit alone — a wide, squat object where the
   old one was a tall chair. The old rule stretched the image to 114.17% of the
   box to make the chair fill it; applied to this shape that is pure distortion.
   Sized instead to the width the chair occupied on the page (822 desktop /
   376 mobile) and centred in the band, so the section keeps its weight. */
.d-aud-photo img {
	position: absolute;
	left: 260px;
	top: 73.5px;
	width: 822px;
	height: 637px;
}

/* Figma has this band at left 3 / width 1728, i.e. 3px short of the canvas on the
   left and 3px past it on the right. The right side is covered either way; the
   left one showed as a white hairline down the page edge at every width. Same
   right edge, left edge closed. */
.d-aud-band {
	position: absolute;
	left: 0;
	top: 5079px;
	width: 1731px;
	height: 605px;
}
.d-aud-band img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Right-anchored headings on the band (103:92, 103:93, 103:94) */
.d-aud-title,
.d-aud-done {
	position: absolute;
	left: calc(50% + 801px);
	transform: translateX(-100%);
	width: 662px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 50px;
	text-align: right;
	background-image: linear-gradient(to right, #000, #6b6b6b 48.558%, #000);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.d-aud-title { top: 5179px; }
.d-aud-done  { top: 5328px; }

.d-aud-list {
	position: absolute;
	left: calc(50% + 801px);
	transform: translateX(-100%);
	top: 5235px;
	width: 588px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 31px;
	color: #000;
	text-align: right;
}

/* Four logo placeholders (103:95 … 103:98) */
.d-aud-logo {
	position: absolute;
	top: 5447px;
	width: 121px;
	height: 103px;
	/* Figma drew these tiles #d9d9d9 with square corners. Client asked for white
	   and rounded — the logos themselves are on white, so a grey plate put a box
	   around every one of them. Padding keeps a logo off the rounded corner. */
	background: #fff;
	border-radius: 14px;
	padding: 8px;
	overflow: hidden;
}
.d-aud-logo img { width: 100%; height: 100%; object-fit: contain; }
.d-aud-logo--1 { left: 1565px; }
.d-aud-logo--2 { left: 1402px; }
.d-aud-logo--3 { left: 1218px; }
.d-aud-logo--4 { left: 1034px; }

/* --- Lead form, instance 1 (103:101 … 105:111) ------------------------------
   The form element itself is left unpositioned so its fields resolve against the
   canvas and can carry their literal Figma coordinates.
   --------------------------------------------------------------------------- */
.d-form-panel {
	position: absolute;
	left: calc(50% - 0.5px);
	transform: translateX(-50%);
	width: 1005px;
	height: 470px;
	border-radius: 28px;
	background: rgba(120, 100, 82, 0.33);
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
}
.d-form-panel--1 { top: 5599px; }

/* Form heading (182:15) */
.d-form-heading {
	position: absolute;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: normal;
	text-align: center;
	width: 385px;
}
.d-form-heading--1 {
	left: calc(50% + 2.5px);
	transform: translateX(-50%);
	top: 5640px;
	color: var(--sl-title-dark, #000);
}

/* Field shells */
.sl-form .sl-field { position: absolute; }
.sl-form .sl-field input,
.sl-form .sl-field button {
	border-radius: 9px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 23px;
	line-height: normal;
	color: #000;
	text-align: right;
	backdrop-filter: blur(150px);
	-webkit-backdrop-filter: blur(150px);
	background: #e9e9e9;
}
.sl-form .sl-field input::placeholder { color: #000; opacity: 1; }
.sl-form .sl-field--submit button {
	text-align: center;
	background: linear-gradient(to right, #9f6739, #cec5bc 48.558%, #786452);
	cursor: pointer;
}

/* Instance 1 field geometry (103:103, 103:105, 103:104, 103:110) */
.sl-form--1 .sl-field--name   { left: 851px; top: 5734px; width: 354px; height: 78px; }
.sl-form--1 .sl-field--phone  { left: 475px; top: 5734px; width: 340px; height: 78px; }
.sl-form--1 .sl-field--years  { left: 475px; top: 5831px; width: 730px; height: 78px; }
.sl-form--1 .sl-field--submit { left: 479px; top: 5943px; width: 730px; height: 63px; }

/* The placeholder sits where Figma's label sits: pad by the gap between the
   field's right edge and the label's right edge. */
.sl-form--1 .sl-field--name  input { padding-right: 25px; }
.sl-form--1 .sl-field--phone input { padding-right: 23px; }
.sl-form--1 .sl-field--years input { padding-right: 25px; }

/* --- Section 9 heading (105:112) --- */
.d-diff-title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 6156px;
	width: 1314px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 50px;
	line-height: 62px;
	color: var(--sl-title-dark, #000);
	text-align: center;
}

/* Hero-area form heading (182:13) */
.d-video-heading {
	position: absolute;
	left: calc(50% - 0.5px);
	transform: translateX(-50%);
	top: 1073px;
	width: 385px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: normal;
	color: var(--sl-title-light, #fff);
	text-align: center;
}

/* --- Section 9: seven differentiator rows (105:113 … 105:157) --- */
.d-diff-row {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 938px;
	height: 79px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
}
.d-diff-text {
	position: absolute;
	transform: translateX(-100%);
	width: 871px;
	height: 30px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 30px;
	color: #000;
	text-align: right;
}

/* Row geometry, straight from each node's own left/top. */
.d-diff-row--1 { top: 6363px; margin-left: -0.5px; }
.d-diff-row--2 { top: 6492px; }
.d-diff-row--3 { top: 6643px; }
.d-diff-row--4 { top: 6794px; }
.d-diff-row--5 { top: 6946px; }
.d-diff-row--6 { top: 7097px; margin-left: -1.5px; }
.d-diff-row--7 { top: 7249px; margin-left: -0.5px; }

.d-diff-text--1 { top: 6385px; left: calc(50% + 423px); }
.d-diff-text--2 { top: 6504px; left: calc(50% + 424px); }
.d-diff-text--3 { top: 6667px; left: calc(50% + 424px); }
.d-diff-text--4 { top: 6817px; left: calc(50% + 424px); }
.d-diff-text--5 { top: 6967px; left: calc(50% + 424px); }
.d-diff-text--6 { top: 7117px; left: calc(50% + 422px); }
.d-diff-text--7 { top: 7269px; left: calc(50% + 423px); }

/* Vertical divider running down the row stack (105:125) */
.d-diff-divider {
	position: absolute;
	left: calc(50% - 1px);
	transform: translateX(-50%);
	top: 6385px;
	width: 0;
	height: 919px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.d-diff-divider > span {
	flex: none;
	position: relative;
	display: block;
	width: 919px;
	height: 0;
	transform: rotate(90deg);
}
.d-diff-divider img {
	position: absolute;
	top: -7.36px;
	bottom: -7.36px;
	left: -0.11%;
	right: -0.11%;
	width: auto;
	height: auto;
}

/* --- Section 10: video still (106:160) --- */
.d-still {
	position: absolute;
	left: 396px;
	top: 7456px;
	width: 937px;
	height: 570px;
	overflow: hidden;
	border-radius: 0;
}
.d-still img { width: 100%; height: 100%; object-fit: cover; }

/* --- Section 11: "מי עומד מאחורי הטכנולוגיה" + lead form 2 (106:163 … 106:177) --- */
.d-about-band {
	position: absolute;
	left: 0;
	top: 8172px;
	width: 1744px;
	height: 727px;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0.61) 100%),
		linear-gradient(90deg, #9f6739 0%, #cec5bc 48.558%, #786452 100%);
}
.d-about-photo {
	position: absolute;
	left: calc(50% + 30px);
	transform: translateX(-50%);
	top: 8219px;
	width: 500px;
	height: 457px;
}
.d-about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.d-about-title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 8239px;
	width: 1314px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 50px;
	line-height: normal;
	color: var(--sl-title-dark, #000);
	text-align: center;
}
.d-about-body {
	position: absolute;
	left: calc(50% + 0.5px);
	transform: translateX(-50%);
	top: 8355px;
	width: 1091px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 35px;
	color: #000;
	text-align: center;
}

.d-form-panel--2 { top: 8571px; }
.d-form-heading--2 {
	left: calc(50% + 0.5px);
	transform: translateX(-50%);
	top: 8609px;
	color: var(--sl-title-light, #fff);
}
.sl-form--2 .sl-field--name   { left: 860px; top: 8706px; width: 354px; height: 78px; }
.sl-form--2 .sl-field--phone  { left: 484px; top: 8706px; width: 340px; height: 78px; }
.sl-form--2 .sl-field--years  { left: 484px; top: 8803px; width: 730px; height: 78px; }
.sl-form--2 .sl-field--submit { left: 488px; top: 8915px; width: 730px; height: 63px; }
.sl-form--2 .sl-field--name  input { padding-right: 25px; }
.sl-form--2 .sl-field--phone input { padding-right: 23px; }
.sl-form--2 .sl-field--years input { padding-right: 25px; }
/* Figma centres the button label 11px right of the button's own centre. */
.sl-form--2 .sl-field--submit button { padding-left: 22px; }

/* --- Section 16/17: bottom band, closing CTA + lead form 3 (112:227 … 112:242) --- */
.d-band-bottom {
	position: absolute;
	left: -0.82px;
	top: 13448px;
	width: 1774.999px;
	height: 1377.658px;
}
.d-band-bottom img {
	position: absolute;
	inset: -1.45% -1.69% -2.36% -1.69%;
	width: auto;
	height: auto;
}

.d-final-lead {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 14290px;
	width: 886px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 35px;
	color: #fff;
	text-align: center;
}
.d-final-title {
	position: absolute;
	left: calc(50% - 0.5px);
	transform: translateX(-50%);
	top: 14393px;
	width: 1039px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 50px;
	color: var(--sl-title-light, #fff);
	text-align: center;
}

.d-form-panel--3 { top: 14592px; height: 411px; }
/* Figma gives this third panel no heading at all (112:234 holds only the four
   fields), so it reserves 76px above them where panels 1 and 2 reserve 135px.
   The site does carry a heading here, and at the shared 385px width it wrapped
   to two lines and ran 38px into the name and phone fields. One line at 700px
   fits the 76px Figma left, and the panel geometry stays untouched. */
.d-form-heading--3 {
	left: calc(50% + 0.5px);
	transform: translateX(-50%);
	top: 14611px;
	width: 700px;
	color: var(--sl-title-light, #fff);
}
.sl-form--3 .sl-field--name   { left: 873px; top: 14668px; width: 354px; height: 78px; }
.sl-form--3 .sl-field--phone  { left: 497px; top: 14668px; width: 340px; height: 78px; }
.sl-form--3 .sl-field--years  { left: 497px; top: 14765px; width: 730px; height: 78px; }
.sl-form--3 .sl-field--submit { left: 501px; top: 14877px; width: 730px; height: 63px; }
.sl-form--3 .sl-field--name  input { padding-right: 25px; }
.sl-form--3 .sl-field--phone input { padding-right: 23px; }
.sl-form--3 .sl-field--years input { padding-right: 25px; }
.sl-form--3 .sl-field--submit button { padding-left: 22px; }

/* --- Section 12: client photo wall (108:179 … 108:184) --- */
.d-wall-title {
	position: absolute;
	left: calc(50% + 1.5px);
	transform: translateX(-50%);
	top: 9176px;
	width: 993px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 35px;
	line-height: normal;
	color: var(--sl-title-dark, #000);
	text-align: center;
}
/* The five cards Figma pins at 59 / 391 / 723 / 1056 / 1389 — a 252px card on a
   332px pitch — are now driven by the shared carousel further down this file.
   Their geometry is preserved there as the card size and the 80px gap. */

/* --- Section 13: long testimonial (108:185 … 108:194) --- */
.d-story-plate { position: absolute; left: 0; top: 10022px; width: 1728px; height: 1450px; background: #191919; }
.d-story-bg    { position: absolute; left: -597px; top: 9991px; width: 2141px; height: 1619px; }
/* Figma puts `opacity-30` on this image — it is a backdrop behind the letter,
   not a portrait. Never transcribed, so the photo was competing with the copy
   laid over it. Same omission as the pricing watermark. */
.d-story-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.d-story-title {
	position: absolute;
	left: calc(50% + 748px);
	transform: translateX(-100%);
	top: 10186px;
	width: 1314px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 50px;
	line-height: 62px;
	color: var( --sl-title-accent, #9f6739 );
	text-align: right;
}
.d-story-body {
	position: absolute;
	left: calc(50% + 748px);
	transform: translateX(-100%);
	top: 10287px;
	width: 801px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	/* The leading-[0] trap once more. Node 108:187 carries leading-[0]; every
	   child <p> carries leading-[35px]. 31 came from somewhere else and packed
	   the letter tighter than it is drawn. */
	font-size: 25px;
	line-height: 35px;
	color: #fff;
	text-align: right;
}
.d-story-ring  { position: absolute; left: calc(50% - 0.5px); transform: translateX(-50%); top: 11357px; width: 229px; height: 229px; }
.d-story-ring img { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-story-label {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 11413px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 23px;
	line-height: 29px;
	color: #fff;
	text-align: center;
	white-space: pre;
}
.d-story-arrow { top: 11495px; }

/* --- Section 14: four benefit cards + photo (112:198 … 75:10) --- */
.d-ben-kicker,
.d-ben-title {
	position: absolute;
	right: 52px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	color: var(--sl-title-dark, #000);
	text-align: right;
	font-size: 40px;
	line-height: 50px;
}
.d-ben-kicker { top: 11733px; width: 1314px; font-weight: 300; }
.d-ben-title  { top: 11807px; width: 814px;  font-weight: 700; }

.d-ben-photo { position: absolute; left: 1068px; top: 11931px; width: 576px; height: 864px; overflow: hidden; }
.d-ben-photo img { width: 100%; height: 100%; object-fit: cover; }

.d-ben-card {
	position: absolute;
	transform: translateX(-50%);
	width: 725px;
	border-radius: 8px;
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.48) 100%),
		linear-gradient(90deg, #9f6739 0%, #cec5bc 48.558%, #786452 100%);
}
.d-ben-card--1 { left: calc(50% - 340.5px); top: 11930px; height: 150px; }
.d-ben-card--2 { left: calc(50% - 275.5px); top: 12161px; height: 183px; }
.d-ben-card--3 { left: calc(50% - 338.5px); top: 12408px; height: 183px; }
.d-ben-card--4 { left: calc(50% - 275.5px); top: 12651px; height: 150px; }

.d-ben-h {
	position: absolute;
	transform: translateX(-100%);
	width: 801px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 35px;
	color: #000;
	text-align: right;
}
.d-ben-p {
	position: absolute;
	transform: translateX(-100%);
	width: 675px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 35px;
	color: #000;
	text-align: right;
}
.d-ben-h--1 { left: calc(50% - 2px);  top: 11956px; }
.d-ben-h--2 { left: calc(50% + 61px); top: 12187px; }
.d-ben-h--3 { left: calc(50% - 2px);  top: 12428px; }
.d-ben-h--4 { left: calc(50% + 61px); top: 12677px; }
.d-ben-p--1 { left: calc(50% - 2px);  top: 11991px; }
.d-ben-p--2 { left: calc(50% + 61px); top: 12222px; }
.d-ben-p--3 { left: calc(50% - 1px);  top: 12467px; width: 689px; }
.d-ben-p--4 { left: calc(50% + 61px); top: 12712px; }

/* --- Section 15: WhatsApp screenshots (112:219 … 112:226) --- */
.d-wa-title {
	position: absolute;
	left: calc(50% - 0.5px);
	transform: translateX(-50%);
	top: 12947px;
	width: 565px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 50px;
	color: var(--sl-title-dark, #000);
	text-align: center;
}
/* The five before/after shots Figma pins at 81 / 337 / 685 / 1132 / 1383 — heights
   194-199, widths 199 / 291 / 390 / 194 / 291, a consistent 57px apart. Each box
   matches its own photo's aspect (1:1, 3:2, 2:1, 1:1, 3:2). They are driven by the
   shared carousel further down this file, which keeps that rule: a fixed-height
   slot with the image at its natural width inside it. */

/* --- Section 16: pricing copy (106:162, 112:228 … 112:231) --- */
/* The watermark is a backdrop, not a picture — at full strength the white
   laurel competed with the copy sitting on top of it. 20%. The mobile carried
   0.3 from the frame; both are on the same value now so the section reads the
   same on either canvas. */
.d-price-logo { position: absolute; left: -1132px; top: 13433px; width: 1650px; height: 1729px; opacity: 0.2; }
.d-price-logo img { width: 100%; height: 100%; object-fit: contain; }
.d-price-title {
	position: absolute;
	left: calc(50% - 0.5px);
	transform: translateX(-50%);
	top: 13528px;
	width: 993px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 700;
	font-size: 60px;
	line-height: normal;
	color: var(--sl-title-dark, #000);
	text-align: center;
}
.d-price-lead,
.d-price-list {
	position: absolute;
	left: calc(50% - 0.5px);
	transform: translateX(-50%);
	width: 801px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 35px;
	color: #000;
	text-align: center;
}
.d-price-lead { top: 13632px; }
.d-price-list { top: 13769px; }

/* ==========================================================================
   MOBILE — 440 x 11658 (Figma node 133:465)
   A different layout, not a scaled desktop: its own coordinates throughout.
   ========================================================================== */

/* Hero block (133:466) — note this one is pure black, unlike the desktop's #212121. */
.m-hero {
	position: absolute;
	left: 0;
	top: 0;
	width: 440px;
	height: 956px;
	background: #000;
	overflow: hidden;
}
.m-hero__topbar {
	position: absolute;
	left: 0;
	top: 0;
	width: 440px;
	height: 62px;
	background: linear-gradient(to right, #786452, #cec5bc);
}
.m-hero__topbar-text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 8px;
	width: 362px;
	height: 65px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 18px;
	/* 65px node / 3 line boxes. Figma sets leading-[normal] here, and the node
	   holds three boxes, not two: the copy wraps onto two lines and node 133:468
	   ends with an empty <p>. Dividing the height by the two VISIBLE lines gave
	   32.5px, which inflated the block to ~97px and pushed the second line out
	   of the 62px bar and onto the black below it. */
	line-height: 21.667px;
	color: #000;
	text-align: center;
}
/* Background photo — mobile drops the desktop's mask and just scrims it. */
.m-hero__photo {
	position: absolute;
	left: -166px;
	top: 73px;
	width: 726px;
	height: 1089px;
	pointer-events: none;
}
.m-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-hero__photo-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); }

.m-hero__headline {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 101px;
	width: 428px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 25px;
	text-align: center;
	background-image: linear-gradient(to right, #9f6739, #cec5bc 48.558%, #786452);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.m-hero__sub {
	position: absolute;
	left: calc(50% + 12px);
	transform: translateX(-50%);
	top: 162px;
	width: 366px;
	height: 50px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 25px;
	color: #fff;
	text-align: center;
}
.m-hero__badge-plate {
	position: absolute;
	left: calc(50% + 12.4px);
	transform: translateX(-50%);
	top: 209.82px;
	width: 285.054px;
	height: 60.861px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.m-hero__badge-plate > span {
	display: block;
	width: 283.446px;
	height: 51px;
	border-radius: 10px;
	transform: rotate(-2deg);
	background: linear-gradient(to right, #9f6739, #cec5bc 48.558%, #786452);
}
.m-hero__badge-text {
	position: absolute;
	left: calc(50% + 10.69px);
	transform: translateX(-50%);
	top: 212px;
	width: 795.388px;
	height: 52.73px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.m-hero__badge-text > span {
	display: block;
	width: 795px;
	transform: rotate(-2deg);
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: normal;
	color: #fff;
	text-align: center;
}
.m-hero__device {
	position: absolute;
	left: calc(50% - 0.5px);
	transform: translateX(-50%);
	top: 290.1px;
	width: 244.3px;
	height: 270.2px;           /* same reframing as .d-hero__device */
}
.m-hero__device img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

/* Glass pill + copy below the hero block (133:475 … 133:477) */
.m-pill {
	position: absolute;
	left: calc(50% - 0.5px);
	transform: translateX(-50%);
	top: 514px;
	width: 405px;
	height: 53px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	border-right: 1px solid #9f6739;
	border-left: 1px solid #9f6739;
	border-bottom: 3px solid #9f6739;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
}
.m-pill-text {
	position: absolute;
	left: calc(50% + 0.5px);
	transform: translateX(-50%);
	top: 525px;
	width: 373px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 21px;
	color: #fff;
	text-align: center;
}
.m-hero-body {
	position: absolute;
	left: calc(50% - 1.5px);
	transform: translateX(-50%);
	top: 591px;
	width: 377px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 21px;
	color: #fff;
	text-align: center;
}

/* Section 2 — band, video, FDA, CTA ring (133:478 … 133:312) */
.m-band-top {
	position: absolute;
	/* Centred exactly rather than on Figma sub-pixel offset: scaleX grows this
	   band about its OWN centre, so 3.24px off-centre left a 1px white hairline
	   down one page edge once the bleed kicked in. */
	left: 50%;
	transform: translateX(-50%);
	top: 675px;
	width: 445.436px;
	height: 579.084px;
}
.m-band-top img {
	position: absolute;
	inset: 6.63% -6.73% 3.1% -6.73%;
	width: auto;
	height: auto;
}
.m-video {
	position: absolute;
	left: calc(50% + 0.5px);
	transform: translateX(-50%);
	top: 819px;
	width: 375px;
	height: 220px;
	border-radius: 31px;
	background: #383838;
	overflow: hidden;
}
.m-video-heading {
	position: absolute;
	left: calc(50% - 3.5px);
	transform: translateX(-50%);
	top: 752px;
	width: 267px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: normal;
	color: var(--sl-title-light, #fff);
	text-align: center;
}
.m-video__play-circle { position: absolute; left: 194px; top: 899px; width: 51px; height: 50px; }
.m-video__play-circle img { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-video__play-tri {
	position: absolute;
	/* 206, not 233. Figma node 133:308 is left-[206px] w-[27px]; 233 is that
	   node's RIGHT edge, so the mark sat a full 27px right of the ring it
	   belongs in — ring centre 219.5, triangle centre 246.5. */
	left: 206px;
	top: 910px;
	width: 27px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.m-video__play-tri > span { flex: none; position: relative; display: block; width: 28px; height: 27px; transform: rotate(90deg); }
/* Figma insets the mark by 6.7% each side and 25% off the bottom. Expressed as
   width/height rather than left+right+top+bottom with width:auto — the auto
   form did not resolve against the rotated parent and the image rendered at
   its natural 51x62 instead of the 24x20 the frame allows. */
.m-video__play-tri img { position: absolute; left: 6.7%; top: 0; width: 86.6%; height: 75%; }

.m-fda {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 1071px;
	width: 674px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 21px;
	color: #fff;
	text-align: center;
}
.m-cta-ring-outer { position: absolute; left: 50%; transform: translateX(-50%); top: 1148px; width: 102px; height: 102px; }
.m-cta-ring-inner { position: absolute; left: 50%; transform: translateX(-50%); top: 1152px; width: 94px; height: 94px; }
.m-cta-ring-outer img, .m-cta-ring-inner img { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-cta-label {
	position: absolute;
	left: calc(50% + 0.5px);
	transform: translateX(-50%);
	top: 1179px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 10px;
	line-height: 12px;
	color: #fff;
	text-align: center;
	white-space: pre;
}
/* Rotated node: these values come from Figma's own CSS, not from get_metadata,
   which reports a different origin for anything with a rotation. */
.m-cta-arrow {
	position: absolute;
	left: calc(50% + 0.25px);
	transform: translateX(-50%);
	top: 1199px;
	width: 40.493px;
	height: 40.493px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.m-cta-arrow > span { flex: none; position: relative; display: block; width: 28.63px; height: 28.63px; transform: rotate(-135.52deg); }
.m-cta-arrow img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ==========================================================================
   QA fixes
   ========================================================================== */

/* A <form> here is an unpositioned box at the canvas origin (its fields carry the
   real coordinates), so anything rendered in normal flow inside it — the error
   message — landed on top of the hero. Pin each message above its own panel. */
.sl-form-error {
	position: absolute;
	width: 1005px;
	margin: 0;
	padding: 8px 0;
	border-radius: 8px;
	background: rgba(255, 56, 60, 0.12);
	color: #ff383c;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	text-align: center;
}
.sl-stage--desktop .sl-form-error {
	left: calc(50% - 0.5px);
	transform: translateX(-50%);
}
.sl-stage--desktop .sl-form-error--1 { top: 5554px; }
.sl-stage--desktop .sl-form-error--2 { top: 8526px; }
.sl-stage--desktop .sl-form-error--3 { top: 14547px; }

.sl-stage--mobile .sl-form-error {
	left: 50%;
	transform: translateX(-50%);
	width: 403px;
	font-size: 15px;
	line-height: 20px;
}

/* Invalid field feedback */
.sl-field input.sl-invalid {
	outline: 2px solid #ff383c;
	outline-offset: -2px;
}

/* Click targets over the round CTAs — kept as a transparent overlay so the
   composition of ring + label + arrow is untouched. */
.d-cta-hit,
.m-cta-hit {
	position: absolute;
	display: block;
	border-radius: 50%;
	z-index: 3;
	cursor: pointer;
}
.d-cta-hit--1 { left: 739px;   top: 1706px;  width: 250px; height: 250px; }
.d-cta-hit--2 { left: 749.5px; top: 11357px; width: 229px; height: 229px; }
.m-cta-hit--1 { left: 169px;   top: 1148px;  width: 102px; height: 102px; }

/* Video facade: the whole plate is the button, and the play mark rides above it. */
.d-video, .m-video { cursor: pointer; }
.d-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-video iframe, .m-video iframe,
.d-video video,  .m-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
}
.d-video__play-circle, .d-video__play-tri,
.m-video__play-circle, .m-video__play-tri { pointer-events: none; z-index: 2; }
/* Sibling combinator, not descendant. Figma composes the ring and the mark as
   their own canvas nodes, so they sit NEXT TO the plate rather than inside it —
   the descendant form matched nothing and the play button stayed on top of the
   running video. They are printed after the plate, so `~` reaches them. */
.d-video.sl-video-playing ~ .d-video__play-circle,
.d-video.sl-video-playing ~ .d-video__play-tri,
.m-video.sl-video-playing ~ .m-video__play-circle,
.m-video.sl-video-playing ~ .m-video__play-tri { display: none; }

/* --- Mobile sections 3-7 (133:299 … 133:372) --- */
.m-what-title { position:absolute; left:calc(50% - 6px); transform:translateX(-50%); top:1285px; width:662px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:21px; line-height:26px; text-align:center;
  background-image:linear-gradient(to right,#000,#6b6b6b 48.558%,#000); -webkit-background-clip:text; background-clip:text; color:transparent; }
.m-what-lead { position:absolute; left:calc(50% - 2px); transform:translateX(-50%); top:1311px; width:636px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:300; font-size:17px; line-height:21px; color:#000; text-align:center; }
.m-what-body { position:absolute; left:calc(50% + 0.5px); transform:translateX(-50%); top:1372px; width:379px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:400; font-size:17px; line-height:21px; color:#000; text-align:center; }

.m-mech-title { position:absolute; left:50%; transform:translateX(-50%); top:1599px; width:404px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:21px; line-height:25px; text-align:center;
  background-image:linear-gradient(to right,#000,#6b6b6b 48.558%,#000); -webkit-background-clip:text; background-clip:text; color:transparent; }
.m-mech-photo { position:absolute; left:50%; transform:translateX(-50%); top:1691px; width:382px; height:292px; overflow:hidden; pointer-events:none; }
.m-mech-photo img { position:absolute; left:0; top:-18.35%; width:100%; height:130.98%; }
.m-glass { position:absolute; transform:translateX(-50%); border-radius:8px; background:rgba(255,255,255,0.1);
  backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px);
  border-right:1px solid #9f6739; border-left:1px solid #9f6739; border-bottom:3px solid #9f6739;
  box-shadow:0 10px 30px 0 rgba(0,0,0,0.25); }
.m-glass--strong { background:rgba(255,255,255,0.2); }
.m-mech-p1 { left:calc(50% - 103px);   top:1691px; width:184px; height:31px; }
.m-mech-p2 { left:calc(50% + 99px);    top:1747px; width:174px; height:32px; }
.m-mech-p3 { left:calc(50% - 138px);   top:1802px; width:144px; height:32px; }
.m-mech-p4 { left:calc(50% + 120px);   top:1843px; width:186px; height:32px; }
.m-mech-p5 { left:calc(50% - 73.5px);  top:1914px; width:211px; height:33px; }
.m-glass-label { position:absolute; transform:translateX(-50%); font-family:'Tel Aviv Modernist',sans-serif;
  font-weight:400; font-size:14px; line-height:17px; color:#000; text-align:center; white-space:nowrap; }
.m-mech-l1 { left:124px; top:1699px; }
.m-mech-l2 { left:calc(50% + 100px); top:1754px; width:172px; white-space:normal; }
.m-mech-l3 { left:86px;  top:1810px; }
.m-mech-l4 { left:calc(50% + 120px); top:1851px; }
.m-mech-l5 { left:calc(50% - 73px);  top:1921px; }
.m-mech-outro { position:absolute; left:50%; transform:translateX(-50%); top:1992px; width:636px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:300; font-size:20px; line-height:25px; color:#000; text-align:center; }

.m-treat-watermark { position:absolute; left:50%; transform:translateX(-50%); top:2063px; width:1264px; height:41px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:700; font-size:41px; line-height:41px; text-align:center; white-space:nowrap;
  background-image:linear-gradient(0.5280471061576861deg, rgba(228,228,228,0.25) 11.748%, rgba(126,126,126,0.5) 79.715%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.m-treat-sub { position:absolute; left:50%; transform:translateX(-50%); top:2091px; width:350px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:700; font-size:20px; line-height:25px; color: var(--sl-title-accent-2, #786452); text-align:center; }

.m-wave-card { position:absolute; left:19px; width:397px; border-radius:8px; background:rgba(255,255,255,0.1);
  backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px); box-shadow:0 10px 30px 0 rgba(0,0,0,0.25); }
.m-wave-card--1 { top:2162px; height:103px; }
.m-wave-card--2 { top:2289px; height:85px; }
.m-wave-card--3 { top:2398px; height:129px; }
.m-wave-card--4 { top:2551px; height:108px; left:18px; }
.m-wave-card--5 { top:2683px; height:139px; left:18px; }
.m-wave-card--6 { top:2846px; height:129px; }
.m-wave-glow, .m-wave-dot { position:absolute; width:30px; height:30px; }
.m-wave-glow img { position:absolute; inset:-95.24%; width:auto; height:auto; }
.m-wave-dot img  { position:absolute; inset:0; width:100%; height:100%; }
.m-wave-glow--1 { left:351px; top:2196px; } .m-wave-dot--1 { left:351px; top:2195px; }
.m-wave-glow--2 { left:352px; top:2316px; } .m-wave-dot--2 { left:352px; top:2315px; }
.m-wave-glow--3 { left:351px; top:2446px; } .m-wave-dot--3 { left:351px; top:2445px; }
.m-wave-glow--4 { left:348px; top:2597px; } .m-wave-dot--4 { left:348px; top:2596px; }
.m-wave-glow--5 { left:349px; top:2733px; } .m-wave-dot--5 { left:349px; top:2732px; }
.m-wave-glow--6 { left:350px; top:2895px; } .m-wave-dot--6 { left:350px; top:2894px; }
.m-wave-title { position:absolute; transform:translateX(-100%); width:184px; height:36px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:20px; line-height:24px; text-align:right;
  background-image:linear-gradient(to right,#000,#6b6b6b 48.558%,#000); -webkit-background-clip:text; background-clip:text; color:transparent; }
.m-wave-title--1 { left:calc(50% + 82px); top:2184px; }
.m-wave-title--2 { left:calc(50% + 83px); top:2305px; }
.m-wave-title--3 { left:calc(50% + 82px); top:2417px; }
.m-wave-title--4 { left:calc(50% + 79px); top:2571px; }
.m-wave-title--5 { left:calc(50% + 82px); top:2703px; }
.m-wave-title--6 { left:calc(50% + 81px); top:2873px; width:292px; }
.m-wave-body { position:absolute; transform:translateX(-100%); font-family:'Tel Aviv Modernist',sans-serif;
  font-weight:400; font-size:17px; line-height:21px; color:#000; text-align:right; }
.m-wave-body--1 { left:calc(50% + 82px); top:2215px; width:636px; }
.m-wave-body--2 { left:calc(50% + 83px); top:2335px; width:636px; }
.m-wave-body--3 { left:calc(50% + 83px); top:2448px; width:278px; }
.m-wave-body--4 { left:calc(50% + 79px); top:2597px; width:254px; }
.m-wave-body--5 { left:calc(50% + 80px); top:2737px; width:253px; }
.m-wave-body--6 { left:calc(50% + 81px); top:2900px; width:260px; }

.m-onetech { position:absolute; left:calc(50% + 0.5px); transform:translateX(-50%); top:3019px; width:993px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:700; font-size:20px; line-height:24px; color: var(--sl-title-accent, #9f6739); text-align:center; }
.m-onetech-body { position:absolute; left:50%; transform:translateX(-50%); top:3107px; width:360px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:400; font-size:17px; line-height:21px; color:#000; text-align:center; }

/* --- Mobile sections 8-17 (133:362 … 148:522) --- */
.m-aud-band { position:absolute; left:-276px; top:3235px; width:716px; height:688px; }
.m-aud-band img { position:absolute; inset:0; width:100%; height:100%; }
.m-aud-title, .m-aud-done { position:absolute; left:calc(50% + 193px); transform:translateX(-100%);
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; text-align:right;
  background-image:linear-gradient(to right,#000,#6b6b6b 48.558%,#000); -webkit-background-clip:text; background-clip:text; color:transparent; }
.m-aud-title { top:3279px; width:662px; font-size:22px; line-height:27px; }
.m-aud-done  { top:3395px; width:206px; font-size:20px; line-height:27px; }
.m-aud-list { position:absolute; left:calc(50% + 193px); transform:translateX(-100%); top:3325px; width:350px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:400; font-size:17px; line-height:21px; color:#000; text-align:right; }
.m-aud-logo { position:absolute; top:3434px; width:66px; height:70px; background:#fff;
  border-radius:9px; padding:5px; overflow:hidden; }   /* see .d-aud-logo */
.m-aud-logo img { width:100%; height:100%; object-fit:contain; }
.m-aud-logo--1 { left:347px; } .m-aud-logo--2 { left:258px; } .m-aud-logo--3 { left:158px; } .m-aud-logo--4 { left:58px; }
.m-aud-photo { position:absolute; left:-77px; top:3555px; width:614px; height:358px; overflow:hidden; pointer-events:none; }
.m-aud-photo img { position:absolute; left:118.7px; top:33.5px; width:375.8px; height:291px; }

.m-form-panel { position:absolute; transform:translateX(-50%); width:403px; height:422px; border-radius:28px;
  background:rgba(120,100,82,0.33); backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px);
  box-shadow:0 10px 30px 0 rgba(0,0,0,0.25); }
.m-form-panel--1 { left:calc(50% + 1.5px); top:3865px; }
.m-form-panel--2 { left:calc(50% + 1.5px); top:6006px; }
.m-form-panel--3 { left:calc(50% - 3.5px); top:11186px; }
.m-form-heading { position:absolute; transform:translateX(-50%); width:267px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:19px; line-height:24px; text-align:center; }
.m-form-heading--1 { left:calc(50% + 9.5px); top:3889px; color: var(--sl-title-light, #fff); }
.m-form-heading--2 { left:calc(50% + 0.5px); top:6025px; color: var(--sl-title-light, #fff); }
.m-form-heading--3 { left:calc(50% - 0.5px); top:11204px; color: var(--sl-title-light, #fff); }

.sl-stage--mobile .sl-form .sl-field input,
.sl-stage--mobile .sl-form .sl-field button { font-size:14px; }
.sl-form--m1 .sl-field--name   { left:50px; top:3948px; width:343px; height:59px; }
.sl-form--m1 .sl-field--phone  { left:50px; top:4025px; width:343px; height:59px; }
.sl-form--m1 .sl-field--years  { left:50px; top:4102px; width:343px; height:59px; }
.sl-form--m1 .sl-field--submit { left:51px; top:4188px; width:342px; height:49px; }
.sl-form--m2 .sl-field--name   { left:50px; top:6089px; width:343px; height:59px; }
.sl-form--m2 .sl-field--phone  { left:50px; top:6166px; width:343px; height:59px; }
.sl-form--m2 .sl-field--years  { left:50px; top:6243px; width:343px; height:59px; }
.sl-form--m2 .sl-field--submit { left:51px; top:6329px; width:342px; height:49px; }
.sl-form--m3 .sl-field--name   { left:45px; top:11269px; width:343px; height:59px; }
.sl-form--m3 .sl-field--phone  { left:45px; top:11346px; width:343px; height:59px; }
.sl-form--m3 .sl-field--years  { left:45px; top:11423px; width:343px; height:59px; }
.sl-form--m3 .sl-field--submit { left:46px; top:11509px; width:342px; height:49px; }
.sl-stage--mobile .sl-field--name input,
.sl-stage--mobile .sl-field--phone input,
.sl-stage--mobile .sl-field--years input { padding-right: 24px; }
.sl-stage--mobile .sl-form-error--m1 { top:3820px; }
.sl-stage--mobile .sl-form-error--m2 { top:5961px; }
.sl-stage--mobile .sl-form-error--m3 { top:11141px; }

.m-diff-title { position:absolute; left:calc(50% - 3.5px); transform:translateX(-50%); top:4342px; width:485px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:19px; line-height:24px; color: var(--sl-title-dark, #000); text-align:center; }
.m-diff-row { position:absolute; transform:translateX(-50%); border-radius:8px; background:rgba(255,255,255,0.1);
  backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px); box-shadow:0 10px 30px 0 rgba(0,0,0,0.25); }
.m-diff-row--1 { left:calc(50% + 4px);   top:4408px; width:390px; height:77px; }
.m-diff-row--2 { left:calc(50% + 3.5px); top:4509px; width:389px; height:90px; }
.m-diff-row--3 { left:calc(50% + 4.5px); top:4623px; width:389px; height:93px; }
.m-diff-row--4 { left:calc(50% + 3.5px); top:4740px; width:389px; height:91px; }
.m-diff-row--5 { left:calc(50% + 4.5px); top:4855px; width:389px; height:93px; }
.m-diff-row--6 { left:calc(50% + 4.5px); top:4972px; width:389px; height:93px; }
.m-diff-row--7 { left:calc(50% + 4px);   top:5089px; width:390px; height:78px; }
.m-diff-text { position:absolute; transform:translateX(-100%); font-family:'Tel Aviv Modernist',sans-serif;
  font-weight:400; font-size:17px; line-height:21px; color:#000; text-align:right; }
.m-diff-text--1 { left:calc(50% + 165px); top:4426px; width:303px; }
.m-diff-text--2 { left:calc(50% + 164px); top:4523px; width:302px; }
.m-diff-text--3 { left:calc(50% + 165px); top:4643px; width:302px; }
.m-diff-text--4 { left:calc(50% + 164px); top:4758px; width:302px; }
.m-diff-text--5 { left:calc(50% + 165px); top:4872px; width:302px; }
.m-diff-text--6 { left:calc(50% + 165px); top:4988px; width:302px; }
.m-diff-text--7 { left:calc(50% + 165px); top:5114px; width:365px; }

.m-still { position:absolute; left:40px; top:5302px; width:356px; height:216px; overflow:hidden; }
.m-still img { width:100%; height:100%; object-fit:cover; }
.m-still-heading { position:absolute; left:50%; transform:translateX(-50%); top:5222px; width:267px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:19px; line-height:24px; color: var(--sl-title-dark, #000); text-align:center; }

.m-about-band { position:absolute; left:-685px; top:5545px; width:1744px; height:504px;
  background-image:linear-gradient(90deg, rgba(255,255,255,0.61) 0%, rgba(255,255,255,0.61) 100%),
                   linear-gradient(90deg, #9f6739 0%, #cec5bc 48.558%, #786452 100%); }
.m-about-photo { position:absolute; left:calc(50% - 11px); transform:translateX(-50%); top:5592px; width:500px; height:457px; }
.m-about-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
/* 133:409. Three values were wrong here: the centre (Figma anchors this at
   calc(50% - 11px), matching the photo below it, not at 50% — the heading sat
   11px right of the image it titles), the size (20px, not 19), and the leading
   (Figma says leading-[normal], which is ~24px at 20px, not 25). Width is the
   contained form of Figma's 1314px box; the centre is what positions the text. */
.m-about-title { position:absolute; left:calc(50% - 11px); transform:translateX(-50%); top:5579px; width:300px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:20px; line-height:24px; color: var(--sl-title-dark, #000); text-align:center; }
/* 133:408. The child <p> carries leading-[35px]; 21px came from the container's
   leading-[0]. Fourteen pixels a line too tight over the whole paragraph. */
.m-about-body { position:absolute; left:calc(50% + 0.5px); transform:translateX(-50%); top:5616px; width:377px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:400; font-size:17px; line-height:35px; color:#000; text-align:center; }

.m-wall-title { position:absolute; left:50%; transform:translateX(-50%); top:6463px; width:267px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:19px; line-height:24px; color: var(--sl-title-dark, #000); text-align:center; }

.m-story-plate { position:absolute; left:-4px; top:6749px; width:446px; height:1822px; background:#191919; }
.m-story-bg { position:absolute; left:-188px; top:8033px; width:747px; height:565px; }
.m-story-bg img { width:100%; height:100%; object-fit:cover; }
.m-story-title { position:absolute; left:50%; transform:translateX(-50%); top:6791px; width:267px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:19px; line-height:24px; color: var( --sl-title-accent, #9f6739 ); text-align:center; }
/* 35px, not 21. Node 133:439 carries leading-[0] and its children carry
   leading-[35px] — the same value the desktop letter uses, even though the type
   is 17px here rather than 25. That wide leading is what the section is drawn
   around: at 21 the letter ended 477px above the photo and left a black void,
   at 35 it runs to 8046 and the photo starts at 8033. */
.m-story-body { position:absolute; left:calc(50% + 193px); transform:translateX(-100%); top:6821px; width:391px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:400; font-size:17px; line-height:35px; color:#fff; text-align:right; }
.m-story-ring-outer { position:absolute; left:calc(50% - 2px); transform:translateX(-50%); top:8520px; width:102px; height:102px; }
.m-story-ring-inner { position:absolute; left:calc(50% - 2px); transform:translateX(-50%); top:8524px; width:94px; height:94px; }
.m-story-ring-outer img, .m-story-ring-inner img { position:absolute; inset:0; width:100%; height:100%; }
.m-story-label { position:absolute; left:calc(50% - 1.5px); transform:translateX(-50%); top:8551px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:10px; line-height:12px; color:#fff; text-align:center; white-space:pre; }
.m-story-arrow { left:calc(50% - 2.18px); top:8571px; }
.m-story-hit { position:absolute; left:167px; top:8520px; width:102px; height:102px; border-radius:50%; display:block; z-index:3; }

.m-ben-kicker { position:absolute; right:37px; top:8642px; width:1314px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:300; font-size:17px; line-height:21px; color: var(--sl-title-dark, #000); text-align:right; }
.m-ben-title { position:absolute; right:37px; top:8678px; width:447px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:17px; line-height:21px; color: var(--sl-title-dark, #000); text-align:right; }
.m-ben-card { position:absolute; transform:translateX(-50%); border-radius:8px;
  backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px); box-shadow:0 10px 30px 0 rgba(0,0,0,0.25);
  background-image:linear-gradient(90deg, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.48) 100%),
                   linear-gradient(90deg, #9f6739 0%, #cec5bc 48.558%, #786452 100%); }
.m-ben-card--1 { left:calc(50% - 11.5px); top:8746px; width:383px; height:150px; }
.m-ben-card--2 { left:calc(50% + 8px);    top:8927px; width:384px; height:163px; }
.m-ben-card--3 { left:calc(50% - 11.5px); top:9122px; width:383px; height:183px; }
.m-ben-card--4 { left:calc(50% + 8px);    top:9337px; width:384px; height:150px; }
.m-ben-h { position:absolute; transform:translateX(-100%); width:801px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:18px; line-height:22px; color:#000; text-align:right; }
.m-ben-p { position:absolute; transform:translateX(-100%); font-family:'Tel Aviv Modernist',sans-serif;
  font-weight:400; font-size:18px; line-height:27px; color:#000; text-align:right; }
.m-ben-h--1 { left:calc(50% + 156px); top:8762px; } .m-ben-p--1 { left:calc(50% + 156px); top:8797px; width:340px; }
.m-ben-h--2 { left:calc(50% + 174px); top:8952px; } .m-ben-p--2 { left:calc(50% + 174px); top:8986px; width:320px; }
.m-ben-h--3 { left:calc(50% + 155px); top:9142px; } .m-ben-p--3 { left:calc(50% + 155px); top:9181px; width:339px; }
.m-ben-h--4 { left:calc(50% + 174px); top:9363px; } .m-ben-p--4 { left:calc(50% + 174px); top:9398px; width:328px; }
.m-ben-photo { position:absolute; left:calc(50% - 1.5px); transform:translateX(-50%); top:9547px; width:309px; height:464px; border-radius:20px; overflow:hidden; }
.m-ben-photo img { width:100%; height:100%; object-fit:cover; }

.m-wa-title { position:absolute; left:calc(50% - 2.5px); transform:translateX(-50%); top:10066px; width:565px; height:50px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:20px; line-height:25px; color: var(--sl-title-dark, #000); text-align:center; }
.m-wa-shot { position:absolute; border-radius:15px; overflow:hidden; }
.m-wa-shot img { width:100%; height:100%; object-fit:cover; }
.m-wa-shot--1 { left:-765px; top:10053px; width:169px; height:169px; }
.m-wa-shot--2 { left:-547px; top:10055px; width:247px; height:165px; }
.m-wa-shot--3 { left:-254px; top:10146px; width:332px; height:165px; }
.m-wa-shot--4 { left:126px;  top:10146px; width:165px; height:165px; }
.m-wa-shot--5 { left:340px;  top:10146px; width:247px; height:165px; }

.m-band-bottom { position:absolute; left:50%; transform:translateX(-50%); /* centred: see .m-band-top */ top:10341px; width:441.068px; height:1055.901px; }
/* THE WHITE STRIP DOWN THE LEFT OF THE CLOSING SECTION.
   Every band SVG carries 30px of transparent padding around its artwork for the
   drop shadow: m-band-bottom.svg is a 501.068-wide viewBox whose path runs
   x=30…471.068. The element is the artwork's width (441.068), so the image has
   to be pulled 30px left for the paint to land on the element's edge.
   This rule carried the DESKTOP percentage, -1.69%, which is 30px of 1775 but
   only 7.45px of 441 — so the artwork started 22px inside the canvas and left a
   22px strip of bare white page down the left of the whole section, right where
   the closing copy sits. That is the "it's cut" that was reported four times.
   Percentages cannot be shared between the canvases here; the padding is an
   absolute 30px in every file, so the offset is written in px.
   Only the LEFT gap showed: the <img> is a replaced element with width:auto, so
   it renders at its intrinsic 501px and ignores the right inset entirely, which
   pushed the artwork's right edge past the canvas and covered that side.
   d-band-top (-1.74% of 1728.857), d-band-bottom (-1.69% of 1774.999) and
   m-band-top (-6.73% of 445.436) all already resolve to -30px. This was the one
   that did not. */
.m-band-bottom img { position:absolute; left:-30px; top:-20px; right:auto; bottom:auto; width:auto; height:auto; }
.m-price-logo { position:absolute; left:-381px; top:10406px; width:632px; height:601px; }
.m-price-logo img { width:100%; height:100%; object-fit:contain; }
.m-price-title { position:absolute; left:50%; transform:translateX(-50%); top:10377px; width:993px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:700; font-size:20px; line-height:25px; color: var(--sl-title-dark, #000); text-align:center; }
.m-price-lead { position:absolute; left:calc(50% - 1.5px); transform:translateX(-50%); top:10421px; width:391px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:400; font-size:17px; line-height:21px; color:#000; text-align:center; }
.m-price-list { position:absolute; left:calc(50% - 5.5px); transform:translateX(-50%); top:10545px; width:405px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:400; font-size:17px; line-height:27px; color:#000; text-align:center; }
.m-final-lead { position:absolute; left:calc(50% - 2px); transform:translateX(-50%); top:11014px; width:418px;
  font-family:'Tel Aviv Modernist',sans-serif; font-weight:400; font-size:15px; line-height:25px; color:#fff; text-align:center; }
.m-final-title { position:absolute; left:calc(50% - 5.5px); transform:translateX(-50%); top:11095px; width:1039px;
  font-family:'Tel Aviv Brutalist',sans-serif; font-weight:700; font-size:17px; line-height:21px; color: var(--sl-title-light, #fff); text-align:center; }

/* ==========================================================================
   MOBILE — finishing pass
   Three categories, each verified against the mobile frame's own Figma data
   before it was changed. Nothing here moves a composition; the coordinates
   above are still the source of truth.
   ========================================================================== */

/* --- 1. Opacity the first pass dropped ---------------------------------
   Two nodes in the mobile frame carry an opacity that never made it into the
   CSS, which is why both read as broken rather than as the background art
   they are. Figma is explicit about both. */

/* 133:436 — the EMP-TECH mark is a watermark that bleeds off the left edge on
   purpose (the desktop frame does the same at left:-1132/w:1650). At full
   opacity it competed with the pricing copy in front of it. The frame carries
   30%; both canvases are on 20% so the section reads the same either way. The
   inner image is sized exactly as Figma sizes it and clipped by the box. */
.m-price-logo { overflow: hidden; opacity: 0.2; }
.m-price-logo img {
	position: absolute;
	left: -0.06%;
	top: 0;
	width: 100.12%;
	height: 110.32%;
	max-width: none;
	object-fit: fill;
}

/* 133:438 — the testimonial's background texture sits at 60%. */
.m-story-bg img { opacity: 0.6; }

/* --- 2. Frame containment for oversized text boxes ---------------------
   Thirteen text nodes were drawn in boxes far wider than their own copy —
   m-ben-kicker is 1314px wide around 208px of text. Figma does not care; a
   browser does, because the box still takes pointer events and still reports
   a bounding rect that leaves the 440px frame, which makes the layout
   unmeasurable and blocks taps on whatever sits under it.

   Narrowing is safe here and was checked before it was applied: every one of
   these nodes breaks its lines on hard <br> (SL_Render::text converts the
   Figma newlines), not on soft wrap, so no line can re-wrap. The anchor is
   preserved in every case — a centred box keeps its centre, a
   translateX(-100%) box keeps its right edge — so the text renders at exactly
   the same coordinates. Widths below are the measured ink width plus ~10%
   headroom for font-loading variance. */
.m-ben-kicker      { width: 230px; }   /* ink 208 */
.m-treat-watermark { width: 285px; }   /* ink 260 */
.m-price-title     { width: 150px; }   /* ink 130 */
/* 230, not 200: the widest line is 186px, not the 174px the widest bidi
   fragment reports — the Hebrew line "5 אורכי גל שונים" splits into separate
   runs for the digit and the words, and only their sum is the real line. */
.m-onetech         { width: 230px; }
/* Same defect, worse: the hero headline runs 421px of ink and clears each edge
   by 9.3px — the tightest line on the canvas. 18.5px brings it to ~390. */
.m-hero__headline  { font-size: 18.5px; }
/* Figma sets this at 17px inside a 1039px box, so on the 440px frame the first
   hard-broken line measures 405px of ink and sits 12px from each screen edge —
   Figma's own render of the mobile frame has it touching both edges, which is
   what "the words are cut above the form" was. The line cannot be narrowed
   (the break is a hard newline in the copy; a narrower box would wrap it into a
   ragged third line), so the type comes down instead: 16px puts the ink at
   ~381px and the margin at ~29px, in line with every other block on this canvas. */
.m-final-title     { width: 420px; font-size: 16px; }
.m-wa-title        { width: 300px; }   /* ink 276, 3 hard-broken lines */
.m-aud-title       { width: 360px; }   /* ink 334 */
.m-ben-h           { width: 310px; }   /* widest ink of the four is 284 */
.m-wave-body--1,
.m-wave-body--2    { width: 260px; }   /* ink 232 / 206 */

/* --- 3. The WhatsApp series -------------------------------------------
   Figma lays the five screenshots out as one continuous row: widths
   169 / 247 / 332 / 165 / 247 separated by gaps of 49 / 46 / 48 / 49, so the
   row measures 1352px inside a 440px frame. Two of them sit at left:-765 and
   left:-547 and never appeared at all.

   That is not a mistake in the design — it is a row that cannot fit, drawn on
   a canvas that has no edge. It is the shared carousel now; see `.m-wa` and
   `.sl-wall--fit` further down. */

/* Second batch of oversized text boxes, same method: measured widest LINE
   (bidi fragments summed, not the widest fragment), narrowed to that plus
   headroom, anchor preserved. All break on hard <br>, so none can re-wrap. */
.m-fda         { width: 190px; }   /* widest line 169 */
.m-what-title  { width: 355px; }   /* 319 */
.m-what-lead   { width: 325px; }   /* 292 */
.m-mech-outro  { width: 390px; }   /* 354 */
.m-diff-title  { width: 420px; }   /* 394 — 435 would have crossed the left edge */

/* Right-aligned but positioned from the left with no transform, so narrowing
   alone would drag the right edge inward. left moves by the same amount the
   width loses (447-365 = 82; -44 + 82 = 38) to pin the right edge at 403. */
.m-ben-title   { left: 38px; width: 365px; }   /* 329 */

/* The badge label was given a 795px box around ~200px of text, and the box is
   rotated -2deg, so its sweep reached far past the frame. The plate behind it
   is 283px; the label now matches it. Both stay centre-anchored, so the text
   does not move. */
.m-hero__badge-text,
.m-hero__badge-text > span { width: 300px; }

/* --- "לקוחות שלנו משתפות" carousel, both canvases ----------------------
   One behaviour, two geometries, and it advances ONE card per step.

   Figma draws both rows bleeding past the frame — the mobile one runs -75 to
   482 in a 440 frame. On a canvas with no edge that is fine; in a browser it is
   a photo sliced in half. Stepping one card at a time normally makes that worse,
   because the window edge lands wherever the arithmetic leaves it.

   So the geometry is arranged to make a cut impossible rather than avoided:

     - each card carries HALF the design gap as a margin, so its slot is exactly
       one pitch wide (mobile 97 + 2x9 = 115, desktop 252 + 2x40 = 332);
     - the TRACK is given a width that is a whole number of those slots
       (3 x 115 = 345, 4 x 332 = 1328) and centred in the frame.

   Every scroll position is then a whole number of pitches, and the window is a
   whole number of slots — so the visible set is always N complete cards, at
   every step, for any number of photos. The cards land on exactly the same
   pixels the previous page-based version put them on: 56.5 and 240. */
.sl-wall { position: absolute; }
.sl-wall__track {
	display: flex;
	box-sizing: border-box;     /* the vertical padding below is inside height:100% */
	height: 100%;
	margin-inline: auto;        /* the track is narrower than the frame; centre it */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.sl-wall__track::-webkit-scrollbar { display: none; }

.sl-wall-photo {
	position: relative;
	overflow: hidden;
	scroll-snap-align: start;
	transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s;
	will-change: transform;
}
.sl-wall-photo img { width: 100%; height: 100%; object-fit: cover; }

/* The card at rest is slightly recessed; the one in the middle of the window
   comes forward. Subtle on purpose — this is a testimonial strip, not a hero. */
.sl-wall-photo--active {
	transform: translateY(-6px) scale(1.06);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

/* The wall is TALLER than the card row, and the track carries the difference as
   vertical padding. A horizontal scroll container clips vertically too — CSS
   computes `overflow-y: visible` to `auto` the moment the other axis scrolls —
   so the lifted card was being sliced: 19.4px off its top and 7.5px off its
   bottom on the desktop, 10.8px off the top on the phone. That is the cut.

   The padding is the room the lift needs, the wall grows by twice it, and its
   `top` moves up by exactly one, so every card still lands on the pixel the
   design puts it on: 9321 = 9297 + 24, 6532 = 6518 + 14. The wall's centre is
   unchanged too, which keeps the arrows where they were.

   scroll-margin cancels the card's own margin, so `snap-align: start` lands on
   the slot edge — the same position front.js scrolls to. */
.m-wall { left: 0; top: 6518px; width: 440px; height: 202px; }   /* 174 + 2x14 */
.m-wall .sl-wall__track { width: 345px; padding-block: 14px; }   /* 3 x 115 */
.m-wall .sl-wall-photo  {
	flex: 0 0 97px; width: 97px; height: 174px; border-radius: 30px;
	margin-inline: 9px; scroll-margin-inline-start: 9px;
}

.d-wall { left: 0; top: 9297px; width: 1728px; height: 501px; } /* 453 + 2x24 */
.d-wall .sl-wall__track { width: 1328px; padding-block: 24px; } /* 4 x 332 */
.d-wall .sl-wall-photo  {
	flex: 0 0 252px; width: 252px; height: 453px; border-radius: 30px;
	margin-inline: 40px; scroll-margin-inline-start: 40px;
}

/* --- The before/after results row, same carousel ------------------------
   One difference from the client photos: those are five identical 252x453
   boxes, these are five DIFFERENT boxes, each matching its own photo's aspect
   (1:1, 3:2, 2:1, 1:1, 3:2). A before/after pair cannot be cropped to a common
   shape without losing half of what it is there to show.

   So the slot is uniform — which is what the one-card-per-step geometry needs —
   and the image sits inside it at a fixed height and its natural width. The
   design's own widths come back on their own, because Figma sized each box to
   its photo: at height 195 a 2:1 photo is 390 wide, which is exactly what node
   112:223 is drawn at. A photo uploaded later gets the same treatment with no
   code change, and `max-width` keeps an unusually wide one inside its slot.

   Slot = widest card + the design's gap: 390 + 57 desktop, 332 + 48 mobile.
   The phone shows one at a time — a 332px card in a 440px frame leaves no room
   for a second, and for before/after detail that is the right call anyway. */
.sl-wall--fit .sl-wall-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;         /* the radius belongs to the image, not the slot */
}
.sl-wall--fit .sl-wall-photo img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	border-radius: 15px;
}

.m-wa { left: 0; top: 10136px; width: 440px; height: 189px; }   /* 165 + 2x12 */
.m-wa .sl-wall__track { width: 380px; padding-block: 12px; }    /* 1 x 380 */
.m-wa .sl-wall-photo  {
	flex: 0 0 332px; width: 332px; height: 165px;
	margin-inline: 24px; scroll-margin-inline-start: 24px;
}

.d-wa { left: 0; top: 13096px; width: 1728px; height: 223px; }  /* 195 + 2x14 */
.d-wa .sl-wall__track { width: 1341px; padding-block: 14px; }   /* 3 x 447 */
.d-wa .sl-wall-photo  {
	flex: 0 0 390px; width: 390px; height: 195px;
	margin-inline: 28.5px; scroll-margin-inline-start: 28.5px;
}

.sl-wall__arrow {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #9f6739;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
	cursor: pointer;
	z-index: 4;
	transition: transform .2s, background .2s, opacity .25s;
}
/* Scoped to the canvas, not to one carousel — both rows on a given canvas want
   the same control size. */
.sl-stage--mobile .sl-wall__arrow { width: 34px; height: 34px; margin-top: -17px; }
.sl-stage--mobile .sl-wall__arrow svg { width: 18px; height: 18px; display: block; }
.sl-stage--mobile .sl-wall__arrow--prev { left: 2px; }
.sl-stage--mobile .sl-wall__arrow--next { right: 2px; }

.sl-stage--desktop .sl-wall__arrow { width: 62px; height: 62px; margin-top: -31px; }
.sl-stage--desktop .sl-wall__arrow svg { width: 32px; height: 32px; display: block; }
.sl-stage--desktop .sl-wall__arrow--prev { left: 6px; }
.sl-stage--desktop .sl-wall__arrow--next { right: 6px; }

/* The ring stays as drawn because that is what suits the row. The tap area does
   not: on a 320px phone the canvas shrinks the 34px ring to 24px, well under the
   44px floor. This grows the target to a true 44px on every handset and leaves
   the drawn ring alone — the same --sl-scale trick the form inputs use. */
.sl-stage--mobile .sl-wall__arrow::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc( 44px / var(--sl-scale, 1) );
	height: calc( 44px / var(--sl-scale, 1) );
	transform: translate(-50%, -50%);
}
.sl-wall__arrow:hover  { background: #fff; transform: scale(1.1); }
.sl-wall__arrow:active { transform: scale(0.94); }
/* An arrow with nowhere to go fades rather than disappearing, so the control
   does not jump around as the row is driven. */
.sl-wall__arrow[disabled] { opacity: 0.3; cursor: default; }
/* One page of cards means nothing to drive — hide the whole control set. */
.sl-wall--static .sl-wall__arrow,
.sl-wall--static .sl-wall__dots { display: none; }

.sl-wall__dots {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
}
/* Each row sets its own offset: the wall grew by its lift padding, so what was
   -18 and -34 is now -4 and -10. */
.m-wall .sl-wall__dots { bottom: -4px; }
.d-wall .sl-wall__dots { bottom: -10px; }
.m-wa   .sl-wall__dots { bottom: -6px; }
.d-wa   .sl-wall__dots { bottom: -20px; }
.sl-stage--desktop .sl-wall__dots { gap: 10px; }
.sl-wall__dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.22);
	cursor: pointer;
	transition: background .3s, width .3s;
}
.sl-stage--desktop .sl-wall__dots span { width: 10px; height: 10px; }
.sl-wall__dots span.is-on { width: 16px; border-radius: 3px; background: #9f6739; }
.sl-stage--desktop .sl-wall__dots span.is-on { width: 28px; border-radius: 5px; }

@media (prefers-reduced-motion: reduce) {
	.sl-wall__track { scroll-behavior: auto; }
	.sl-wall-photo, .sl-wall__arrow, .sl-wall__dots span { transition: none; }
	.sl-wall-photo--active { transform: none; }
}

/* --- Rendered-size floors -------------------------------------------
   The mobile canvas scales by viewport/440, so on a 360px phone every drawn
   size lands at 78% of itself. For most of the page that is the point — the
   composition scales as a whole. For two things it is a defect:

   1. A focused input under 16px makes iOS zoom the page, and the page then
      slides sideways. This is the horizontal slide reported on real handsets;
      it never appears in a desktop browser at a narrow window, which is why
      measuring the document width alone did not find it.
   2. A tap target under 44px is below the accessibility floor.

   --sl-scale is published by front.js on the stage. Dividing by it cancels the
   canvas transform for that property only, so these land at a true rendered
   size on every phone while everything around them stays as drawn. */
.sl-stage--mobile {
	--sl-scale: 1;
}
.sl-stage--mobile .sl-form .sl-field input {
	/* Drawn LARGER so the canvas transform lands it at exactly 16px rendered. */
	font-size: calc( 16px / var(--sl-scale) );
}

/* The button must NOT follow the inputs here, and used to.
   iOS zooms on focusing an input, select or textarea under 16px — never on a
   button, which cannot be focused into that state. So the button was paying the
   cost of a protection it never needed: dividing by the scale drew its label at
   17.6px on a 400px phone and 23.1px on a 320px one, and "אני רוצה לשמוע פרטים
   על ״הצוללת״" only stays on one line up to 16.5px in a 342px button. It broke
   to two lines below ~380px wide and spilled 8px out of the button by 320px —
   on the one control the whole page exists to get pressed.
   Capped at the design's own 16px, so it can still grow toward a true 16px on a
   wide phone but can never reach a size that wraps. */
.sl-stage--mobile .sl-form .sl-field button {
	font-size: 16px;
	font-size: min( calc( 16px / var(--sl-scale) ), 16px );
}
@supports not (font-size: calc(1px / 1)) {
	.sl-stage--mobile .sl-form .sl-field input,
	.sl-stage--mobile .sl-form .sl-field button { font-size: 16px; }
}

/* --- Audience band, rebuilt in CSS, both canvases (112:218 / 133:362) ---
   Neither exported SVG can render correctly inside an <img>. Each has three
   layers: a white base rect, the gradient WEDGE, and a white 30% rect carrying
   `backdrop-filter: blur(300px)`. That last one lives in a <foreignObject>,
   which SVG-in-<img> restricted mode drops — so both the wash and, more
   importantly, the 300px blur are lost. Without the blur the wedge stays a hard
   diagonal and the white base shows through above and below it: the band read
   as a sloping ramp with white triangles in the corners.

   A 300px blur over a 605px-tall shape erases that wedge completely. Figma's
   own render of both nodes is an even gradient, corner to corner, with no
   diagonal anywhere. These stops are sampled from that render rather than
   recomputed from the authored ones, because the blur mixes the white base in
   and no formula over `#9F6739 -> #CEC5BC -> #786452` reproduces the result.

   The 10px #9F6739 rules top and bottom are the SVG's own `mask` path. */
.d-aud-band, .m-aud-band { background: none; }
.d-aud-band img, .m-aud-band img { display: none; }

.d-aud-band {
	background:
		linear-gradient( #9f6739, #9f6739 ) top    / 100% 10px no-repeat,
		linear-gradient( #9f6739, #9f6739 ) bottom / 100% 10px no-repeat,
		linear-gradient( 90deg,
			#ccb29c 0%, #d3c0b1 25%, #d7cdc6 48%, #c6bdb5 75%, #bab1a6 100% );
}

/* The mobile band is a 716px element pinned to the frame's right edge, so only
   its right 440px is ever on screen — element 38.55% to 100%. The sampled stops
   are mapped onto that span; the remainder holds the first colour and never
   renders. This is why the ramp looks so much gentler than the desktop's: the
   phone only ever sees the middle third of the same gradient. */
.m-aud-band {
	background:
		linear-gradient( #9f6739, #9f6739 ) top    / 100% 10px no-repeat,
		linear-gradient( #9f6739, #9f6739 ) bottom / 100% 10px no-repeat,
		linear-gradient( 90deg,
			#cfb8a5 0%, #cfb8a5 38.55%, #d1bdab 53.9%,
			#d3c2b2 69.3%, #d5c6ba 84.6%, #d7cbc0 100% );
}

/* An empty logo slot is a #d9d9d9 placeholder in the frame — the designer had
   not received the client logos yet. On a live page four blank grey squares
   read as broken images, and they sit in the one section built to earn trust
   ("הן כבר עשו את זה"). A slot with no image is hidden; :has() means it comes
   back on its own the moment a logo is set in the editor, with no code change. */
.m-aud-logo:not(:has(img)),
.d-aud-logo:not(:has(img)) { display: none; }

@supports not selector(:has(img)) {
	/* Older engines: keep the slot but drop the grey plate, so an empty one is
	   invisible rather than looking like a failed image. */
	.m-aud-logo, .d-aud-logo { background: transparent; }
}

/* --- Section 10 as a second video plate (106:160 / 133:464) ---------------
   Figma drew this one flat, with the poster carrying a screenshot of a player
   baked into it. It is a real plate now: the image is the poster and the link
   set in the editor plays in place, the same facade the hero plate uses.
   Figma has no play mark here to match, so the mark is centred in the box
   rather than placed by coordinate, and it only appears once a link exists —
   a play button over a plate that cannot play is worse than no button. */
.d-still[data-video]:not([data-video='']),
.m-still[data-video]:not([data-video='']) { cursor: pointer; }

.d-still iframe, .m-still iframe,
.d-still video,  .m-still video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
}

.sl-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 127px;
	height: 128px;
	margin: -64px 0 0 -63.5px;
	pointer-events: none;
	z-index: 2;
	transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.m-still .sl-play { width: 51px; height: 50px; margin: -25px 0 0 -25.5px; }

/* Two classes, because `.d-still img` / `.m-still img` already claim every
   image in the box for the poster (100%/100%/cover) and would swallow these. */
.sl-play .sl-play__circle { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-play .sl-play__tri {
	position: absolute;
	left: 50%;
	top: 50%;
	/* The mark's own 62.35x51.75, as a share of the 127x128 ring — the same
	   proportion the hero plate draws. Rotated because the exported polygon
	   points up. */
	width: 49.1%;
	height: 40.4%;
	object-fit: fill;
	transform: translate(-50%, -50%) rotate(90deg);
}

.d-still:hover .sl-play,
.m-still:hover .sl-play { transform: scale(1.06); }

.sl-video-playing .sl-play { display: none; }

/* --- {{ … }} accent runs -------------------------------------------------
   SL_Render::inline() turns {{text}} into this span. It rides the same custom
   property as the accent heading control, so the editor's gold picker moves
   these runs with it, and falls back to the design's own #9f6739 when unset. */
.sl-accent { color: var( --sl-title-accent, #9f6739 ); }

/* ==========================================================================
   Thank-you page
   Same materials as the hero, laid out fluidly. No Figma coordinates here on
   purpose: this page has no design to be faithful to, so it is built to be
   right at every width instead of at two.
   ========================================================================== */

.sl-ty-body { margin: 0; padding: 0; background: #212121; }

.sl-ty {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: #212121;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The gradient strip that opens the landing page, so the two read as one site. */
.sl-ty__bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 8px;
	background: linear-gradient( to right, #786452, #cec5bc );
	z-index: 3;
}

/* object-fit: cover is what replaces the hero's fixed 726x1089 mask — the photo
   fills whatever shape the window happens to be. */
.sl-ty__bg { position: absolute; inset: 0; overflow: hidden; }
.sl-ty__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-ty__scrim { position: absolute; inset: 0; background: rgba( 0, 0, 0, 0.8 ); }

/* The glow SVGs carry their own blur; they only need placing and scaling. */
.sl-ty__glow { position: absolute; width: 42vmin; height: 42vmin; pointer-events: none; opacity: 0.9; }
.sl-ty__glow img { width: 100%; height: 100%; display: block; }
.sl-ty__glow--right { right: -8vmin; bottom: -6vmin; }
.sl-ty__glow--left { left: -10vmin; top: -8vmin; }

.sl-ty__inner {
	position: relative;
	z-index: 2;
	width: min( 760px, 88vw );
	padding: 64px 0;
	text-align: center;
	color: #fff;
}

.sl-ty__mark {
	margin: 0 0 18px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	/* clamp() is the whole reason this page needs no breakpoints: the type grows
	   with the viewport between a readable floor and a sane ceiling. */
	font-size: clamp( 15px, 2.2vw, 20px );
	letter-spacing: 0.14em;
	color: #cec5bc;
}

.sl-ty__title {
	margin: 0 0 22px;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 700;
	font-size: clamp( 30px, 6vw, 60px );
	line-height: 1.15;
	color: #fff;
}

.sl-ty__text {
	margin: 0 auto;
	max-width: 34em;
	font-family: 'Tel Aviv Modernist', sans-serif;
	font-weight: 400;
	font-size: clamp( 16px, 2.4vw, 25px );
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.86 );
}

.sl-ty__btn {
	display: inline-block;
	margin-top: 38px;
	padding: 16px 44px;
	border-radius: 9px;
	font-family: 'Tel Aviv Brutalist', sans-serif;
	font-weight: 700;
	font-size: clamp( 15px, 2vw, 23px );
	color: #000;
	text-decoration: none;
	background: linear-gradient( 90deg, #9f6739 0%, #cec5bc 48.558%, #786452 100% );
	transition: transform .2s ease, box-shadow .2s ease;
}
.sl-ty__btn:hover { transform: translateY( -2px ); box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.35 ); }
.sl-ty__btn:active { transform: translateY( 0 ); }

@media ( prefers-reduced-motion: reduce ) {
	.sl-ty__btn { transition: none; }
	.sl-ty__btn:hover { transform: none; }
}