/* Layout: one teal-950 hero band carrying the brand's crossing threads, then calm Loom-neutral
   sections on a 1200px measure, product screens framed like the desk and the phone.
   Every value below is copied from weave/public/scss/_tokens.scss, the rebrand reference
   (docs/weave-rebrand/weave-total-rebrand.html) and the Companion design (camera scene).
   Nothing here is a new colour, face or shape. */
:root {
	/* Weave primitives (_tokens.scss) */
	--w-teal-50: #e7fafc; --w-teal-200: #9fe8ed; --w-teal-300: #5fd5dd; --w-teal-400: #00bac6;
	--w-teal-700: #00636d; --w-teal-800: #004e55; --w-teal-900: #00383e; --w-teal-950: #002225;
	--w-brass-100: #f4ebd2; --w-brass-300: #d9bd74; --w-brass-500: #b07d00; --w-brass-900: #4f3000;
	--w-green-500: #259f50;
	--w-n-0: #ffffff; --w-n-50: #f7fbfc; --w-n-100: #eff5f7; --w-n-200: #e0e8ea; --w-n-300: #ccd6d8;
	--w-n-500: #7f8c8f; --w-n-600: #626e71; --w-n-700: #4a5557; --w-n-900: #222a2c;
	--w-nd-950: #0d1011; --w-nd-900: #191d1e; --w-nd-850: #202526; --w-nd-800: #272d2e;
	--w-nd-700: #313839; --w-nd-600: #3f4749; --w-nd-300: #969fa2; --w-nd-200: #acb4b6; --w-nd-100: #d2d8d9;

	/* Semantic tokens, light (the desk's _theme_map.scss) */
	--bg: var(--w-n-50);
	--surface: var(--w-n-0);
	--sunken: var(--w-n-100);
	--border: var(--w-n-200);
	--border-strong: var(--w-n-300);
	--text: var(--w-n-900);
	--text-2: var(--w-n-700);
	--text-3: var(--w-n-600);
	--muted: var(--w-n-500);
	--primary: var(--w-teal-700);
	--primary-hover: var(--w-teal-800);
	--on-primary: #ffffff;
	--primary-subtle: var(--w-teal-50);
	--primary-subtle-border: var(--w-teal-200);
	--accent: var(--w-brass-500);
	--notice-bg: var(--w-brass-100);
	--notice-ink: var(--w-brass-900);
	--btn-bg: var(--w-n-100);
	--shot-shadow: 0 1px 2px rgba(18, 24, 26, .06), 0 12px 32px -12px rgba(18, 24, 26, .18);
	--phone-ground: #ffffff; /* the Companion's light screen */
	--scroll-thumb: var(--w-n-300); --scroll-thumb-hover: var(--w-n-400); --w-n-400: #a1adb0;

	/* The hero band is the same dark teal ground in both themes, as in the brand reference */
	--hero-bg: var(--w-teal-950);
	--hero-text: #ffffff;
	--hero-text-2: var(--w-teal-200);
	--hero-line: rgba(255, 255, 255, .10);
	--hero-thread: rgba(255, 255, 255, .26);
	--hero-brass: rgba(200, 163, 66, .58);
	--hero-btn-bg: rgba(255, 255, 255, .08);
	--hero-btn-border: rgba(255, 255, 255, .28);

	/* The Companion's camera scene, dark in both themes (weave-companion design) */
	--cam: #0b1416;
	--cam-ink: #e8f4f5;
	--cam-muted: #b9cdd0;
	--cam-view: radial-gradient(120% 80% at 50% 40%, #3b4f52 0%, #1a2628 55%, #0b1416 100%);
	--cam-tag: #f4f1e8;
	--cam-bars: #111111;
	--cam-frame: var(--w-teal-400);
	--cam-laser: #ff5a4f;
	--cam-read: var(--w-green-500);

	/* Type (rebrand reference: Plex Sans, Plex Mono, Plex Sans Arabic) */
	--sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
	--ease: cubic-bezier(.2, .7, .2, 1);

	/* Radii (rebrand reference) */
	--r-badge: 4px; --r-button: 6px; --r-input: 6px; --r-card: 10px; --r-dialog: 14px;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: var(--w-nd-950); --surface: var(--w-nd-900); --sunken: var(--w-nd-850);
		--border: var(--w-nd-700); --border-strong: var(--w-nd-600);
		--text: var(--w-nd-100); --text-2: var(--w-nd-200); --text-3: var(--w-nd-300); --muted: var(--w-nd-300);
		--primary: var(--w-teal-400); --primary-hover: var(--w-teal-300); --on-primary: var(--w-nd-950);
		--primary-subtle: rgba(0, 186, 198, .14); --primary-subtle-border: rgba(0, 186, 198, .4);
		--accent: var(--w-brass-300); --notice-bg: #673f00; --notice-ink: #faf6ea; --btn-bg: var(--w-nd-800);
		--shot-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
		--hero-bg: #001619;
		--scroll-thumb: var(--w-nd-700); --scroll-thumb-hover: var(--w-nd-600);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--scroll-thumb: var(--w-nd-700); --scroll-thumb-hover: var(--w-nd-600);
	--bg: var(--w-nd-950); --surface: var(--w-nd-900); --sunken: var(--w-nd-850);
	--border: var(--w-nd-700); --border-strong: var(--w-nd-600);
	--text: var(--w-nd-100); --text-2: var(--w-nd-200); --text-3: var(--w-nd-300); --muted: var(--w-nd-300);
	--primary: var(--w-teal-400); --primary-hover: var(--w-teal-300); --on-primary: var(--w-nd-950);
	--primary-subtle: rgba(0, 186, 198, .14); --primary-subtle-border: rgba(0, 186, 198, .4);
	--accent: var(--w-brass-300); --notice-bg: #673f00; --notice-ink: #faf6ea; --btn-bg: var(--w-nd-800);
	--shot-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
	--hero-bg: #001619;
	color-scheme: dark;
}

* { box-sizing: border-box; }
/* Scrollbars, as Weave's own (weave/public/scss/base.scss): thin, a Loom-neutral thumb, no track */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb-hover) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid transparent; background-clip: content-box; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); border: 3px solid transparent; background-clip: content-box; }
/* Strips that scroll sideways inside the page get the slimmer one Weave gives its tables */
.diagram-box::-webkit-scrollbar, .phones::-webkit-scrollbar { width: 9px; height: 9px; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
	margin: 0; background: var(--bg); color: var(--text);
	font: 400 16px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
	transition: opacity .18s ease;
}
body.switching { opacity: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; inset-inline-start: 16px; top: 16px; z-index: 50; background: var(--surface); padding: 8px 12px; border-radius: var(--r-button); }

