/*
 * UMConvert public landing page. Loaded AFTER app.css: every colour, radius, shadow and component (buttons,
 * badges, cards, the dashboard preview) comes from the panel's design system. Only layout that belongs to a
 * marketing page lives here. No external fonts, images or requests.
 */
html.lp { scroll-behavior: smooth; }

.lp-container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---------------------------------------------------------------- header */
.lp-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--um-bg) 82%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--um-border);
}
.lp-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }
.lp-brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; flex: none; }
.lp-nav { display: flex; align-items: center; gap: 0.25rem; }
.lp-nav a {
	padding: 0.5rem 0.75rem; border-radius: var(--um-radius-md); color: var(--um-text-2);
	text-decoration: none; font-size: 0.875rem; font-weight: 500;
	transition: background var(--um-fast) var(--um-ease), color var(--um-fast) var(--um-ease);
}
.lp-nav a:hover { background: var(--um-surface-2); color: var(--um-text); }
.lp-actions { display: flex; align-items: center; gap: 0.375rem; }

/* ---------------------------------------------------------------- hero */
.lp-hero { position: relative; isolation: isolate; overflow: hidden; padding: 5.5rem 0 4.5rem; text-align: center; }
.lp-hero::before {
	content: ""; position: absolute; z-index: -1; inset: -6rem 0 auto 0; height: 34rem; pointer-events: none;
	background: radial-gradient(48% 62% at 50% 0%, color-mix(in srgb, var(--um-accent) 15%, transparent), transparent 72%);
}
.lp-pill {
	display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem;
	padding: 0.3125rem 0.875rem; border: 1px solid var(--um-border-strong); border-radius: 9999px;
	background: var(--um-surface); color: var(--um-text-2); font-size: 0.75rem; font-weight: 500;
}
.lp-pill-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 9999px; background: var(--um-accent); animation: lp-pulse 2.4s ease-in-out infinite; }
@keyframes lp-pulse { 50% { box-shadow: 0 0 0 0.3125rem color-mix(in srgb, var(--um-accent) 0%, transparent); opacity: 0.55; } }
.lp-h1 {
	max-width: 19ch; margin: 0 auto; font-size: clamp(2.25rem, 1.1rem + 4.6vw, 4.125rem);
	line-height: 1.04; font-weight: 650; letter-spacing: -0.038em; text-wrap: balance;
}
.lp-lede {
	max-width: 41rem; margin: 1.5rem auto 0; color: var(--um-text-2); text-wrap: pretty;
	font-size: clamp(1rem, 0.92rem + 0.45vw, 1.1875rem); line-height: 1.65;
}
.lp-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.25rem; }
.lp-cta-center { margin-top: 1.75rem; }
.um-btn-lg { min-height: 2.875rem; padding: 0 1.375rem; font-size: 0.9375rem; border-radius: var(--um-radius-md); }
.um-btn-lg svg { transition: transform var(--um-fast) var(--um-ease); }
.um-btn-lg:hover svg { transform: translateX(2px); }
.lp-facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem; margin: 2.25rem 0 0; padding: 0; }
.lp-facts li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--um-text-2); font-size: 0.875rem; }
.lp-facts svg { color: var(--um-accent-text); flex: none; }
.lp-note { margin: 1.25rem 0 0; color: var(--um-text-3); font-size: 0.8125rem; }

/* ---------------------------------------------------------------- sections */
.lp-section { padding: 5rem 0; scroll-margin-top: 4rem; }
.lp-section-alt { background: var(--um-surface); border-block: 1px solid var(--um-border); }
.lp-section-head { max-width: 40rem; margin: 0 auto 2.75rem; text-align: center; }
.lp-kicker { margin: 0 0 0.625rem; color: var(--um-accent-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.lp-h2 { margin: 0; font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); line-height: 1.15; font-weight: 650; letter-spacing: -0.028em; text-wrap: balance; }
.lp-sub { margin: 0.875rem 0 0; color: var(--um-text-2); font-size: 1rem; line-height: 1.65; text-wrap: pretty; }
.lp-group { margin: 2.5rem 0 1rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--um-text-3); }
.lp-group:first-of-type { margin-top: 0; }

