/* =====================================================================
   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: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.02em;
}
.lp-brand-mark {
	width: 36px; height: 36px;
	border-radius: 10px;
	background: var(--v2-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.lp-brand .accent { color: var(--v2-blue); }

.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-shrink: 0;
	position: relative;
	z-index: 1;
}
.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: var(--v2-r-3);
	padding: 28px;
	max-width: 460px;
	width: 100%;
	box-shadow: var(--v2-sh-3);
	max-height: calc(100dvh - 64px);
	overflow-y: auto;
	position: relative;
}
/* Header stacks pill above title so the title gets the full row.
   Close button floats absolute in the corner so it never compresses
   the title and behaves identically on narrow phones. */
.lp-modal-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	padding-right: 44px;
}
.lp-modal-head h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.lp-modal-head .v2-badge { flex-shrink: 0; }
.lp-modal [data-modal-close] {
	position: absolute;
	top: 18px;
	right: 18px;
	flex-shrink: 0;
}
.lp-modal-sub {
	color: var(--v2-muted);
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.5;
}
.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);
}

/* 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; }
}