.wrap {
	width: 100%; max-width: 1200px; margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
	.wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}

/* Type scale (rebrand reference, section 07) */
.display { font-size: clamp(40px, 6.4vw, 64px); line-height: 1.06; letter-spacing: -.032em; }
.h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -.026em; }
.h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.012em; }
.lede { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--text-2); max-width: 60ch; }
.eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.body { color: var(--text-2); max-width: 62ch; }

/* Arabic: Plex Sans Arabic throughout, no tracking (Arabic letters join) */
html[lang="ar"] body { font-family: var(--arabic); }
html[lang="ar"] .display, html[lang="ar"] .h2, html[lang="ar"] .h3 { letter-spacing: 0; }
html[lang="ar"] .display { line-height: 1.25; }
html[lang="ar"] .h2 { line-height: 1.35; }
html[lang="ar"] .eyebrow, html[lang="ar"] .footer-col h4, html[lang="ar"] .step-n, html[lang="ar"] .figure { font-family: var(--arabic); letter-spacing: 0; text-transform: none; font-size: 13px; }
html[lang="ar"] .lede, html[lang="ar"] .body { line-height: 1.8; }
html[lang="ar"] .hero-art { transform: scaleX(-1); }
html[lang="ar"] .btn .arrow { transform: scaleX(-1); }

