/* ════════════════════════════════════════════════════════════════════════════
   Vision Law — marketing site
   ════════════════════════════════════════════════════════════════════════════

   TOKENS ARE THE APP'S. Copied verbatim from vision-law-web/src/index.css :4-61.
   If a colour changes there, change it here — do not "improve" it in one place only.

   TYPE IS NOT THE APP'S, deliberately. The app runs an 11-13.5px data-dense ramp;
   a sales page needs display sizes. Same family, different scale.

   ARABIC HAS ITS OWN WEBFONT HERE, which the app does not have (it falls back to the
   system Arabic face under the Poppins stack). That is survivable in a dense internal
   tool and is not survivable in 44px display type on a page selling to Arabic readers.

   EVERY LAYOUT PROPERTY IS LOGICAL. See RTL-RULES.md §1 — the audit is
     grep -nE '(margin|padding|border)-(left|right)|[^-](left|right):' assets/styles.css
   and it must return nothing. */

/* ── Tokens — copied from the app ─────────────────────────────────────────── */
:root {
	--vl-navy: #154b69;
	--vl-navy-deep: #0d3349;
	--vl-navy-soft: #1d6690;
	--vl-navy-light: #5c9cc4;
	--vl-red: #cb0101;          /* danger ONLY — never an accent, same rule as the app */
	--vl-gold: #c9a84c;
	--vl-gold-ink: #8a6d1f;     /* gold text on light — bare gold fails contrast */
	--vl-green: #1f9d55;
	--vl-focus-ring: rgba(21, 75, 105, 0.12);
	--vl-ink: #1a1a1a;
	--vl-slate: #383838;
	--vl-muted: #8c8c8c;
	--vl-faint: #b8b8b8;
	--vl-line: #e7e4de;         /* warm hairline */
	--vl-line-soft: #f0ede8;
	--vl-bg: #f4f4f4;
	--vl-card: #ffffff;
	--vl-hover: #faf9f7;
	--vl-accent-bg: #eaf1f6;
	--vl-warn-bg: #fff8ec;
	--vl-chrome: #1a1a1a;

	/* marketing-only: the dark band, lifted from pages/Login.jsx's hero */
	--vl-dark: #0e1114;
	--vl-dark-2: #14171b;
	--vl-dark-ink: #e9ebee;
	--vl-dark-muted: #8791a0;
	--vl-dark-label: #9aa4b2;

	/* type */
	--font-ar: 'IBM Plex Sans Arabic', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-lat: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--fs-display: clamp(30px, 5.6vw, 58px);
	--fs-h1: clamp(26px, 4.4vw, 42px);
	--fs-h2: clamp(22px, 3.2vw, 32px);
	--fs-h3: clamp(17px, 2vw, 20px);
	--fs-lead: clamp(15.5px, 1.9vw, 19px);
	--fs-body: 16px;
	--fs-sm: 14px;
	--fs-xs: 12.5px;

	/* space */
	--s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
	--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

	--r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
	--shadow-card: 0 1px 4px rgba(0, 0, 0, .05);
	--shadow-lift: 0 10px 26px rgba(4, 22, 39, .1);
	--shadow-pop: 0 14px 40px rgba(0, 0, 0, .16);
	--ease: cubic-bezier(0.22, 0.7, 0.3, 1);

	--wrap: 1160px;
	color-scheme: light;
}

