/* =====================================================================
   Snaproll v2 — landing page CSS
   ---------------------------------------------------------------------
   Only used by frontend/landing-v2.html. All class names prefixed
   .lp- to keep them scoped.

   Loaded after tokens.css + base.css + components.css.
   ===================================================================== */

.lp-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}

/* ── NAV ────────────────────────────────────────────────────────────── */
.lp-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 28px;
	max-width: 1200px;
	margin: 0 auto;
	gap: 16px;
}
.lp-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;            /* prevent the inline-img's font-leading gap */
	flex-shrink: 0;            /* nav is flex w/ space-between; don't let the
	                              right-side actions squeeze the brand on
	                              narrow viewports */
}
/* Rectangular brand lockup. Render at 48px tall, preserve aspect via
   width:auto. `max-width: none` overrides the global `img { max-width: 100% }`
   reset so the brand image keeps its natural width on small viewports. */
.lp-brand-img {
	height: 48px;
	width: auto;
	max-width: none;
	display: block;
}

.lp-nav-links {
	display: flex;
	gap: 28px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--v2-muted);
}
.lp-nav-links a {
	cursor: pointer;
	transition: color 0.15s ease;
}
.lp-nav-links a:hover { color: var(--v2-ink); }
.lp-nav-actions { display: flex; gap: 10px; }

/* ── HERO ───────────────────────────────────────────────────────────── */
.lp-hero {
	padding: 30px 0 70px;
	position: relative;
	overflow: hidden;
}
.lp-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 60px;
	align-items: center;
}
.lp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 6px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--v2-hair);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--v2-ink-2);
	margin-bottom: 22px;
}
.lp-eyebrow .pill {
	background: var(--v2-blue);
	color: #fff;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	font-weight: 700;
	text-transform: uppercase;
}

.lp-h1 {
	font-size: clamp(40px, 5.5vw, 68px);
	line-height: 0.98;
	letter-spacing: -0.04em;
	font-weight: 800;
	margin: 0 0 22px;
	color: var(--v2-ink);
}
.lp-h1 .ink-italic {
	font-family: var(--v2-font-accent);
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.03em;
	color: var(--v2-blue);
}
.lp-lead {
	font-size: 18px;
	color: var(--v2-muted);
	max-width: 480px;
	margin: 0 0 32px;
	line-height: 1.55;
}
.lp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.lp-trust-strip {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 36px;
	color: var(--v2-muted);
	font-size: 13px;
	font-weight: 500;
}
.lp-trust-strip span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.lp-trust-strip .check {
	color: var(--v2-green);
	display: inline-block;
	width: 14px;
	height: 14px;
}