/* Buttons: the desk's primary and default buttons, at marketing size */
.btn {
	display: inline-flex; align-items: center; gap: 8px; justify-content: center;
	font-weight: 600; font-size: 15px; line-height: 1; font-family: inherit; text-decoration: none; cursor: pointer;
	padding: 13px 20px; border-radius: var(--r-button); border: 1px solid transparent;
	background: var(--btn-bg); color: var(--text); transition: background .15s, border-color .15s, transform .2s var(--ease);
}
.btn:hover { border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: transparent; }
.btn-sm { padding: 9px 14px; font-size: 14px; }
.btn-hero-2 { background: var(--hero-btn-bg); color: var(--hero-text); border-color: var(--hero-btn-border); }
.btn-hero-2:hover { border-color: var(--hero-text); }
.btn-hero-1 { background: #ffffff; color: var(--w-teal-950); }
.btn-hero-1:hover { background: var(--w-teal-50); }
.btn svg { width: 16px; height: 16px; transition: translate .25s var(--ease); }
.btn:hover .arrow { translate: 3px 0; }
html[lang="ar"] .btn:hover .arrow { translate: -3px 0; }

/* Header */
.site-header {
	position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
	background: var(--hero-bg); color: var(--hero-text);
	border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--hero-line); }
.progress { position: absolute; inset-inline-start: 0; bottom: -1px; height: 2px; width: 100%; background: var(--w-brass-300); transform-origin: left; transform: scaleX(var(--p, 0)); }
html[dir="rtl"] .progress { transform-origin: right; }
.nav { display: flex; align-items: center; gap: 20px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hero-text); }
.logo svg { width: 32px; height: 32px; }
.logo span { font: 600 21px/1 var(--sans); letter-spacing: -.02em; }
.nav-links { display: flex; gap: 2px; margin-inline-start: 12px; }
.nav-links a { position: relative; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--hero-text-2); padding: 8px 12px; border-radius: var(--r-button); transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--hero-text); background: var(--hero-btn-bg); }
.nav-links a::after { content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 2px; background: var(--w-brass-300); transform: scaleX(0); transition: transform .35s var(--ease); }
.nav-links a.active { color: var(--hero-text); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-links .menu-only { display: none; }
@media (max-width: 960px) { .nav-links.open .menu-only { display: block; } }
.nav-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.signin { font: 500 14px/1 inherit; font-family: inherit; color: var(--hero-text); background: none; border: 0; cursor: pointer; text-decoration: none; padding: 8px 12px; }
/* Sign in: the shop's own address */
.signin-dlg { border: 1px solid var(--border); border-radius: var(--r-dialog); padding: 28px; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: var(--shot-shadow); }
.signin-dlg::backdrop { background: rgba(0, 34, 37, .55); }
.signin-dlg[open] { animation: rise .35s var(--ease); }
.signin-dlg form { display: grid; gap: 16px; }
.signin-dlg h3 { font-size: 19px; }
.signin-dlg p { font-size: 14px; color: var(--text-3); }
.addr { display: flex; align-items: center; direction: ltr; background: var(--sunken); border: 1px solid transparent; border-radius: var(--r-input); }
.addr:focus-within { border-color: var(--primary); background: var(--surface); }
.addr input { flex: 1; min-width: 0; border: 0; background: none; font: 400 15px/1.4 var(--sans); color: var(--text); padding: 10px 0 10px 12px; outline: none; }
.addr span { font: 400 15px/1.4 var(--sans); color: var(--muted); padding-right: 12px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; }
.dlg-actions .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.signin:hover { text-decoration: underline; }
.lang-btn {
	display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; cursor: pointer;
	background: var(--hero-btn-bg); color: var(--hero-text); border: 1px solid var(--hero-btn-border);
	border-radius: var(--r-button); font: 500 14px/1 var(--sans);
}
.lang-btn:hover { border-color: var(--hero-text); }
.lang-btn svg { width: 16px; height: 16px; }
.lang-btn [lang="ar"] { font-family: var(--arabic); }
.menu-btn { display: none; background: none; border: 1px solid var(--hero-btn-border); color: var(--hero-text); border-radius: var(--r-button); width: 40px; height: 36px; cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; margin: auto; }
@media (max-width: 960px) {
	.nav-links { display: none; }
	.menu-btn { display: inline-flex; }
	.nav-end .signin, .nav-end .btn { display: none; }
	.nav-links.open {
		display: flex; flex-direction: column; position: absolute; inset-inline: 0; top: 68px;
		background: var(--hero-bg); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
		border-bottom: 1px solid var(--hero-line); margin: 0;
	}
	.nav-links.open a { padding: 12px; font-size: 16px; }
	.nav-links.open a::after { display: none; }
}

/* Hero */
.hero { background: var(--hero-bg); color: var(--hero-text); position: relative; overflow: hidden; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner { position: relative; padding-block: 72px 0; display: grid; gap: 56px; }
.hero-copy { max-width: 780px; display: grid; gap: 24px; }
.hero .eyebrow { color: var(--w-brass-300); }
.hero .lede { color: var(--hero-text-2); max-width: 58ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.proof { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 0; margin: 4px 0 0; list-style: none; }
.proof li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--hero-text-2); }
.proof svg { width: 16px; height: 16px; color: var(--w-brass-300); flex: none; }
.hero-stage { position: relative; perspective: 1800px; }
.hero-stage::after { content: ""; position: absolute; inset-inline: -50vw; bottom: 0; height: 34%; background: var(--bg); }
/* Try it: the first screens in either language and theme */
.shot-controls { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }
.hc-label { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--w-brass-300); margin-inline-end: 4px; }
html[lang="ar"] .hc-label { font-family: var(--arabic); letter-spacing: 0; font-size: 13px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--hero-btn-bg); border: 1px solid var(--hero-btn-border); border-radius: var(--r-button); }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 4px; cursor: pointer; background: none; color: var(--hero-text-2); font: 500 13px/1 var(--sans); transition: background .2s, color .2s; }
.seg button[lang="ar"], html[lang="ar"] .seg button { font-family: var(--arabic); }
.seg button:hover { color: var(--hero-text); }
.seg button[aria-checked="true"] { background: #ffffff; color: var(--w-teal-950); }
.seg svg { width: 14px; height: 14px; }
.hero-window img, .hero-phone .screen > img { transition: opacity .22s ease; }
.hero-window.swapping img, .hero-phone .screen.swapping > img { opacity: 0; }
/* The frame follows the screen's theme, in Weave's dark neutrals */
.hero-window.is-dark { background: var(--w-nd-950); border-color: var(--w-nd-700); }
.hero-window.is-dark .window-bar { background: var(--w-nd-900); border-color: var(--w-nd-700); }
.hero-window.is-dark .window-bar .url { background: var(--w-nd-950); border-color: var(--w-nd-700); color: var(--w-nd-300); }
.hero-window.is-dark .window-bar i { background: var(--w-nd-600); }
.hero-window .window-bar .url { transition: background .3s, color .3s; }
.hero-phone .screen.is-dark { background: #13201f; }
.hero-phone .screen.is-dark .sb { color: #e3f1f2; }
.hero-window[dir] .window-bar { direction: ltr; }
.tilt { position: relative; z-index: 1; transform-origin: 50% 0; transform: rotateX(var(--tilt, 0deg)); will-change: transform; }

/* Desk window */
.window { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shot-shadow); }
.window-bar { display: flex; align-items: center; gap: 12px; height: 36px; padding-inline: 14px; background: var(--sunken); border-bottom: 1px solid var(--border); direction: ltr; }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); display: block; }
.window-bar .dots { display: flex; gap: 6px; }
.window-bar .url { flex: 1; max-width: 360px; margin-inline: auto; text-align: center; font: 400 12px/24px var(--mono); color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html[lang="ar"] .window-bar .url:not(.ltr) { font-family: var(--arabic); direction: rtl; }
.window-bar .spacer { width: 42px; }
.window img { width: 100%; height: auto; }
.crop { overflow: hidden; }
.crop img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Phone: a frame around the Companion's own screen. The screenshots carry the phone's
   24-point status bar; the frame draws its clock and icons in that band. */
.phone { position: relative; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 30px; padding: 7px; box-shadow: var(--shot-shadow); }
.screen { position: relative; container-type: inline-size; border-radius: 23px; overflow: hidden; background: var(--phone-ground); aspect-ratio: 780 / 1688; }
.screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sb { position: absolute; inset-inline: 0; top: 0; height: 6.15cqw; padding-inline: 5.5cqw; display: flex; align-items: center; justify-content: space-between; font: 600 3.3cqw/1 var(--sans); color: var(--w-n-900); z-index: 3; }
.sb svg { width: 3.6cqw; height: 3.6cqw; }
.sb .icons { display: flex; gap: 1.2cqw; align-items: center; }
.hero-phone { position: absolute; z-index: 2; width: clamp(150px, 19%, 230px); inset-inline-end: -12px; bottom: 20px; }

/* Sections */
section { padding-block: clamp(72px, 9vw, 120px); }
.section-head { display: grid; gap: 16px; max-width: 780px; margin-bottom: 48px; align-content: start; }
.after-hero { padding-top: clamp(96px, 12vw, 148px); }

/* Outcomes */
.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.outcome { background: var(--surface); padding: 32px 28px; display: grid; gap: 12px; align-content: start; min-width: 0; transition: background .3s; }
.outcome:hover { background: var(--bg); }
.outcome p { color: var(--text-2); font-size: 15px; }
.outcome .figure { position: relative; font: 500 13px/1.5 var(--mono); color: var(--text-3); padding-top: 14px; margin-top: 6px; }
.outcome .figure::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--border); }
.outcome .figure::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .35s; }
html[dir="rtl"] .outcome .figure::after { transform-origin: right; }
.outcome.in .figure::after, .no-motion .outcome .figure::after { transform: scaleX(.38); }
.outcome .figure b { color: var(--primary); font-weight: 600; }