:root[data-theme='dark'] {
	--vl-navy: #1d6690;
	--vl-navy-deep: #154b69;
	--vl-navy-soft: #2d7bab;
	--vl-navy-light: #6fabd0;
	--vl-red: #d94f4f;
	--vl-gold: #d4b45f;
	--vl-gold-ink: #d4b45f;
	--vl-green: #34b46a;
	--vl-focus-ring: rgba(45, 123, 171, 0.25);
	--vl-ink: #e9ebee;
	--vl-slate: #c7ccd2;
	--vl-muted: #949ba4;
	--vl-faint: #676e77;
	--vl-line: #343b44;
	--vl-line-soft: #2b323a;
	--vl-bg: #14171b;
	--vl-card: #1d2126;
	--vl-hover: #242930;
	--vl-accent-bg: #1f3040;
	--vl-warn-bg: #37301f;
	--vl-chrome: #101214;
	--shadow-card: 0 1px 4px rgba(0, 0, 0, .35);
	--shadow-lift: 0 10px 26px rgba(0, 0, 0, .45);
	color-scheme: dark;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	font-family: var(--font-lat);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--vl-ink);
	background: var(--vl-bg);
	/* THE BODY MUST NEVER SCROLL SIDEWAYS — RTL-RULES §7. Wide children scroll
	   inside their own container; this is the backstop, not the fix. */
	overflow-x: hidden;
}
html[lang='ar'] body { font-family: var(--font-ar); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--vl-navy); outline-offset: 2px; border-radius: 4px; }
[dir='rtl'] .mirror { transform: scaleX(-1); }   /* directional glyphs ONLY — RTL-RULES §2 */