/* Etapa 20.42: pull-quote (no problema) and the step-flow (como funciona / evolucao dos planos) - both reuse .lp-icon/tokens already defined above, no new colours. */
.lp-quote {
	max-width: 40rem; margin: 2.5rem auto 0; padding-top: 1.75rem; border-top: 1px solid var(--um-border);
	color: var(--um-text); font-size: 1.125rem; font-weight: 550; line-height: 1.5; text-align: center; text-wrap: balance;
}
.lp-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 0.5rem; }
.lp-flow-step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 8.5rem; text-align: center; }
.lp-flow-step .lp-icon { width: 3rem; height: 3rem; }
.lp-flow-label { color: var(--um-text-2); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; }
.lp-flow-arrow { flex: none; color: var(--um-text-3); }
.lp-flow-plans { margin: 0 0 2.25rem; }
.lp-flow-plans .lp-flow-step { width: auto; padding: 0.625rem 1.125rem; border: 1px solid var(--um-border); border-radius: 9999px; background: var(--um-surface); }
.lp-flow-plans .lp-flow-label { color: var(--um-text); font-size: 0.8125rem; line-height: 1.3; }
.lp-flow-plans .lp-flow-label strong { font-size: 0.875rem; }
@media (max-width: 639px) {
	.lp-flow-arrow { transform: rotate(90deg); }
	.lp-flow-plans .lp-flow-arrow { transform: none; }
}

.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lp-card {
	display: flex; flex-direction: column; padding: 1.375rem; border: 1px solid var(--um-border); border-radius: var(--um-radius-lg);
	background: var(--um-surface); box-shadow: var(--um-shadow-sm);
	transition: transform var(--um-base) var(--um-ease), border-color var(--um-base) var(--um-ease), box-shadow var(--um-base) var(--um-ease);
}
.lp-section-alt .lp-card { background: var(--um-bg); }
.lp-card:hover { transform: translateY(-2px); border-color: var(--um-border-strong); box-shadow: var(--um-shadow-md); }
.lp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.lp-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
	border-radius: var(--um-radius-md); background: var(--um-accent-muted); color: var(--um-accent-text);
}
.lp-card-soon .lp-icon { background: var(--um-surface-2); color: var(--um-text-2); border: 1px solid var(--um-border); }
.lp-verb { margin: 1rem 0 0.125rem; color: var(--um-accent-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }
.lp-card-soon .lp-verb { color: var(--um-text-3); }
.lp-card-title { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; }
.lp-card-text { margin: 0.5rem 0 0; color: var(--um-text-2); font-size: 0.875rem; line-height: 1.6; }

/* ---------------------------------------------------------------- dashboard preview (the real panel) */
.lp-frame {
	border: 1px solid var(--um-border-strong); border-radius: calc(var(--um-radius-lg) + 0.125rem);
	background: var(--um-surface); box-shadow: var(--um-shadow-lg); overflow: hidden;
}
.lp-frame-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; background: var(--um-surface-2); border-bottom: 1px solid var(--um-border); }
.lp-dots { display: inline-flex; gap: 0.375rem; }
.lp-dots span { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: var(--um-border-strong); }
.lp-url { flex: 1; max-width: 18rem; margin: 0 auto; padding: 0.1875rem 0.75rem; border-radius: 9999px; background: var(--um-bg); border: 1px solid var(--um-border); color: var(--um-text-3); font-size: 0.6875rem; text-align: center; }
.lp-frame-body { position: relative; max-height: 36rem; overflow: hidden; background: var(--um-bg); }
.lp-frame-body::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 8rem; pointer-events: none;
	background: linear-gradient(to bottom, transparent, var(--um-bg));
}
.lp-preview { min-height: 0; pointer-events: none; user-select: none; }
.lp-preview .um-sidebar { position: static; height: auto; min-height: 36rem; }
.lp-preview .um-header { position: static; }
.lp-preview .um-main { max-width: none; margin: 0; padding: 1.5rem; }
.lp-caption { margin: 1.25rem 0 0; color: var(--um-text-3); font-size: 0.8125rem; text-align: center; }