/* Feature rows */
.feature { display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feature + .feature { margin-top: clamp(72px, 9vw, 112px); }
.feature.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature.flip .feature-copy { order: 2; }
@media (max-width: 900px) { .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); } .feature.flip .feature-copy { order: 0; } }
.feature-copy { display: grid; gap: 18px; min-width: 0; }
.checks { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--text-2); font-size: 15px; }
.checks svg { width: 18px; height: 18px; color: var(--primary); margin-top: 4px; }
figure { margin: 0; }
figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.shot { transition: translate .5s var(--ease); }
.shot:hover { translate: 0 -4px; }

/* Platform */
.platform { background: var(--surface); border-block: 1px solid var(--border); }
.diagram-box { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg); padding: 28px 20px 18px; margin-bottom: 40px; }
.diagram-box svg { display: block; width: 100%; min-width: 620px; max-width: 900px; margin-inline: auto; height: auto; direction: ltr; }
/* The diagram reads left to right in both languages, so it opens at its labels */
.diagram-box { direction: ltr; }
html[dir="rtl"] .diagram-cap { direction: rtl; }
.diagram-cap { text-align: center; font-size: 14px; color: var(--text-3); margin-top: 10px; }
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.module { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); min-width: 0; transition: border-color .3s, translate .4s var(--ease); }
.module:hover { border-color: var(--primary-subtle-border); translate: 0 -3px; }
.tile { width: 44px; height: 44px; border-radius: var(--r-card); background: var(--w-teal-700); display: grid; place-items: center; transition: transform .4s var(--ease); }
.module:hover .tile { transform: scale(1.06); }
.tile svg { width: 22px; height: 22px; color: #ffffff; }
.module h3 { font-size: 16px; line-height: 1.35; }
.module p { font-size: 14px; color: var(--text-3); margin-top: 4px; }

/* Companion */
.companion { overflow: hidden; }
.companion-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .companion-grid { grid-template-columns: minmax(0, 1fr); } }
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); align-items: start; }
.phones .phone { border-radius: clamp(16px, 3vw, 30px); padding: clamp(3px, .7vw, 7px); }
.phones .screen { border-radius: clamp(13px, 2.4vw, 23px); }
.phones figcaption { text-align: center; margin-top: 12px; font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: var(--r-badge); background: var(--primary-subtle); color: var(--primary); border: 1px solid var(--primary-subtle-border); width: fit-content; }