/* ── Layout ───────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }
section { padding-block: var(--s9); }
@media (max-width: 700px) { section { padding-block: var(--s8); } }

.eyebrow {
	font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--vl-gold-ink);
	margin-block-end: var(--s3);
}
.dark .eyebrow { color: var(--vl-gold); }
h1, h2, h3 { line-height: 1.22; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
.lead { font-size: var(--fs-lead); color: var(--vl-slate); max-width: 62ch; }
.dark .lead { color: var(--vl-dark-muted); }
.sec-head { max-width: 70ch; margin-block-end: var(--s7); }
.center { text-align: center; margin-inline: auto; }

.grid { display: grid; gap: var(--s4); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex; align-items: center; gap: var(--s2);
	padding: 12px 22px; border-radius: var(--r-sm);
	font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
	transition: transform .1s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary { background: var(--vl-navy); color: #fff; }
.btn-primary:hover { background: var(--vl-navy-soft); box-shadow: var(--shadow-lift); }
.btn-gold { background: var(--vl-gold); color: #241d05; }
.btn-gold:hover { filter: brightness(1.07); box-shadow: 0 10px 26px rgba(201, 168, 76, .28); }
.btn-ghost { border: 1px solid var(--vl-line); background: var(--vl-card); color: var(--vl-ink); }
.btn-ghost:hover { background: var(--vl-hover); border-color: var(--vl-navy); }
.dark .btn-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; }
.dark .btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-sm { padding: 9px 16px; font-size: var(--fs-xs); }
.btn .ico { width: 17px; height: 17px; flex: none; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-head {
	position: sticky; inset-block-start: 0; z-index: 60;
	background: rgba(244, 244, 244, .86);
	backdrop-filter: saturate(1.4) blur(12px);
	border-block-end: 1px solid var(--vl-line);
}
:root[data-theme='dark'] .site-head { background: rgba(20, 23, 27, .86); }
.head-in { display: flex; align-items: center; gap: var(--s4); min-height: 66px; }
.brand { display: flex; align-items: center; gap: var(--s3); }
.brand img { width: 38px; height: 38px; border-radius: var(--r-pill); }
.brand-name { font-weight: 600; font-size: 15px; line-height: 1.15; letter-spacing: .01em; }
.brand-sub { font-size: 11.5px; color: var(--vl-muted); line-height: 1.2; }
.nav { display: flex; align-items: center; gap: var(--s5); margin-inline-start: auto; }
.nav a { font-size: var(--fs-sm); color: var(--vl-slate); transition: color .15s ease; }
.nav a:hover { color: var(--vl-navy); }
.head-cta { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; }
.nav + .head-cta { margin-inline-start: 0; }
.lang-link {
	font-size: var(--fs-xs); font-weight: 600; padding: 7px 12px;
	border: 1px solid var(--vl-line); border-radius: var(--r-pill); color: var(--vl-slate);
}
.lang-link:hover { border-color: var(--vl-navy); color: var(--vl-navy); }
.burger { display: none; padding: var(--s2); }
.burger span { display: block; width: 20px; height: 2px; background: var(--vl-ink); border-radius: 2px; }
.burger span + span { margin-block-start: 5px; }

@media (max-width: 940px) {
	.nav {
		position: fixed; inset-block-start: 66px; inset-inline: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--vl-card); border-block-end: 1px solid var(--vl-line);
		padding: var(--s3) var(--s5) var(--s5);
		box-shadow: var(--shadow-pop);
		display: none;
	}
	.nav[data-open='1'] { display: flex; }
	.nav a { padding-block: 11px; border-block-end: 1px solid var(--vl-line-soft); }
	.burger { display: block; margin-inline-start: auto; }
	.head-cta { margin-inline-start: 0; }
	.head-cta .btn { display: none; }
}

/* ── Dark bands ───────────────────────────────────────────────────────────── */
.dark { background: var(--vl-dark); color: var(--vl-dark-ink); }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark .muted { color: var(--vl-dark-muted); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding-block: clamp(60px, 11vw, 120px); }
.hero-art {
	position: absolute; inset: 0; z-index: 0;
	background: url('img/hero-art.jpg') center / cover;
	opacity: .5;
}
.hero-veil {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(160deg, rgba(4, 22, 39, .86), rgba(0, 0, 0, .93));
}
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; gap: var(--s8); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
/* `1fr` is `minmax(auto, 1fr)`, and that auto MINIMUM is a grid blowout waiting to happen:
   one unbreakable string in a cell (an email address, a phone number) sets a track floor
   wider than the viewport and the whole page scrolls sideways. Always minmax(0, 1fr).
   This cost 14px of horizontal scroll at 360px on the contact section. */
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }
.hero h1 { font-size: var(--fs-display); color: #fff; margin-block-end: var(--s4); }
.hero .lead { color: #c6cedb; margin-block-end: var(--s6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--s5); margin-block-start: var(--s7); }
.hero-badge { font-size: var(--fs-xs); color: var(--vl-dark-label); }
.hero-badge b { display: block; font-size: var(--fs-sm); color: #fff; font-weight: 600; }

/* the hero visual — a framed screenshot, or its placeholder while B1 is open */
.shot {
	border-radius: var(--r-md); overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
	background: var(--vl-dark-2);
}
.shot img { width: 100%; }

/* ── Proof bar ────────────────────────────────────────────────────────────── */
.proof { background: var(--vl-card); border-block-end: 1px solid var(--vl-line); padding-block: var(--s6); }
.proof-in { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); text-align: center; }
.proof-n { font-size: clamp(24px, 3.4vw, 34px); font-weight: 600; color: var(--vl-navy); line-height: 1.1; }
.proof-l { font-size: var(--fs-sm); color: var(--vl-muted); margin-block-start: var(--s1); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
	background: var(--vl-card); border: 1px solid var(--vl-line);
	border-radius: var(--r-md); padding: var(--s5);
	box-shadow: var(--shadow-card);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--vl-navy-light); }
.card h3 { margin-block-end: var(--s2); }
.card p { font-size: var(--fs-sm); color: var(--vl-slate); }
.card-ico {
	width: 40px; height: 40px; border-radius: var(--r-sm);
	display: grid; place-content: center; margin-block-end: var(--s4);
	background: var(--vl-accent-bg); color: var(--vl-navy);
}
.card-ico svg { width: 21px; height: 21px; }
.dark .card { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
.dark .card p { color: var(--vl-dark-muted); }
.dark .card:hover { border-color: rgba(201, 168, 76, .45); }
.dark .card-ico { background: rgba(201, 168, 76, .14); color: var(--vl-gold); }

/* compact module chips */
.mods { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mod {
	display: inline-flex; align-items: center; gap: var(--s2);
	padding: 9px 15px; border-radius: var(--r-pill);
	background: var(--vl-card); border: 1px solid var(--vl-line);
	font-size: var(--fs-sm); color: var(--vl-slate);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mod:hover { border-color: var(--vl-navy); background: var(--vl-accent-bg); color: var(--vl-navy); }
.mod svg { width: 15px; height: 15px; opacity: .65; flex: none; }

/* feature rows — text beside a visual, alternating */
.row2 { display: grid; gap: var(--s7); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }
.row2 .flip { order: -1; }
@media (max-width: 760px) { .row2 .flip { order: 0; } }
.ticks { display: grid; gap: var(--s3); margin-block-start: var(--s5); }
.tick { display: flex; gap: var(--s3); font-size: var(--fs-sm); }
.tick svg { width: 18px; height: 18px; flex: none; color: var(--vl-green); margin-block-start: 3px; }
.dark .tick { color: #c6cedb; }

/* ── Vision AI band ───────────────────────────────────────────────────────── */
.ai-band { background: linear-gradient(165deg, #0d1620, var(--vl-dark)); }
.ai-hero { display: flex; align-items: center; gap: var(--s5); margin-block-end: var(--s5); }
.ai-disc {
	width: 92px; height: 92px; border-radius: var(--r-pill); flex: none;
	display: grid; place-content: center;
	background: radial-gradient(circle at 34% 26%, rgba(92, 156, 196, .3), rgba(13, 51, 73, .55));
	border: 1px solid rgba(201, 168, 76, .3);
}

/* ── Numbers / migration ──────────────────────────────────────────────────── */
.nums { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.num {
	background: var(--vl-card); border: 1px solid var(--vl-line);
	border-radius: var(--r-md); padding: var(--s5) var(--s4); text-align: center;
}
.num b { display: block; font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: var(--vl-navy); line-height: 1.15; }
.num span { font-size: var(--fs-xs); color: var(--vl-muted); }

/* ── Coming-soon strip ────────────────────────────────────────────────────── */
.soon { background: var(--vl-warn-bg); border-block: 1px solid var(--vl-line); }
:root[data-theme='dark'] .soon { background: var(--vl-warn-bg); }
.soon-grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.soon-card { display: flex; gap: var(--s4); }
.soon-card svg { width: 26px; height: 26px; flex: none; color: var(--vl-gold-ink); margin-block-start: 2px; }
.pill-soon {
	display: inline-block; margin-inline-start: var(--s2);
	padding: 3px 10px; border-radius: var(--r-pill);
	background: var(--vl-gold); color: #241d05;
	font-size: 11px; font-weight: 600; vertical-align: middle;
}

/* ── Screenshot gallery ───────────────────────────────────────────────────── */
.gallery { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gal-item { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--vl-line); background: var(--vl-card); cursor: zoom-in; }
/* The captures are one band of the app at 1800×861 (≈2.09:1). Pinning the ratio keeps the six
   thumbs on one baseline whatever a re-shoot returns; `object-fit` means a capture at a different
   height crops rather than breaking the grid. The `.shot-ph` placeholder rules that lived here
   were deleted with the last placeholder (B1, 2026-08-23) — CSS for a state that no longer exists
   reads as if the state does. */
.gal-item img { display: block; width: 100%; aspect-ratio: 1800 / 861; object-fit: cover; object-position: top; }
.gal-cap { padding: var(--s3) var(--s4); font-size: var(--fs-xs); color: var(--vl-muted); border-block-start: 1px solid var(--vl-line-soft); }

.lightbox {
	position: fixed; inset: 0; z-index: 200; display: none;
	place-content: center; padding: var(--s5);
	background: rgba(0, 0, 0, .88);
}
.lightbox[data-open='1'] { display: grid; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--r-sm); }
.lightbox-x { position: absolute; inset-block-start: var(--s5); inset-inline-end: var(--s5); color: #fff; font-size: 26px; line-height: 1; padding: var(--s2); }

/* ── Packages ─────────────────────────────────────────────────────────────── */
.tiers { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.tier { background: var(--vl-card); border: 1px solid var(--vl-line); border-radius: var(--r-md); padding: var(--s5); }
.tier.feature { border-color: var(--vl-navy); box-shadow: var(--shadow-lift); position: relative; }
.tier.feature::before {
	content: attr(data-tag); position: absolute;
	inset-block-start: -11px; inset-inline-start: var(--s5);
	background: var(--vl-navy); color: #fff;
	font-size: 11px; font-weight: 600; padding: 3px 12px; border-radius: var(--r-pill);
}
.tier h3 { margin-block-end: var(--s1); }
.tier-for { font-size: var(--fs-xs); color: var(--vl-muted); min-height: 34px; }
/* The REAL price (2026-08-21 — the site used to sell a shape the product no longer has). The
   figure is Latin digits like every quote the app renders; the unit line stays muted. */
.tier-price { display: flex; align-items: baseline; gap: 7px; margin-block-start: var(--s2); }
.tier-price strong { font-size: 30px; font-weight: 800; color: var(--vl-ink); letter-spacing: -0.5px; }
.tier-price span { font-size: var(--fs-xs); color: var(--vl-muted); }
.tier .beta-chip { display: inline-block; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; margin-inline-start: 6px; vertical-align: middle; }
/* The commitment ladder — the v7 sheet's four terms as chips under the cards. */
.terms-strip { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-block-start: var(--s5); }
.terms-strip .term-chip { background: var(--vl-card); border: 1px solid var(--vl-line); border-radius: 999px; padding: 7px 14px; font-size: var(--fs-xs); color: var(--vl-slate); }
.terms-strip .term-chip strong { color: var(--vl-navy); font-weight: 800; }
.tier ul { display: grid; gap: var(--s2); margin-block: var(--s4) var(--s5); }
.tier li { display: flex; gap: var(--s2); font-size: var(--fs-sm); color: var(--vl-slate); }
.tier li svg { width: 16px; height: 16px; flex: none; color: var(--vl-navy); margin-block-start: 4px; }
.tier .btn { width: 100%; justify-content: center; }
.price-note { font-size: var(--fs-xs); color: var(--vl-muted); margin-block-start: var(--s5); text-align: center; }
/* Every CTA on the page now goes to /signup (his 2026-08-23 call: self-serve first). This link is
   the ONE remaining route to a human, and it is the one a firm with a desktop database to migrate
   needs — so it has to look like a link. Muted-on-muted made it invisible. */
.price-note a { color: var(--vl-navy); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.price-note a:hover { color: var(--vl-gold-ink); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
	border: 1px solid var(--vl-line); border-radius: var(--r-sm);
	background: var(--vl-card); margin-block-end: var(--s2);
}
.faq summary {
	list-style: none; cursor: pointer; padding: var(--s4) var(--s5);
	font-weight: 600; font-size: var(--fs-sm);
	display: flex; align-items: center; gap: var(--s3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: '+'; margin-inline-start: auto; font-size: 20px; font-weight: 400;
	color: var(--vl-muted); transition: transform .18s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 var(--s5) var(--s5); font-size: var(--fs-sm); color: var(--vl-slate); }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; gap: var(--s7); grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
.contact-grid > * { min-width: 0; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-ways { display: grid; gap: var(--s3); margin-block-start: var(--s5); }
.way { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border: 1px solid var(--vl-line); border-radius: var(--r-sm); background: var(--vl-card); }
.way svg { width: 20px; height: 20px; flex: none; color: var(--vl-navy); }
.way > span { min-width: 0; }
.way b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.way span { font-size: var(--fs-xs); color: var(--vl-muted); }
/* An email address is one unbreakable token. Without this it sets the minimum width of
   whatever contains it — which is exactly how the contact grid blew out at 360px.
   `isolate` is correct HERE (a whole standalone value), and WRONG on a fragment inside a
   word — see RTL-RULES §4 and the app's Highlight.jsx, where it reordered digits. */
.way-num { font-family: var(--font-lat); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }

form.lead-form { background: var(--vl-card); border: 1px solid var(--vl-line); border-radius: var(--r-md); padding: var(--s5); }
.f-row { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-block-end: var(--s3); }
.f label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--vl-slate); margin-block-end: 5px; }
.f input, .f select, .f textarea {
	width: 100%; padding: 11px 13px; border-radius: var(--r-sm);
	border: 1px solid var(--vl-line); background: var(--vl-card); color: var(--vl-ink);
	font-size: var(--fs-sm); transition: border-color .15s ease, box-shadow .15s ease;
}
.f input:focus, .f select:focus, .f textarea:focus {
	outline: none; border-color: var(--vl-navy); box-shadow: 0 0 0 3px var(--vl-focus-ring);
}
.f textarea { min-height: 108px; resize: vertical; }
.f-ltr { direction: ltr; text-align: start; }        /* phone + email: LTR content, RTL alignment */
/* Honeypot. The classic `inset-inline-start: -9999px` is wrong here twice over: it is an
   element 9999px outside the page that only `overflow-x: hidden` is stopping from adding a
   scrollbar, and in RTL it lands on the opposite side from the one you reasoned about.
   The clip-path form occupies 1px and can never overflow anything. */
.hp {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.form-note { font-size: var(--fs-xs); color: var(--vl-muted); margin-block-start: var(--s3); }
.form-msg { margin-block-start: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-size: var(--fs-sm); display: none; }
.form-msg[data-kind='ok'] { display: block; background: #e6f6ec; color: #14572f; }
.form-msg[data-kind='err'] { display: block; background: #fbeaea; color: #8a1414; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-foot { background: var(--vl-chrome); color: #cfd5dd; padding-block: var(--s8) var(--s5); }
.foot-grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-foot h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-block-end: var(--s3); font-weight: 600; }
.site-foot a { font-size: var(--fs-sm); color: #a7b0bb; display: block; padding-block: 4px; }
.site-foot a:hover { color: #fff; }
.foot-bottom {
	margin-block-start: var(--s7); padding-block-start: var(--s4);
	border-block-start: 1px solid rgba(255, 255, 255, .1);
	display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
	font-size: var(--fs-xs); color: #8b949f;
}
.foot-bottom nav { display: flex; gap: var(--s4); margin-inline-start: auto; }
.foot-bottom nav a { display: inline; }

/* ── Scroll reveal ────────────────────────────────────────────────────────── */
/* Opacity + transform only — no layout properties, so nothing reflows. Elements
   start visible and JS opts them in; a browser with JS off shows the whole page. */
.reveal-on .reveal { opacity: 0; transform: translateY(14px); }
.reveal-on .reveal.in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }

/* ── Motion utilities — copied from vision-law-web/src/index.css :104-233 ──── */
@keyframes vl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vl-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes vl-kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }

/* fill-mode MUST be `backwards`, never forwards/both: a forward-filled transform leaves a
   permanent transform on the element, which makes it the containing block for every
   position:fixed descendant. That trap is documented at .vl-page in the app's index.css. */
.vl-page { animation: vl-fade-up .28s var(--ease) backwards; }
.vl-fade-in { animation: vl-fade .18s ease backwards; }
.vl-stagger > * { animation: vl-fade-up .32s var(--ease) backwards; }
.vl-stagger > *:nth-child(2) { animation-delay: 60ms; }
.vl-stagger > *:nth-child(3) { animation-delay: 120ms; }
.vl-stagger > *:nth-child(4) { animation-delay: 180ms; }
.vl-stagger > *:nth-child(5) { animation-delay: 240ms; }
.vl-stagger > *:nth-child(6) { animation-delay: 300ms; }
.vl-stagger > *:nth-child(n + 7) { animation-delay: 340ms; }
.vl-kenburns { animation: vl-kenburns 22s ease-in-out infinite alternate; will-change: transform; }

/* NOTE: the prefers-reduced-motion guard lives at the end of assets/vision-ai.css, which is
   loaded AFTER this file. Do not add a second one here — and read its comment before editing
   it: the blanket rule only CLAMPS duration to 0.01ms, so a running keyframe still beats a
   static declaration. Anything whose end state matters must declare it statically. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal-on .reveal { opacity: 1; transform: none; }
	.vl-kenburns { animation: none; }
}

/* PRINT MUST UNDO THE REVEAL. Nothing scrolls on paper, so every element the observer
   has not reached yet is still at opacity 0 — Ctrl+P produced a page with the headings
   and none of the cards. Found by looking at a full-page screenshot, which fails the
   same way for the same reason. */
@media print {
	.reveal-on .reveal { opacity: 1 !important; transform: none !important; }
	.site-head, .burger, .lightbox, .hero-art, .hero-veil { display: none !important; }
	.hero, .dark, .ai-band { background: #fff !important; color: #000 !important; }
	.dark h1, .dark h2, .dark h3, .hero h1 { color: #000 !important; }
	.dark .lead, .hero .lead, .dark .muted { color: #333 !important; }
	.card, .tier, .num { box-shadow: none !important; break-inside: avoid; }
	section { padding-block: 24px !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
}