.lp-hero-art {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ── HERO COMPOSITION — paper register + phone + aperture overlay ────
   The visual centrepiece. Rotated paper register behind, tilted phone
   mockup in front, saffron aperture stamp top-left, ink "live status"
   pill bottom-right.

   Pure HTML/CSS — no images. The "phone" is a real div with the
   mock app UI inline.
*/
.lp-hero-art-frame {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 1 / 1.05;
}

.lp-paper-register {
	position: absolute;
	top: 20px; left: 0;
	width: 62%;
	aspect-ratio: 3 / 4;
	background: linear-gradient(180deg, #F4ECDC 0%, #E8DFC6 100%);
	border-radius: 8px;
	transform: rotate(-6deg);
	box-shadow: 0 30px 60px rgba(11, 27, 43, 0.18);
	border: 1px solid rgba(11, 27, 43, 0.08);
	overflow: hidden;
	padding: 22px;
}
.lp-paper-header {
	font-family: var(--v2-font-mono);
	font-size: 11px;
	color: var(--v2-ink-2);
	margin-bottom: 10px;
	letter-spacing: 0.05em;
}
.lp-paper-line {
	border-bottom: 1px solid rgba(11, 27, 43, 0.18);
	height: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--v2-font-hand);
	font-size: 14px;
	color: var(--v2-ink-2);
	font-style: italic;
}
.lp-paper-line .n {
	width: 14px;
	font-size: 10px;
	opacity: 0.6;
	font-family: var(--v2-font-mono);
	font-style: normal;
}
.lp-paper-pageno {
	position: absolute;
	bottom: 12px; right: 16px;
	font-size: 10px;
	color: rgba(11, 27, 43, 0.4);
	font-family: var(--v2-font-mono);
}

.lp-aperture-overlay {
	position: absolute;
	left: 10%; top: 10%;
	color: var(--v2-saffron);
	opacity: 0.35;
}

.lp-phone {
	position: absolute;
	right: 0; bottom: 0;
	width: 62%;
	aspect-ratio: 9 / 19.5;
	background: #000;
	border-radius: 32px;
	padding: 8px;
	box-shadow: 0 30px 70px rgba(11, 27, 43, 0.4);
	transform: rotate(4deg);
}
.lp-phone-screen {
	background: var(--v2-canvas);
	border-radius: 26px;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.lp-phone-statusbar {
	padding: 16px 14px 0;
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	font-weight: 700;
}
.lp-phone-notch {
	width: 36px;
	height: 4px;
	background: #000;
	border-radius: 999px;
	margin-top: 4px;
}
.lp-phone-body { padding: 14px 14px 0; }
.lp-phone-meta {
	font-size: 10px;
	color: var(--v2-muted);
	font-family: var(--v2-font-mono);
	margin-bottom: 4px;
}
.lp-phone-title {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 12px;
}
.lp-phone-search {
	background: #fff;
	border: 1px solid var(--v2-hair);
	border-radius: 12px;
	padding: 8px 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--v2-soft);
}
.lp-phone-records {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}
.lp-phone-record {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 8px;
	background: #fff;
	border: 1px solid var(--v2-hair);
	border-radius: 10px;
}
.lp-phone-avatar {
	width: 30px; height: 30px;
	border-radius: 9px;
	background: var(--v2-paper);
	color: var(--v2-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}
.lp-phone-avatar.dark {
	background: var(--v2-ink);
	color: #fff;
}
.lp-phone-record-info { flex: 1; min-width: 0; }
.lp-phone-record-name {
	font-size: 11.5px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lp-phone-record-meta {
	font-size: 9.5px;
	color: var(--v2-muted);
	font-family: var(--v2-font-mono);
}
.lp-phone-pending {
	background: var(--v2-amber-soft);
	color: var(--v2-amber);
	padding: 2px 6px;
	border-radius: 5px;
	font-size: 9px;
	font-weight: 700;
	flex-shrink: 0;
}
.lp-phone-swoosh {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 36px;
	background: linear-gradient(to top, var(--v2-canvas), transparent);
}

.lp-hero-stat {
	position: absolute;
	bottom: 36px; right: -10px;
	background: var(--v2-ink);
	color: #fff;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	box-shadow: 0 18px 40px rgba(11, 27, 43, 0.3);
	display: flex;
	align-items: center;
	gap: 10px;
}
.lp-hero-stat .dot {
	width: 8px;
	height: 8px;
	background: var(--v2-green);
	border-radius: 999px;
	display: inline-block;
}

/* ── SECTION HEADS ──────────────────────────────────────────────────── */
.lp-section-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 36px;
	gap: 32px;
}
.lp-section-head h2 {
	font-size: clamp(28px, 3.6vw, 44px);
	letter-spacing: -0.03em;
	margin: 0;
	font-weight: 800;
	max-width: 600px;
	line-height: 1.05;
}
.lp-h-eyebrow {
	font-family: var(--v2-font-mono);
	font-size: 12px;
	color: var(--v2-blue);
	font-weight: 500;
	margin-bottom: 12px;
	display: block;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ── FEATURE BLOCKS (2x2) ───────────────────────────────────────────── */
.lp-features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.lp-feature {
	padding: 26px;
	border-radius: 22px;
	position: relative;
	overflow: hidden;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #fff;
}
.lp-feature.tone-blue   { background: var(--v2-blue); }
.lp-feature.tone-saffron{ background: linear-gradient(135deg, #F2C28B 0%, #E0832D 100%); }
.lp-feature.tone-ink    { background: var(--v2-ink); }
.lp-feature.tone-green  { background: linear-gradient(135deg, #2BAE7A 0%, #1F8A5B 100%); }
.lp-feature-eyebrow {
	font-family: var(--v2-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}
.lp-feature.tone-ink .lp-feature-eyebrow { color: rgba(255, 255, 255, 0.6); }
.lp-feature h3 {
	font-size: 22px;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}
.lp-feature p {
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 14px;
	line-height: 1.5;
}
.lp-feature.tone-ink p { color: rgba(255, 255, 255, 0.6); }
.lp-feature-accent {
	position: absolute;
	top: 18px; right: 18px;
}
.lp-feature-mini {
	width: 48px; height: 48px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}
.lp-feature-mini.excel-x {
	background: #fff;
	color: var(--v2-green);
	font-weight: 800;
	font-size: 18px;
	box-shadow: 0 6px 14px rgba(11, 27, 43, 0.18);
	border-radius: 12px;
}

/* ── HOW IT WORKS (4 steps on paper background) ─────────────────────── */
.lp-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 36px;
}
.lp-step {
	padding: 22px;
	background: #fff;
	border: 1px solid var(--v2-hair);
	border-radius: var(--v2-r-3);
	position: relative;
	min-height: 220px;
}
.lp-step-img {
	margin-bottom: 12px;
	height: 86px;
	background: #FAF7EE;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid var(--v2-hair);
}
.lp-step .step-num {
	font-family: var(--v2-font-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--v2-blue);
}
.lp-step h3 {
	margin: 14px 0 8px;
	font-size: 17px;
	letter-spacing: -0.015em;
}
.lp-step p {
	margin: 0;
	color: var(--v2-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

/* ── SIGNATURE SECTION (Aperture + portrait card) ───────────────────── */
.lp-signature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.lp-signature-art {
	position: relative;
	height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lp-signature-aperture {
	position: absolute;
	color: var(--v2-blue);
}
.lp-signature-portrait {
	position: absolute;
	width: 180px;
	height: 220px;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(135deg, #B6A48A, #8C7A66);
	box-shadow: 0 30px 60px rgba(11, 27, 43, 0.3);
	display: flex;
	align-items: end;
	justify-content: center;
	padding: 14px;
	color: #fff;
}
.lp-signature-portrait .filename {
	font-size: 11px;
	font-family: var(--v2-font-mono);
	opacity: 0.85;
}
.lp-signature h2 {
	font-size: clamp(28px, 3.8vw, 44px);
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 8px 0 16px;
	font-weight: 800;
}
.lp-signature p {
	color: var(--v2-muted);
	font-size: 16px;
	line-height: 1.55;
	margin: 0;
	max-width: 440px;
}
.lp-signature-stats {
	margin-top: 24px;
	display: flex;
	gap: 18px;
	color: var(--v2-ink-2);
	font-size: 13px;
	font-family: var(--v2-font-mono);
}

/* ── PRICING ────────────────────────────────────────────────────────── */
.lp-pricing-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.lp-price-card {
	padding: 28px;
	border-radius: 22px;
	background: #fff;
	color: var(--v2-ink);
	border: 1px solid var(--v2-hair);
	box-shadow: var(--v2-sh-1);
	position: relative;
}
.lp-price-card.featured {
	background: var(--v2-ink);
	color: #fff;
	border-color: var(--v2-ink);
	box-shadow: 0 30px 60px rgba(11, 27, 43, 0.22);
}
.lp-price-card .featured-pill {
	position: absolute;
	top: 18px; right: 18px;
	background: var(--v2-saffron);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.lp-price-tier {
	font-family: var(--v2-font-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.6;
}
.lp-price-amount {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 12px 0 4px;
}
.lp-price-amount .price {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.03em;
}
.lp-price-amount .sub {
	font-size: 14px;
	opacity: 0.55;
}
.lp-price-records {
	font-size: 13px;
	opacity: 0.65;
}
.lp-price-divider {
	height: 1px;
	background: var(--v2-hair);
	margin: 20px 0;
}
.lp-price-card.featured .lp-price-divider { background: rgba(255, 255, 255, 0.12); }
.lp-price-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lp-price-features li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}
.lp-price-features li .check {
	color: var(--v2-green);
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.lp-price-card.featured .lp-price-features li .check { color: var(--v2-blue); }
.lp-pricing-note {
	margin-top: 16px;
	font-size: 13px;
	color: var(--v2-soft);
	text-align: center;
}

/* ── FINAL CTA STRIP ────────────────────────────────────────────────── */
.lp-cta {
	margin: 40px 0;
	padding: 56px 48px;
	background: var(--v2-ink);
	border-radius: var(--v2-r-4);
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	position: relative;
	overflow: hidden;
}
.lp-cta h2 {
	font-size: clamp(28px, 4vw, 48px);
	margin: 0;
	letter-spacing: -0.03em;
	line-height: 1.04;
	max-width: 640px;
	font-weight: 800;
	color: #fff;
}
.lp-cta h2 .saffron { color: var(--v2-saffron); }
.lp-cta-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;          /* stack when the row can't fit two buttons */
	min-width: 0;             /* don't push the .lp-cta wider than its container */
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
.lp-cta-actions .v2-btn {
	flex: 1 1 auto;           /* let buttons share width when they wrap */
	min-width: 0;
	white-space: nowrap;
}
.lp-cta::after {
	content: "";
	position: absolute;
	right: -120px; top: -120px;
	width: 360px; height: 360px;
	background: radial-gradient(circle, rgba(42, 111, 219, 0.5), transparent 65%);
	pointer-events: none;
}

/* ── ORG STRIP (used-by) ────────────────────────────────────────────── */
.lp-orgs-row {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	padding: 10px 0 40px;
}
.lp-orgs-label {
	font-size: 12px;
	color: var(--v2-soft);
	font-family: var(--v2-font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.lp-orgs-list {
	display: flex;
	gap: 18px;
	flex: 1;
	flex-wrap: wrap;
	color: var(--v2-ink);
	font-weight: 700;
	font-size: 14px;
	opacity: 0.55;
}

/* ── FOOTER ─────────────────────────────────────────────────────────── */
.lp-footer {
	padding: 32px 0 60px;
	text-align: center;
	color: var(--v2-soft);
	font-size: 13px;
}
.lp-footer a {
	color: var(--v2-soft);
	margin: 0 4px;
	cursor: pointer;
}
.lp-footer a:hover { color: var(--v2-ink-2); }

/* ── LEAD MODAL ─────────────────────────────────────────────────────── */
/* One template, two modes (DEMO / REGISTRATION) — toggled by the
   data-mode attribute on the form. Shape mirrors v1's lead modal but
   ported into the v2 design system (tokens, radii, type). The mode pill
   on the header changes the title + submit-label + payload-mode. */
.lp-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(11, 27, 43, 0.5);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	z-index: 100;
	padding: 32px 20px;
	overflow-y: auto;
}
.lp-modal {
	background: #fff;
	border-radius: 22px;
	padding: 28px;
	max-width: 540px;
	width: 100%;
	box-shadow: 0 30px 80px rgba(11, 27, 43, 0.4);
	max-height: calc(100dvh - 64px);
	overflow-y: auto;
	position: relative;
}
/* Header matches .tm-modal-head / .fm-wizard-head pattern:
   eyebrow + title on the left, close button on the right. Same shape
   admins see in the Team / Forms modals so the lead form feels like
   the same product. */
.lp-modal-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 6px;
}
.lp-modal-head-meta { flex: 1; min-width: 0; }
.lp-modal-eyebrow {
	font-family: var(--v2-font-mono);
	font-size: 11px;
	color: var(--v2-blue);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 4px;
	font-weight: 600;
}
.lp-modal-head h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--v2-ink);
}
.lp-modal-close { color: var(--v2-muted); }
.lp-modal-sub {
	color: var(--v2-muted);
	margin: 0 0 22px;
	font-size: 13.5px;
	line-height: 1.55;
}
.lp-modal-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Per-field wrapper. Combines v2-field semantics with v1 lead-field
   validation/state hooks. Error message only shown when .invalid. */
.lp-modal .lead-field { display: block; }
.lp-modal .lead-field .v2-field-label { margin-bottom: 6px; }
.lp-modal .lead-field textarea.v2-input {
	resize: vertical;
	min-height: 78px;
	font-family: inherit;
	line-height: 1.5;
}
.lp-modal .lead-field.invalid .v2-input,
.lp-modal .lead-field.invalid .verify-primary-input {
	border-color: var(--v2-red);
	box-shadow: 0 0 0 4px rgba(200, 52, 31, 0.14);
}
.lp-modal .lead-err {
	display: none;
	color: var(--v2-red);
	font-size: 12.5px;
	margin-top: 5px;
}
.lp-modal .lead-field.invalid .lead-err { display: block; }

/* Verify row: primary input + OTP input (swap) + send/confirm button.
   Single-row layout that keeps the button anchored to the right while
   the input swaps between the user's email/phone and the 6-digit code. */
.lp-modal .verify-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.lp-modal .verify-row .verify-primary-input,
.lp-modal .verify-row .verify-otp-input {
	flex: 1 1 auto;
	min-width: 0;
}
.lp-modal .verify-btn {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--v2-blue);
	background: #fff;
	color: var(--v2-blue);
	border-radius: var(--v2-r-2);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lp-modal .verify-btn:hover:not(:disabled) {
	background: var(--v2-blue);
	color: #fff;
}
/* Disabled = fully inert: warm-hair border on paper, soft-grey icon stroke.
   Previously this was `opacity: 0.55` over the active blue border, which
   read as "half-broken blue button" rather than "feature not available
   yet." The phone OTP button uses this state today (SMS coming in PR #10);
   the new look makes it obvious that it's not interactive. */
.lp-modal .verify-btn:disabled {
	border-color: var(--v2-hair);
	background: var(--v2-paper);
	color: var(--v2-soft);
	cursor: not-allowed;
}
.lp-modal .verify-btn:disabled:hover {
	background: var(--v2-paper);
	color: var(--v2-soft);
}
.lp-modal .verify-btn svg { width: 20px; height: 20px; display: block; }

/* Tooltip for disabled mobile-OTP button. PR #10 will activate it. */
.lp-modal .verify-btn[data-disabled-reason] { position: relative; }
.lp-modal .verify-btn[data-disabled-reason]:hover::after {
	content: attr(data-disabled-reason);
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	background: var(--v2-ink);
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 500;
	white-space: nowrap;
	z-index: 10;
	pointer-events: none;
}

/* Spinner — rotates the button's SVG while sending/verifying. */
@keyframes lp-verify-spin { to { transform: rotate(360deg); } }
.lp-modal .lead-field[data-state="sending"] .verify-btn svg,
.lp-modal .lead-field[data-state="verifying"] .verify-btn svg {
	animation: lp-verify-spin 0.8s linear infinite;
}
.lp-modal .lead-field[data-state="sending"] .verify-btn,
.lp-modal .lead-field[data-state="verifying"] .verify-btn {
	opacity: 0.7;
	cursor: wait;
}

/* Verified state — green pill button, soft-green input, "Change" link. */
.lp-modal .lead-field[data-state="verified"] .verify-btn {
	background: var(--v2-green-soft);
	border-color: var(--v2-green);
	color: var(--v2-green);
	cursor: default;
	pointer-events: none;
}
.lp-modal .lead-field[data-state="verified"] .verify-primary-input {
	background: var(--v2-green-soft);
	color: var(--v2-green);
	border: 1px solid var(--v2-green);
}
/* Browser autofill (email + tel inputs are common targets) sets a
   `-webkit-autofill` state that wins over plain `background` rules.
   The 1000px inner box-shadow trick is the canonical workaround so the
   verified-green still shows through Chrome / Safari autofill. */
.lp-modal .lead-field[data-state="verified"] .verify-primary-input:-webkit-autofill,
.lp-modal .lead-field[data-state="verified"] .verify-primary-input:-webkit-autofill:hover,
.lp-modal .lead-field[data-state="verified"] .verify-primary-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--v2-green);
	-webkit-box-shadow: 0 0 0 1000px var(--v2-green-soft) inset;
	border-color: var(--v2-green);
	caret-color: var(--v2-green);
}

/* Input swap by state. Default + verified + error + sending: primary
   visible, OTP hidden. awaiting_otp + verifying: OTP visible, primary
   hidden. The OTP input uses mono digits, centered. */
.lp-modal .verify-otp-input {
	display: none;
	padding: 12px 14px;
	border: 1px solid var(--v2-hair);
	border-radius: var(--v2-r-2);
	font-size: 16px;
	font-family: var(--v2-font-mono);
	letter-spacing: 0.18em;
	color: var(--v2-ink);
	background: #fbfcfe;
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.lp-modal .verify-otp-input:focus {
	outline: none;
	border-color: var(--v2-blue);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(42, 111, 219, 0.14);
}
.lp-modal .lead-field[data-state="awaiting_otp"] .verify-primary-input,
.lp-modal .lead-field[data-state="verifying"]    .verify-primary-input { display: none; }
.lp-modal .lead-field[data-state="awaiting_otp"] .verify-otp-input,
.lp-modal .lead-field[data-state="verifying"]    .verify-otp-input { display: block; }

/* Meta line — "Sent to user@x.com · Cancel" or "Verified · Change". */
.lp-modal .verify-meta {
	display: none;
	font-size: 12.5px;
	color: var(--v2-soft);
	margin-top: 6px;
}
.lp-modal .lead-field[data-state="awaiting_otp"] .verify-meta { display: block; }
.lp-modal .lead-field[data-state="verified"]     .verify-meta {
	display: block;
	color: var(--v2-green);
}
.lp-modal .verify-meta .verify-cancel {
	color: var(--v2-blue);
	cursor: pointer;
	text-decoration: underline;
	margin-left: 4px;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
}

/* Verify-row server error (separate from per-field validation message). */
.lp-modal .verify-error {
	display: none;
	color: var(--v2-red);
	font-size: 12.5px;
	margin-top: 5px;
}
.lp-modal .lead-field[data-state="error"] .verify-error { display: block; }

/* Submit + action row. */
.lp-modal-actions {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lp-modal-actions .v2-btn:disabled { cursor: not-allowed; }
.lp-modal-hint {
	text-align: center;
	font-size: 12px;
	color: var(--v2-soft);
	margin: 0;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
	.lp-pricing-grid { grid-template-columns: repeat(2, 1fr); }
	.lp-steps        { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.lp-hero-grid    { grid-template-columns: 1fr; gap: 40px; }
	.lp-signature    { grid-template-columns: 1fr; }
	.lp-signature-art{ height: 280px; }
	.lp-features-grid{ grid-template-columns: 1fr; }
	.lp-cta {
		flex-direction: column;
		align-items: stretch;
		padding: 36px 28px;
	}
	.lp-nav-links { display: none; }
}
@media (max-width: 600px) {
	.lp-wrap          { padding: 0 20px; }
	.lp-nav           { padding: 18px 20px; }
	.lp-hero          { padding: 20px 0 50px; }
	.lp-pricing-grid  { grid-template-columns: 1fr; }
	.lp-steps         { grid-template-columns: 1fr; }
	.lp-section-head  { flex-direction: column; align-items: start; }
	.lp-hero-stat     { right: 0; }
	/* Final-CTA buttons: stack vertically on narrow screens so neither
	   "Try free for 7 days" nor "Book a demo" overflows the dark card. */
	.lp-cta-actions   { flex-direction: column; }
	.lp-cta-actions .v2-btn { width: 100%; }
}