/* Scan scene, after the Companion design's camera screen */
.scan-screen { background: var(--cam); }
.cam { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--cam-ink); }
.cam .sb { color: var(--cam-ink); position: relative; flex: none; }
.cam-view { position: relative; flex: 1; margin: 1cqw 3cqw; border-radius: 5cqw; overflow: hidden; background: var(--cam-view); }
.cam-tools { position: absolute; top: 3cqw; inset-inline: 3cqw; display: flex; justify-content: space-between; font-weight: 500; font-size: 3.2cqw; line-height: 1; }
.cam-tools span { background: rgba(255, 255, 255, .14); border-radius: 99px; padding: 1.4cqw 3cqw; }
.tag { position: absolute; left: 50%; top: 42%; width: 46cqw; transform: translate(-50%, -50%) rotate(-4deg); background: var(--cam-tag); border-radius: 2cqw; padding: 3cqw 3cqw 2cqw; display: grid; gap: 1.4cqw; justify-items: center; box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, .5); }
.tag .pn { font-weight: 700; font-size: 3cqw; line-height: 1.2; color: #333333; text-align: center; }
.tag .bc { width: 38cqw; height: 14cqw; background: repeating-linear-gradient(90deg, var(--cam-bars) 0 .7cqw, transparent .7cqw 1.1cqw, var(--cam-bars) 1.1cqw 1.5cqw, transparent 1.5cqw 2.5cqw, var(--cam-bars) 2.5cqw 3.6cqw, transparent 3.6cqw 4cqw); }
.tag .tx { font: 600 3cqw/1 var(--mono); color: #111111; direction: ltr; }
.frame { position: absolute; left: 14%; right: 14%; top: 29%; height: 28%; border-radius: 4cqw; box-shadow: 0 0 0 999px rgba(5, 10, 11, .45); }
.frame::before { content: ""; position: absolute; inset: 0; border-radius: 4cqw; border: .8cqw solid var(--cam-frame); clip-path: polygon(0 0, 22% 0, 22% 4px, 4px 4px, 4px 30%, 0 30%, 0 70%, 4px 70%, 4px calc(100% - 4px), 22% calc(100% - 4px), 22% 100%, 78% 100%, 78% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 70%, 100% 70%, 100% 30%, calc(100% - 4px) 30%, calc(100% - 4px) 4px, 78% 4px, 78% 0, 100% 0, 100% 100%, 0 100%); }
.laser { position: absolute; inset-inline: 8%; top: 50%; height: .6cqw; background: var(--cam-laser); box-shadow: 0 0 3cqw var(--cam-laser); border-radius: 1px; }
.flash { position: absolute; inset: 0; z-index: 2; background: var(--cam-read); opacity: 0; pointer-events: none; }
.found { position: relative; margin: 2cqw 3cqw 0; background: var(--phone-ground); color: var(--w-n-900); border-radius: 4.5cqw; padding: 3.2cqw 3.8cqw; display: grid; gap: 1cqw; }
.found b { font-weight: 700; font-size: 3.8cqw; line-height: 1.3; display: flex; justify-content: space-between; gap: 2cqw; }
.found b span:last-child { color: var(--w-teal-700); direction: ltr; }
.found small { font: 400 3cqw/1.3 var(--mono); color: var(--w-n-600); direction: ltr; text-align: start; }
.cam-foot { display: flex; justify-content: space-around; align-items: center; padding: 3cqw 3cqw 5cqw; font-weight: 500; font-size: 3cqw; line-height: 1; color: var(--cam-muted); }
.shutter { width: 13cqw; height: 13cqw; border-radius: 50%; border: .9cqw solid var(--cam-ink); display: grid; place-items: center; }
.shutter::after { content: ""; width: 9.4cqw; height: 9.4cqw; border-radius: 50%; background: var(--cam-frame); }
.result { position: absolute; inset: 0; z-index: 4; background: var(--phone-ground); transform: translateX(105%); }
html[dir="rtl"] .result { transform: translateX(-105%); }
.result img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Lebanon */
.local { background: var(--surface); border-block: 1px solid var(--border); }
.local-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 40px; }
.local-item { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 22px; min-width: 0; }
.local-item::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--border); }
.local-item::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 2px; width: 100%; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) var(--d, 0ms); }
html[dir="rtl"] .local-item::after { transform-origin: right; }
.local-item.in::after, .no-motion .local-item::after { transform: scaleX(1); }
.local-item p { color: var(--text-2); font-size: 15px; }
.sample { font: 500 14px/1.5 var(--mono); color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-input); padding: 10px 12px; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.sample span { color: var(--text-3); font-weight: 400; font-size: 13px; }
.sample .lead { color: var(--text); font-size: 14px; font-weight: 500; }
html[lang="ar"] .sample { font-family: var(--arabic); }
.sample .ar { font-family: var(--arabic); font-size: 15px; }