/* ---------------------------------------------------------------- final call to action */
.lp-final { padding: 2.5rem 0 5.5rem; scroll-margin-top: 4rem; }
.lp-final-card {
	position: relative; overflow: hidden; isolation: isolate; padding: 3.5rem 1.5rem; text-align: center;
	border: 1px solid var(--um-border-strong); border-radius: calc(var(--um-radius-lg) + 0.25rem);
	background: var(--um-surface); box-shadow: var(--um-shadow-md);
}
.lp-final-card::before {
	content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
	background: radial-gradient(55% 90% at 50% 0%, color-mix(in srgb, var(--um-accent) 12%, transparent), transparent 75%);
}
.lp-final-card .lp-sub { max-width: 32rem; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- footer */
.lp-footer { border-top: 1px solid var(--um-border); padding: 2.25rem 0; }
.lp-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.lp-footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.lp-footer-name { margin: 0; font-size: 0.875rem; font-weight: 600; }
.lp-footer-copy { margin: 0.125rem 0 0; color: var(--um-text-3); font-size: 0.75rem; }
.lp-footer-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.lp-footer-nav a { color: var(--um-text-2); font-size: 0.8125rem; text-decoration: none; }
.lp-footer-nav a:hover { color: var(--um-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1023px) {
	.lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.lp-nav { display: none; }
	.lp-preview .um-sidebar { display: none; }
	.lp-section { padding: 4rem 0; }
}
@media (max-width: 639px) {
	.lp-hero { padding: 3.5rem 0 3rem; }
	.lp-grid { grid-template-columns: minmax(0, 1fr); }
	.lp-cta-row .um-btn-lg { width: 100%; }
	.lp-final-card { padding: 2.5rem 1.25rem; }
	.lp-frame-body { max-height: 30rem; }
	.lp-url { display: none; }
}
@media (max-width: 479px) {
	.lp-container { padding: 0 1rem; }
	.lp-header-inner { gap: 0.5rem; }
	.lp-actions { gap: 0.25rem; }
	.lp-actions .um-btn-sm { padding: 0 0.625rem; font-size: 0.75rem; }
}
@media (max-width: 359px) {
	.lp-brand .um-brand-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	html.lp { scroll-behavior: auto; }
	.lp-pill-dot { animation: none; }
	.lp-card:hover { transform: none; }
}

/* Legal pages (Privacy Policy, Terms of Service): long-form prose, same tokens as the rest of the site. */
.lp-legal-hero {
	padding: 3rem 0 1.5rem;
}
.lp-legal-hero .lp-h1 {
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}
.lp-legal-updated {
	margin: 0.875rem 0 0;
	color: var(--um-text-3);
	font-size: 0.875rem;
}
.lp-legal-crosslink {
	margin: 0.375rem 0 0;
	font-size: 0.875rem;
}
.lp-legal-body {
	padding: 0 0 4rem;
}
.lp-legal {
	max-width: 68ch;
	margin: 0 auto;
	color: var(--um-text-2);
	font-size: 0.9375rem;
	line-height: 1.75;
}
.lp-legal h2 {
	margin: 2.5rem 0 0.75rem;
	color: var(--um-text);
	font-size: 1.25rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	scroll-margin-top: 4rem;
}
.lp-legal h2:first-child {
	margin-top: 0;
}
.lp-legal h3 {
	margin: 1.5rem 0 0.5rem;
	color: var(--um-text);
	font-size: 1.0625rem;
	font-weight: 600;
}
.lp-legal p {
	margin: 0 0 1rem;
}
.lp-legal ul {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}
.lp-legal li {
	margin: 0 0 0.5rem;
}
.lp-legal strong {
	color: var(--um-text);
	font-weight: 600;
}
.lp-legal a {
	color: var(--um-accent-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.lp-legal-note {
	margin: 2rem 0 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--um-border);
	border-radius: var(--um-radius-md);
	background: var(--um-surface);
	font-size: 0.875rem;
	color: var(--um-text-2);
}
.lp-footer-company { margin: 0.375rem 0 0; max-width: 46rem; color: var(--um-text-3); font-size: 0.75rem; line-height: 1.5; }
.lp-company { display: grid; gap: 0.5rem; margin: 1rem 0 0; padding: 1rem 1.25rem; border: 1px solid var(--um-border); border-radius: var(--um-radius-md); background: var(--um-surface); }
.lp-company > div { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.lp-company dt { min-width: 7rem; color: var(--um-text-3); font-size: 0.8125rem; }
.lp-company dd { margin: 0; color: var(--um-text); font-size: 0.875rem; }