/* Security */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .trust { grid-template-columns: minmax(0, 1fr); } }
.trust-item { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.trust-item svg { width: 22px; height: 22px; color: var(--primary); margin-top: 2px; }
.trust-item h3 { font-size: 16px; line-height: 1.35; }
.trust-item p { font-size: 14px; color: var(--text-3); margin-top: 4px; }

/* Getting started: a real sequence, so it is numbered */
.steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--border); }
.steps::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); }
html[dir="rtl"] .steps::after { transform-origin: right; }
.steps.in::after, .no-motion .steps::after { transform: scaleX(1); }
.step { padding-block: 28px 8px; padding-inline-end: 24px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.step-n { font: 500 13px/1 var(--mono); color: var(--accent); }
.step p { font-size: 15px; color: var(--text-2); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
details { border-bottom: 1px solid var(--border); }
details:first-child { border-top: 1px solid var(--border); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 17px; font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary svg { width: 18px; height: 18px; flex: none; margin-top: 5px; color: var(--text-3); transition: transform .3s var(--ease); }
details[open] summary svg { transform: rotate(45deg); }
details p { padding: 0 0 22px; color: var(--text-2); max-width: 64ch; }

/* Closing + demo form */
.closing { background: var(--hero-bg); color: var(--hero-text); position: relative; overflow: hidden; }
.closing-grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .closing-grid { grid-template-columns: minmax(0, 1fr); } }
.closing .lede { color: var(--hero-text-2); }
.closing .eyebrow { color: var(--w-brass-300); }
.closing-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.closing-points li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--hero-text-2); }
.closing-points svg { width: 18px; height: 18px; color: var(--w-brass-300); margin-top: 4px; }
.form-card { background: var(--surface); color: var(--text); border-radius: var(--r-dialog); padding: 28px; display: grid; gap: 16px; border: 1px solid var(--border); }
.form-card h3 { font-size: 19px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; color: var(--text-3); }
.field input, .field textarea { font-size: 15px; line-height: 1.4; font-family: inherit; color: var(--text); background: var(--sunken); border: 1px solid transparent; border-radius: var(--r-input); padding: 10px 12px; width: 100%; transition: border-color .2s, background .2s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.field textarea { resize: vertical; min-height: 88px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .two { grid-template-columns: 1fr; } }
.form-note { font-size: 13px; color: var(--text-3); }
.form-note a { color: var(--primary); }
.form-status { font-size: 14px; padding: 10px 12px; border-radius: var(--r-input); background: var(--notice-bg); color: var(--notice-ink); }

/* Footer */
.site-footer { padding-block: 48px; border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
.footer-brand { display: grid; gap: 12px; align-content: start; }
.footer-brand .logo { color: var(--text); }
.footer-brand p { color: var(--text-3); font-size: 14px; max-width: 34ch; }
.footer-col h4 { margin: 0 0 12px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { text-decoration: none; font-size: 14px; color: var(--text-2); }
.footer-col a:hover { color: var(--primary); }
.footer-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 13px; color: var(--muted); }

/* Phone width. Last, so it wins over the rules above. */
@media (max-width: 640px) {
	.hero-art .threads { display: none; }
	.hero-inner { padding-block: 36px 0; gap: 40px; }
	.hero-phone { width: 30%; inset-inline-end: -2px; bottom: -14%; border-radius: 16px; padding: 3px; }
	.hero-phone .screen { border-radius: 13px; }
	.hero-stage { padding-bottom: 18%; }
	.shot-controls { justify-content: flex-start; }
	.hc-label { width: 100%; }
	/* Phones: a row you swipe through, each one large enough to read */
	.phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: -16px; padding-inline: 16px; }
	.phones figure { scroll-snap-align: center; }
	.phones .phone { border-radius: 26px; padding: 6px; }
	.phones .screen { border-radius: 20px; }
	section { padding-block: 64px; }
	.outcome { padding: 24px 20px; }
	.form-card { padding: 20px; }
}

/* ---------- Motion. Everything is visible without it; html.motion only adds the entrances. ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* Hero entrance */
	.hero-art .threads path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.6s var(--ease) .2s forwards; }
	.hero-art .threads g:nth-child(2) path { animation-delay: .55s; }
	.hero-art line { animation: fade 1.6s ease both; }
	.word { display: inline-block; animation: rise .9s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
	.hero .eyebrow, .hero .lede, .hero-actions { animation: rise .9s var(--ease) both; }
	.hero .lede { animation-delay: .45s; }
	.hero-actions { animation-delay: .6s; }
	.proof li { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i) * 120ms + .8s); }
	.hero-stage .tilt > .window { animation: lift 1.4s var(--ease) .5s both; }
	.hero-phone { animation: phone-in 1.2s var(--ease) 1.1s both, float 6s ease-in-out 2.4s infinite; }

	/* Scroll reveals */
	.motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
	.motion .reveal.in { opacity: 1; transform: none; }
	/* Screens are woven in: a brass weft line runs down while the screen opens behind it */
	.motion .weave-in { clip-path: inset(0 0 100% 0 round var(--r-card)); transition: clip-path 1.3s var(--ease) var(--d, 0ms); }
	.motion .weave-in.in { clip-path: inset(0 0 0 0 round var(--r-card)); }
	.weft { position: absolute; inset-inline: 0; top: 0; height: 2px; z-index: 6; background: var(--w-brass-300); box-shadow: 0 0 14px var(--w-brass-300); opacity: 0; pointer-events: none; }
	.motion .weave-in.in .weft { animation: weft 1.3s var(--ease) var(--d, 0ms) both; }
	/* Platform diagram threads draw in */
	.motion .diagram path { stroke-dasharray: 1; stroke-dashoffset: 1; }
	.motion .diagram.in path { animation: draw 1.6s var(--ease) forwards; animation-delay: calc(var(--i) * 160ms); }
	.motion .diagram .lbl { opacity: 0; transition: opacity .8s ease 1s; }
	.motion .diagram.in .lbl { opacity: 1; }

	/* The scan: aim, read, the product found, then the product screen pushes in */
	.tag { animation: hand 8s ease-in-out infinite; }
	.laser { animation: sweep 8s ease-in-out infinite; }
	.frame::before { animation: read 8s linear infinite; }
	.flash { animation: flash 8s linear infinite; }
	.found { animation: found 8s var(--ease) infinite; }
	.result { animation: push 8s var(--ease) infinite; }
	html[dir="rtl"] .result { animation-name: push-rtl; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes lift { from { opacity: 0; transform: translateY(60px); } }
@keyframes phone-in { from { opacity: 0; transform: translate(24px, 70px) rotate(4deg); } }
@keyframes float { 50% { translate: 0 -8px; } }
@keyframes weft { 0% { top: 0; opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes hand { 0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); } 15% { transform: translate(-48%, -52%) rotate(-2deg); } 28%, 70% { transform: translate(-50%, -50%) rotate(-3deg); } }
@keyframes sweep { 0% { transform: translateY(-6cqw); opacity: 1; } 8% { transform: translateY(6cqw); } 16% { transform: translateY(-6cqw); } 24% { transform: translateY(6cqw); } 30% { transform: translateY(0); opacity: 1; } 32%, 92% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(-6cqw); opacity: 1; } }
@keyframes read { 0%, 29% { border-color: var(--cam-frame); } 30%, 40% { border-color: var(--cam-read); } 44%, 100% { border-color: var(--cam-frame); } }
@keyframes flash { 0%, 29.5% { opacity: 0; } 30.5% { opacity: .25; } 34%, 100% { opacity: 0; } }
@keyframes found { 0%, 30% { opacity: 0; transform: translateY(40%); } 35%, 100% { opacity: 1; transform: none; } }
@keyframes push { 0%, 44% { transform: translateX(105%); } 50%, 90% { transform: translateX(0); } 96%, 100% { transform: translateX(105%); } }
@keyframes push-rtl { 0%, 44% { transform: translateX(-105%); } 50%, 90% { transform: translateX(0); } 96%, 100% { transform: translateX(-105%); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { transition: none; } }