chico y gris,
"es lo que nos diferencia" según Cris -- ahora destacada con color e ícono). */
.differentiator-note {
display: flex; gap: 14px; align-items: flex-start;
background: linear-gradient(165deg, rgba(34,211,238,0.16), rgba(99,102,241,0.1));
border-radius: var(--radius); padding: 18px 22px; margin: 0 0 24px;
box-shadow: inset 0 0 0 1px rgba(99,102,241,0.22);
}
.differentiator-note .icon { color: var(--indigo); width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.differentiator-note p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink); font-weight: 500; }
.differentiator-note code { font-family: var(--font-mono); font-size: 12.5px; background: rgba(255,255,255,0.75); color: var(--indigo-2); padding: 1px 7px; border-radius: 5px; font-weight: 700; }
/* "Por qué debería funcionar" (29-jul-2026, pedido explícito: el diagnóstico ya explica
por qué funcionó el original, esto es el equivalente para la redacción nueva). */
.why-it-works-note {
display: flex; gap: 14px; align-items: flex-start;
background: linear-gradient(165deg, rgba(245,158,11,0.14), rgba(236,72,153,0.07));
border-radius: var(--radius); padding: 18px 22px; margin-top: 22px;
box-shadow: inset 0 0 0 1px rgba(245,158,11,0.22);
}
.why-it-works-note .icon { color: var(--amber-2); width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.why-it-works-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-2); margin: 0 0 6px; font-weight: 700; }
.why-it-works-note p:last-child { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.6; }
.hooks-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.hook-card { background: var(--card); border: none; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--neu-raised-sm); }
.hook-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--indigo-2); }
.hook-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.hook-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-soft); border: none; box-shadow: var(--neu-pressed); }
.hook-card p { margin: 0; font-size: 14.5px; color: var(--ink); }
.script-block { background: var(--card); border: none; border-radius: var(--radius); padding: 22px 26px; margin-bottom: 14px; box-shadow: var(--neu-raised); }
.script-block h3 { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0; font-weight: 600; }
.script-block pre { white-space: pre-wrap; font-family: var(--font-body); font-size: 15.5px; color: var(--ink); margin: 0; line-height: 1.7; }
.script-block-header, .hook-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hook-card-header .hook-title { margin: 0; }
.copy-btn {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--ink-faint); background: var(--card); border: none;
border-radius: var(--radius-pill); padding: 5px 12px; cursor: pointer;
box-shadow: var(--neu-raised-sm); transition: color 0.15s, box-shadow 0.15s;
}
.copy-btn:hover { color: var(--ink); }
.copy-btn:active { box-shadow: var(--neu-pressed); }
.copy-btn .icon { width: 13px; height: 13px; }
.copy-btn.copied { color: #16a34a; box-shadow: var(--neu-pressed); background: rgba(22,163,74,0.08); }
/* ---------- guion técnico: tarjetas por beat (29-jul-2026) ---------- */
.script-block-botones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.beats-list { display: flex; flex-direction: column; gap: 14px; }
.beat-card { display: flex; flex-direction: column; gap: 10px; }
.beat-card:not(:last-child) { padding-bottom: 14px; border-bottom: 1px dashed var(--line-soft); }
.beat-visual-chip {
display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
font-family: var(--font-mono); font-size: 11.5px; color: var(--violet-2);
background: rgba(139,92,246,0.08); border-radius: var(--radius-pill); padding: 5px 12px 5px 10px;
}
.beat-visual-chip .icon { width: 13px; height: 13px; flex-shrink: 0; }
.beat-duracion { color: var(--ink-faint); border-left: 1px solid rgba(139,92,246,0.25); padding-left: 7px; margin-left: 2px; }
.beat-audio { font-family: var(--font-body); font-size: 15.5px; color: var(--ink); margin: 0; line-height: 1.7; white-space: pre-wrap; }
/* "Dolor del avatar" (29-jul-2026): sección de acordeón propia -- antes vivía como
nota al pie dentro del bloque de redacción, ahora con su propio color/mascota. */
.origin-note-caption { margin: 0 0 8px; font-size: 12px; color: var(--ink-faint); }
.dolor-avatar-texto { margin: 0; font-size: 14.5px; color: var(--ink-soft); font-style: italic; line-height: 1.65; }
/* ---------- navegación ---------- */
.nav-back {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2);
color: var(--paper); font-family: var(--font-mono); font-size: 13px;
padding: 10px 18px; border-radius: var(--radius-pill); margin-bottom: 20px;
}
.nav-back:hover { border-color: var(--cyan); color: var(--cyan); text-decoration: none; }
.nav-back.nav-back-bottom { margin: 40px 0 0; }
/* ---------- módulo de Anuncios (29-jul-2026) ---------- */
.ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
/* Mismo bug ya documentado arriba para .mascota (28-jul-2026): una regla de autor con
display (esta misma) le gana en la cascada al [hidden] del navegador aunque
compartan especificidad -- sin esto, "grid.hidden = true" en anuncios_resultados.html
no ocultaba nada, dejando los botones de todas las tarjetas habilitados a la vez. */
.ads-grid[hidden] { display: none; }
.ad-card {
position: relative; display: flex; flex-direction: column; gap: 8px;
background: var(--card); border-radius: var(--radius); padding: 16px;
box-shadow: var(--neu-raised);
}
.ad-card-ganador { box-shadow: var(--neu-raised), 0 0 0 2px var(--amber); }
.ad-card-badge {
position: absolute; top: 10px; left: 10px; z-index: 1;
background: var(--grad-retencion); color: #fff; font-family: var(--font-mono);
font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
padding: 4px 10px; border-radius: var(--radius-pill); box-shadow: 0 6px 14px -4px rgba(245,158,11,0.6);
}
.ad-card-media {
/* 30-jul-2026, pedido explícito de Cris: los anuncios reales de este formato son
verticales (Reels/TikTok) -- 4:3 los recortaba mal, 9:16 respeta cómo se ven de
verdad en la plataforma. */
aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: var(--surface-2);
display: flex; align-items: center; justify-content: center;
}
.ad-card-media video, .ad-card-media img { width: 100%; height: 100%; object-fit: cover; }
.ad-card-media-vacia { color: var(--ink-faint); }
.ad-card-media-vacia .icon { width: 30px; height: 30px; }
.ad-card-page { margin: 0; font-weight: 700; font-size: 14px; color: var(--ink); }
.ad-card-titulo { margin: 0; font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ad-card-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.ad-card-meta span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }
.ad-card-meta .icon { width: 12px; height: 12px; }
/* Escalafón de "días activo" (30-jul-2026, pedido de Cris): gris <60, naranja 60-99,
verde 100-499, dorado 500+ -- mientras más tiempo lleva corriendo un anuncio
comercial, más fuerte la señal de que funciona (Meta no expone métricas reales). */
.ad-card-dias { font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); }
.ad-card-dias-gris { color: var(--ink-faint); background: var(--surface-2); }
.ad-card-dias-naranja { color: #9a5b12; background: rgba(217,119,6,0.16); }
.ad-card-dias-verde { color: #15803d; background: rgba(22,163,74,0.16); }
.ad-card-dias-oro { color: #92660a; background: rgba(217,164,6,0.22); }
.ad-card-boton { width: 100%; padding: 10px 14px; font-size: 13px; margin-top: 4px; }
/* ---------- Bóveda de Creadores (30-jul-2026) ---------- */
.boveda-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.boveda-filtro {
font-family: var(--font-mono); font-size: 12px; color: var(--paper);
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
padding: 7px 14px; border-radius: var(--radius-pill); text-decoration: none;
}
.boveda-filtro:hover { border-color: var(--cyan); color: var(--cyan); }
.boveda-filtro.is-active { background: var(--grad-primary); color: #fff; border-color: transparent; }
.boveda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.boveda-card { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--neu-raised); display: flex; flex-direction: column; gap: 8px; }
.boveda-card-nicho { margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--indigo-2); }
.boveda-card-nombre { margin: 0; font-weight: 700; font-size: 15px; color: var(--ink); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.boveda-card-handle { color: var(--cyan-2); font-family: var(--font-mono); font-size: 13px; }
.boveda-card-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.boveda-card-meta span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); background: var(--surface-2); padding: 2px 8px; border-radius: var(--radius-pill); }
.boveda-card-resena { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.boveda-card-encabezado { display: flex; align-items: center; gap: 12px; }
.boveda-card-foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--neu-raised-sm); }
.boveda-card-foto-vacia {
display: flex; align-items: center; justify-content: center; background: var(--grad-primary);
color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
.boveda-card-encabezado .boveda-card-nicho { margin-bottom: 2px; }
.boveda-card-redes { display: flex; gap: 8px; flex-wrap: wrap; }
.boveda-card-redes a {
display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-soft);
background: var(--surface-2); padding: 4px 10px; border-radius: var(--radius-pill); transition: color 0.15s, background 0.15s;
}
.boveda-card-redes a .icon { width: 13px; height: 13px; }
.boveda-card-redes a:hover { color: var(--indigo-2); background: rgba(99,102,241,0.12); }
.boveda-card-sin-enlace { color: var(--ink-faint); font-style: italic; }
/* ---------- login ---------- */
/* Bug real encontrado por Cris el 1-ago-2026: display:flex en el body sin
justify-content dejaba la tarjeta pegada a la izquierda, y como el footer vive al
mismo nivel que .login-wrap (no anidado dentro), quedaba a un lado en vez de debajo.
flex-direction:column en el body + flex:1 en .login-wrap centra la tarjeta en el
espacio disponible y deja el footer asentado naturalmente después, no flotando. */
body.login-body { display: flex; flex-direction: column; min-height: 100vh; }
.login-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 400px;
margin: 0 auto;
padding: 22px;
}
.login-mark { text-align: center; margin-bottom: 30px; }
.login-mark .mark { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; color: var(--paper); }
.login-mark .mark .dot { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-mark p { color: rgba(238,241,246,0.4); font-size: 12.5px; font-family: var(--font-mono); margin-top: 8px; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 620px) {
.hooks-row { grid-template-columns: 1fr; }
.objetivo-grid { grid-template-columns: 1fr; }
.panel, .card { padding: 24px; }
}
/* ---------- landing prototipo alta conversion (31-jul-2026) ----------
Nueva pagina publica centrada en el diferencial real de Emulo: analiza lo visual
del video/imagen ademas del guion. Prefijo .lpv- para convivir con la landing
anterior mientras se pule el prototipo. */
.lpv-body {
background:
radial-gradient(ellipse 820px 520px at 18% 10%, rgba(34, 211, 238, 0.16), transparent 62%),
radial-gradient(ellipse 760px 560px at 78% 18%, rgba(245, 158, 11, 0.12), transparent 62%),
radial-gradient(ellipse 900px 700px at 70% 90%, rgba(139, 92, 246, 0.18), transparent 65%),
linear-gradient(155deg, #0c1222 0%, #070a13 46%, #04060b 100%);
color: var(--paper);
}
.lpv-nav {
max-width: 1180px;
margin: 0 auto;
padding: 22px 24px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
}
.lpv-brand {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
color: var(--paper);
letter-spacing: 0;
}
.lpv-brand span {
background: var(--grad-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lpv-nav-links {
display: flex;
align-items: center;
gap: 10px;
}
.lpv-nav-links a {
color: rgba(238, 241, 246, 0.62);
font-size: 13px;
font-weight: 700;
padding: 10px 14px;
border-radius: var(--radius-pill);
}
.lpv-nav-links a:hover,
.lpv-nav-links .lpv-nav-login {
color: var(--paper);
background: rgba(255, 255, 255, 0.07);
box-shadow: inset 0 0 0 1px rgba(238, 241, 246, 0.14);
}
.lpv-hero,
.lpv-pain,
.lpv-visual-diff,
.lpv-ads,
.lpv-audience,
.lpv-how,
.lpv-demo,
.lpv-vs,
.lpv-offer,
.lpv-pricing,
.lpv-faq,
.lpv-final {
max-width: 1180px;
margin: 0 auto;
padding: 72px 24px;
}
.lpv-hero {
min-height: calc(100vh - 78px);
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
align-items: center;
gap: 46px;
padding-top: 42px;
}
.lpv-pill,
.lpv-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 18px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--cyan);
}
.lpv-pill {
padding: 8px 14px;
border-radius: var(--radius-pill);
background: rgba(34, 211, 238, 0.1);
box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.22);
}
.lpv-hero h1 {
max-width: 11.4ch;
margin: 0 0 24px;
font-family: var(--font-display);
font-size: clamp(44px, 7vw, 82px);
line-height: 0.97;
font-weight: 800;
color: var(--paper);
letter-spacing: 0;
text-wrap: balance;
text-shadow: 0 0 58px rgba(34, 211, 238, 0.18);
}
.lpv-subhead {
max-width: 61ch;
margin: 0 0 30px;
color: rgba(238, 241, 246, 0.68);
font-size: 18px;
line-height: 1.62;
}
.lpv-cta-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 18px;
}
.lpv-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 52px;
padding: 14px 24px;
border-radius: var(--radius-pill);
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lpv-cta-primary {
background: var(--grad-primary);
color: #fff;
box-shadow: 0 22px 44px -18px rgba(34, 211, 238, 0.72), inset 0 1px 0 rgba(255,255,255,0.45);
}
.lpv-cta-secondary {
color: var(--paper);
background: rgba(255,255,255,0.065);
box-shadow: inset 0 0 0 1px rgba(238, 241, 246, 0.16);
}
.lpv-cta:hover {
transform: translateY(-2px);
}
.lpv-proof-note {
max-width: 58ch;
margin: 0;
color: rgba(238, 241, 246, 0.42);
font-size: 13px;
}
.lpv-hero-stage {
position: relative;
min-height: 610px;
display: flex;
align-items: center;
justify-content: center;
}
.lpv-mascot {
animation: mascota-flotar 4.2s ease-in-out infinite;
}
.lpv-mascot-hero {
position: absolute;
top: 18px;
left: 22px;
z-index: 5;
width: 190px;
height: 190px;
}
.lpv-phone {
position: relative;
width: min(100%, 390px);
padding: 22px;
border-radius: 42px;
background: linear-gradient(145deg, rgba(239, 243, 249, 0.96), rgba(202, 213, 230, 0.84));
box-shadow:
18px 18px 46px rgba(0,0,0,0.48),
-12px -12px 30px rgba(255,255,255,0.08),
inset 7px 7px 16px rgba(32,26,46,0.15),
inset -7px -7px 16px rgba(255,255,255,0.72);
}
.lpv-video-card {
min-height: 515px;
border-radius: 30px;
background: linear-gradient(160deg, #f8fbff, #dbe3ef);
padding: 18px;
box-shadow:
inset 8px 8px 18px rgba(32,26,46,0.16),
inset -8px -8px 18px rgba(255,255,255,0.84);
}
.lpv-video-top {
display: flex;
gap: 7px;
margin-bottom: 16px;
}
.lpv-video-top span {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(32, 26, 46, 0.22);
}
.lpv-video-frame {
min-height: 330px;
border-radius: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
color: #fff;
background:
linear-gradient(180deg, rgba(10, 14, 26, 0.18), rgba(10, 14, 26, 0.72)),
linear-gradient(135deg, #2b6cb0, #21c6d6 42%, #f59e0b);
overflow: hidden;
}
.lpv-play {
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
box-shadow: inset 4px 4px 10px rgba(0,0,0,0.16), inset -4px -4px 10px rgba(255,255,255,0.26);
}
.lpv-play .icon {
width: 32px;
height: 32px;
}
.lpv-video-frame p {
margin: 0;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lpv-detection-row {
display: grid;
gap: 10px;
margin-top: 16px;
}
.lpv-detection-row span {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 14px;
border-radius: 16px;
color: var(--ink);
font-size: 13px;
font-weight: 800;
background: linear-gradient(145deg, #f9fbff, #dce5f0);
box-shadow: 5px 5px 12px rgba(32,26,46,0.14), -5px -5px 12px rgba(255,255,255,0.72);
}
.lpv-floating-card {
position: absolute;
z-index: 6;
max-width: 220px;
padding: 14px 16px;
border-radius: 18px;
background: rgba(248, 251, 255, 0.94);
color: var(--ink-soft);
font-size: 13px;
line-height: 1.4;
box-shadow: 12px 12px 26px rgba(0,0,0,0.28), -8px -8px 18px rgba(255,255,255,0.08);
}
.lpv-floating-card strong {
color: var(--ink);
}
.lpv-floating-card-a {
right: 4px;
top: 128px;
}
.lpv-floating-card-b {
left: 10px;
bottom: 78px;
}
.lpv-floating-card-c {
right: 18px;
bottom: 18px;
}
.lpv-section-head {
max-width: 780px;
margin: 0 auto 38px;
text-align: center;
}
.lpv-section-head h2,
.lpv-visual-copy h2,
.lpv-demo-copy h2,
.lpv-final h2 {
margin: 0 0 16px;
font-family: var(--font-display);
font-size: clamp(30px, 4.4vw, 48px);
line-height: 1.06;
font-weight: 800;
color: var(--paper);
letter-spacing: 0;
text-wrap: balance;
}
.lpv-section-head h2 span,
.lpv-visual-copy h2 span,
.lpv-demo-copy h2 span,
.lpv-final h2 span,
.lpv-hero-simple h1 span,
.lpv-meet-title span {
position: relative;
display: inline-block;
color: #fff;
text-shadow: 0 0 30px rgba(47, 203, 239, 0.22);
}
.lpv-section-head h2 span::after,
.lpv-visual-copy h2 span::after,
.lpv-demo-copy h2 span::after,
.lpv-final h2 span::after,
.lpv-hero-simple h1 span::after,
.lpv-meet-title span::after {
content: "";
position: absolute;
left: 0.02em;
right: 0.02em;
bottom: 0.04em;
height: 0.18em;
border-radius: 999px;
background: linear-gradient(90deg, rgba(47, 203, 239, 0.86), rgba(239, 47, 177, 0.72));
opacity: 0.78;
z-index: -1;
}
.lpv-section-head p:not(.lpv-kicker) {
max-width: 60ch;
margin: 0 auto;
color: rgba(238, 241, 246, 0.58);
}
.lpv-pain-grid,
.lpv-steps,
.lpv-pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.lpv-pain-grid article,
.lpv-steps article,
.lpv-plan,
.lpv-visual-panel,
.lpv-demo-panel {
background: var(--card);
color: var(--ink);
border: 1px solid var(--card-border);
border-radius: 22px;
box-shadow: var(--card-shadow);
}
.lpv-pain-grid article,
.lpv-steps article {
padding: 28px;
}
.lpv-pain-grid article > span,
.lpv-step-number {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
margin-bottom: 18px;
background: var(--grad-primary);
color: #fff;
font-family: var(--font-display);
font-weight: 800;
box-shadow: var(--neu-raised-sm);
}
.lpv-pain-grid h3,
.lpv-steps h3,
.lpv-plan h3,
.lpv-demo-output h3 {
margin: 0 0 9px;
font-family: var(--font-display);
font-size: 20px;
color: var(--ink);
line-height: 1.12;
}
.lpv-pain-grid p,
.lpv-steps p,
.lpv-plan-desc,
.lpv-demo-output p,
.lpv-visual-panel li,
.lpv-faq details p {
margin: 0;
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.62;
}
.lpv-visual-diff,
.lpv-demo {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
align-items: center;
gap: 28px;
}
.lpv-how-flow {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr) minmax(0, 1fr);
gap: 20px;
align-items: stretch;
max-width: 1120px;
margin: 0 auto;
}
.lpv-how-inputs,
.lpv-how-output {
display: grid;
gap: 16px;
}
.lpv-how-flow article,
.lpv-how-core {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
background:
radial-gradient(circle at 100% 0%, rgba(47, 203, 239, 0.13), transparent 38%),
linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
box-shadow: 18px 18px 40px rgba(0, 0, 0, 0.22), inset 1px 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
}
.lpv-how-flow article {
padding: 24px;
}
.lpv-how-core {
display: grid;
place-items: center;
align-content: center;
gap: 12px;
padding: 24px 18px;
text-align: center;
}
.lpv-how-core img {
width: 142px;
height: 142px;
filter: drop-shadow(0 20px 32px rgba(98, 83, 255, 0.3));
}
.lpv-how-core strong,
.lpv-how-core span {
display: block;
}
.lpv-how-core strong {
color: #fff;
font-family: var(--font-display);
font-size: 26px;
line-height: 1.05;
}
.lpv-how-core span {
color: rgba(238, 241, 246, 0.62);
font-size: 14px;
line-height: 1.45;
}
.lpv-how-output article {
min-height: 100%;
background:
radial-gradient(circle at 100% 0%, rgba(47, 203, 239, 0.22), transparent 38%),
radial-gradient(circle at 0% 100%, rgba(98, 83, 255, 0.22), transparent 44%),
linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045));
box-shadow: 18px 18px 40px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(47, 203, 239, 0.28);
}
.lpv-how-variations {
background:
radial-gradient(circle at 100% 0%, rgba(239, 47, 177, 0.18), transparent 40%),
radial-gradient(circle at 0% 100%, rgba(47, 203, 239, 0.22), transparent 46%),
linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)) !important;
}
.lpv-visual-copy p,
.lpv-demo-copy p {
max-width: 58ch;
margin: 0 0 16px;
color: rgba(238, 241, 246, 0.62);
font-size: 16.5px;
line-height: 1.65;
}
.lpv-visual-panel {
position: relative;
padding: 36px 30px 30px;
}
.lpv-mascot-panel {
position: absolute;
top: -64px;
right: 24px;
width: 124px;
height: 124px;
}
.lpv-visual-panel ul,
.lpv-plan ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 14px;
}
.lpv-visual-panel li {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 14px 16px;
border-radius: 16px;
background: var(--surface-2);
box-shadow: var(--neu-raised-sm);
}
.lpv-visual-panel li .icon,
.lpv-plan li .icon {
color: var(--cyan-2);
width: 17px;
height: 17px;
margin-top: 3px;
}
.lpv-ads-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.74fr);
gap: 28px;
align-items: center;
padding: 34px;
border-radius: 24px;
background: var(--card);
color: var(--ink);
box-shadow: var(--card-shadow);
border: 1px solid var(--card-border);
}
.lpv-ads-card h2 {
margin: 0 0 14px;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 42px);
line-height: 1.08;
font-weight: 800;
letter-spacing: 0;
}
.lpv-ads-card p:not(.lpv-kicker) {
margin: 0 0 14px;
color: var(--ink-soft);
font-size: 15.5px;
line-height: 1.65;
}
.lpv-ads-mini {
position: relative;
display: grid;
gap: 12px;
padding: 70px 18px 18px;
border-radius: 20px;
background: linear-gradient(145deg, #f9fbff, #dde7f2);
box-shadow: var(--neu-pressed);
}
.lpv-mascot-ads {
position: absolute;
top: -50px;
right: 18px;
width: 112px;
height: 112px;
}
.lpv-ads-mini span {
display: flex;
align-items: center;
gap: 9px;
padding: 12px 14px;
border-radius: 15px;
background: rgba(255,255,255,0.62);
color: var(--ink);
font-size: 13.5px;
font-weight: 800;
box-shadow: var(--neu-raised-sm);
}
.lpv-ads-mini .icon {
color: var(--cyan-2);
width: 17px;
height: 17px;
}
.lpv-audience-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
max-width: 900px;
margin: 0 auto;
}
.lpv-audience-strip span {
padding: 12px 18px;
border-radius: var(--radius-pill);
color: rgba(238, 241, 246, 0.78);
background: rgba(255,255,255,0.07);
box-shadow: inset 0 0 0 1px rgba(238, 241, 246, 0.13), 8px 8px 20px rgba(0,0,0,0.18);
font-weight: 800;
font-size: 14px;
}
.lpv-demo {
align-items: start;
}
.lpv-mascot-small {
width: 96px;
height: 96px;
margin-top: 10px;
}
.lpv-demo-panel {
padding: 22px;
}
.lpv-demo-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.lpv-demo-tabs span {
padding: 8px 12px;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--ink-soft);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 800;
}
.lpv-demo-tabs span:first-child {
color: #fff;
background: var(--grad-primary);
}
.lpv-demo-output {
padding: 24px;
border-radius: 20px;
background: linear-gradient(145deg, #fbfcff, #dfe7f1);
box-shadow: inset 8px 8px 18px rgba(32,26,46,0.12), inset -8px -8px 18px rgba(255,255,255,0.78);
}
.lpv-output-label,
.lpv-plan-tag {
margin: 0 0 12px;
font-family: var(--font-mono);
color: var(--indigo-2);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.lpv-output-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 18px 0;
}
.lpv-output-grid div {
padding: 14px;
border-radius: 14px;
background: rgba(255,255,255,0.55);
box-shadow: var(--neu-raised-sm);
}
.lpv-output-grid strong,
.lpv-output-grid span {
display: block;
}
.lpv-output-grid strong {
color: var(--ink);
font-size: 12px;
margin-bottom: 4px;
}
.lpv-output-grid span {
color: var(--ink-soft);
font-size: 12px;
line-height: 1.35;
}
.lpv-script-preview {
padding: 16px;
border-radius: 14px;
background: rgba(99,102,241,0.09);
}
.lpv-vs-grid {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 24px;
max-width: 1060px;
margin: 0 auto;
align-items: stretch;
}
.lpv-vs-grid article {
position: relative;
overflow: hidden;
padding: 30px;
border-radius: 22px;
background: var(--card);
color: var(--ink);
box-shadow: var(--card-shadow);
border: 1px solid var(--card-border);
}
.lpv-vs-grid article h3 {
margin: 0 0 20px;
font-family: var(--font-display);
color: var(--ink);
font-size: clamp(25px, 3vw, 34px);
line-height: 1;
}
.lpv-vs-grid ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 13px;
}
.lpv-vs-grid li {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding-left: 0;
color: var(--ink-soft);
font-size: 15.5px;
line-height: 1.55;
}
.lpv-vs-grid li span {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
font-size: 15px;
background: rgba(255, 255, 255, 0.62);
box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.08), inset -3px -3px 8px rgba(255, 255, 255, 0.8);
}
.lpv-vs-label {
display: inline-flex;
align-items: center;
width: max-content;
max-width: 100%;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 900;
}
.lpv-vs-typical {
filter: saturate(0.48);
opacity: 0.82;
}
.lpv-vs-typical::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent 48%);
pointer-events: none;
}
.lpv-vs-typical .lpv-vs-label {
color: #6c6474;
background: rgba(108, 100, 116, 0.12);
}
.lpv-vs-typical h3 {
color: rgba(12, 15, 34, 0.86);
}
.lpv-vs-typical li {
color: rgba(72, 65, 82, 0.78);
}
.lpv-vs-emulo {
min-height: 100%;
border-color: rgba(47, 203, 239, 0.55);
background:
radial-gradient(circle at 88% 10%, rgba(47, 203, 239, 0.22), transparent 34%),
radial-gradient(circle at 13% 92%, rgba(98, 83, 255, 0.18), transparent 34%),
linear-gradient(145deg, #ffffff, #dfeaf4);
box-shadow: var(--card-shadow), 0 0 0 2px rgba(47, 203, 239, 0.95), 0 0 64px rgba(47, 203, 239, 0.24);
transform: translateY(-8px);
}
.lpv-vs-emulo::before {
content: "";
position: absolute;
inset: auto -8% -22% 44%;
height: 52%;
border-radius: 50%;
background: radial-gradient(circle, rgba(98, 83, 255, 0.18), transparent 68%);
}
.lpv-vs-emulo .lpv-vs-label {
color: #0c697b;
background: rgba(47, 203, 239, 0.16);
}
.lpv-vs-emulo h3 {
color: #101326;
font-size: clamp(36px, 5vw, 58px);
}
.lpv-vs-emulo li {
color: #252438;
font-weight: 750;
}
.lpv-vs-emulo li span {
background: linear-gradient(145deg, #38d7ef, #6454ff);
color: #fff;
box-shadow: 0 12px 20px rgba(47, 203, 239, 0.22);
}
.lpv-vs-mascot {
position: absolute;
top: 16px;
right: 18px;
width: 118px;
height: 118px;
opacity: 0.94;
filter: drop-shadow(0 16px 24px rgba(98, 83, 255, 0.26));
animation: lpv-float 5s ease-in-out infinite;
}
.lpv-testimonials {
padding-top: 46px;
background:
radial-gradient(circle at 50% 44%, rgba(47, 203, 239, 0.12), transparent 34%),
radial-gradient(circle at 58% 52%, rgba(98, 83, 255, 0.16), transparent 38%);
}
.lpv-results-scene {
position: relative;
min-height: 760px;
max-width: 1080px;
margin: 44px auto 0;
}
.lpv-results-scene::before {
content: "";
position: absolute;
inset: 7% 12%;
border: 1px dashed rgba(47, 203, 239, 0.24);
border-radius: 50%;
}
.lpv-results-mascot {
position: absolute;
left: 50%;
top: 50%;
width: min(58vw, 560px);
height: auto;
opacity: 0.42;
transform: translate(-50%, -50%);
filter: drop-shadow(0 42px 70px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 42px rgba(98, 83, 255, 0.24));
}
.lpv-result-main,
.lpv-result-card {
position: absolute;
z-index: 1;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.72);
backdrop-filter: blur(18px);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22);
}
.lpv-result-main {
left: 27%;
bottom: 4%;
width: min(470px, 44vw);
padding: 28px;
border-radius: 26px;
color: #fff;
background:
radial-gradient(circle at 95% 0%, rgba(47, 203, 239, 0.22), transparent 36%),
linear-gradient(145deg, rgba(18, 13, 19, 0.95), rgba(40, 28, 57, 0.92));
}
.lpv-result-main span,
.lpv-result-card span {
display: block;
margin-bottom: 10px;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.lpv-result-main span {
color: #ffbc7c;
}
.lpv-result-main strong {
display: block;
max-width: 18ch;
color: #fff;
font-family: var(--font-display);
font-size: clamp(24px, 3.2vw, 36px);
line-height: 1.08;
}
.lpv-result-main p {
margin: 16px 0 0;
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
line-height: 1.45;
}
.lpv-result-card {
width: min(420px, 39vw);
padding: 22px 24px 22px 28px;
border-radius: 24px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(236, 244, 255, 0.86));
}
.lpv-result-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 7px;
background: var(--result-accent, #38d7ef);
}
.lpv-result-card span {
color: var(--result-label, #9a6b48);
}
.lpv-result-card strong {
display: block;
margin-top: 12px;
color: #1d1724;
font-family: var(--font-display);
font-size: clamp(21px, 2.25vw, 28px);
line-height: 1.12;
}
.lpv-result-card p {
margin: 10px 0 0;
color: #5f5a69;
font-size: 15.5px;
line-height: 1.45;
}
.lpv-result-before {
position: relative;
padding: 12px 14px 12px 38px;
border-radius: 16px;
color: #6f6675;
background: rgba(222, 226, 235, 0.72);
font-size: 14.5px;
line-height: 1.4;
}
.lpv-result-before::before {
content: "😵";
position: absolute;
left: 12px;
top: 12px;
}
.lpv-result-a {
left: 2%;
top: 5%;
--result-accent: linear-gradient(180deg, #38d7ef, #6253ff);
--result-label: #0e8092;
}
.lpv-result-b {
right: 1%;
top: 11%;
--result-accent: linear-gradient(180deg, #ff9a59, #ef2fb1);
--result-label: #b55725;
}
.lpv-result-c {
left: 0;
top: 49%;
--result-accent: linear-gradient(180deg, #8b5cf6, #ec4899);
--result-label: #7c3fad;
}
.lpv-result-d {
right: 0;
bottom: 8%;
--result-accent: linear-gradient(180deg, #2fc36f, #22d3ee);
--result-label: #178451;
}
.lpv-offer {
padding-bottom: 28px;
}
.lpv-billing-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: max-content;
max-width: 100%;
margin: 0 auto 42px;
padding: 10px 12px 10px 18px;
border: 1px solid rgba(35, 24, 25, 0.08);
border-radius: 999px;
background: #fff;
box-shadow: 0 12px 30px rgba(35, 24, 25, 0.08);
color: #7a6f6c;
font-weight: 800;
}
.lpv-billing-toggle strong {
position: relative;
color: #211717;
padding-left: 48px;
}
.lpv-billing-toggle strong::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 42px;
height: 24px;
border-radius: 999px;
background: #ef2fb1;
transform: translateY(-50%);
}
.lpv-billing-toggle strong::after {
content: "";
position: absolute;
left: 21px;
top: 50%;
width: 18px;
height: 18px;
border-radius: 999px;
background: #fff;
transform: translateY(-50%);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.lpv-billing-toggle em {
padding: 7px 13px;
border-radius: 999px;
background: #f0eae2;
color: #5d504b;
font-style: normal;
font-size: 13px;
}
.lpv-pricing {
padding-top: 42px;
padding-bottom: 72px;
border-radius: 34px;
background:
radial-gradient(circle at 18% 10%, rgba(47, 203, 239, 0.16), transparent 34%),
radial-gradient(circle at 82% 22%, rgba(98, 83, 255, 0.18), transparent 38%),
linear-gradient(145deg, rgba(18, 13, 19, 0.96), rgba(15, 18, 34, 0.96));
}
.lpv-pricing-grid {
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
align-items: stretch;
gap: 22px;
}
.lpv-plan {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
padding: 30px 24px 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 26px;
background:
radial-gradient(circle at 92% 0%, rgba(47, 203, 239, 0.1), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
color: #eef1f6;
box-shadow: 0 24px 52px rgba(0, 0, 0, 0.26), inset 1px 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(18px);
}
.lpv-plan h3 {
color: #fff;
font-size: 26px;
}
.lpv-plan-desc {
color: rgba(238, 241, 246, 0.66);
font-size: 15px;
line-height: 1.45;
}
.lpv-plan .lpv-plan-tag {
color: #ef2fb1;
}
.lpv-plan li .icon {
color: #2fc36f;
}
.lpv-plan-featured {
border-color: rgba(47, 203, 239, 0.65);
background:
radial-gradient(circle at 94% 0%, rgba(47, 203, 239, 0.22), transparent 38%),
radial-gradient(circle at 0% 100%, rgba(98, 83, 255, 0.2), transparent 42%),
linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32), 0 0 0 2px rgba(47, 203, 239, 0.8), 0 0 56px rgba(47, 203, 239, 0.22);
transform: translateY(-10px);
}
.lpv-plan-no-annual::after {
content: "Solo mensual";
position: absolute;
top: 18px;
right: 18px;
padding: 6px 10px;
border-radius: 999px;
color: #38d7ef;
background: rgba(47, 203, 239, 0.12);
font-family: var(--font-display);
font-size: 11px;
font-weight: 900;
}
.lpv-annual-line {
min-height: 3em;
margin: -6px 0 20px;
color: rgba(238, 241, 246, 0.62);
font-size: 13px;
line-height: 1.45;
font-weight: 700;
}
.lpv-featured-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
padding: 6px 13px;
border-radius: var(--radius-pill);
background: var(--grad-primary);
color: #fff;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.lpv-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 7px;
margin: 18px 0 16px;
}
.lpv-old {
width: 100%;
color: rgba(238, 241, 246, 0.42);
font-family: var(--font-mono);
font-size: 14px;
text-decoration: line-through;
text-align: center;
}
.lpv-price strong {
color: #fff;
font-family: var(--font-display);
font-size: clamp(44px, 6vw, 72px);
line-height: 1;
}
.lpv-price-unit {
color: rgba(238, 241, 246, 0.62);
font-size: 16px;
font-weight: 800;
}
.lpv-price-total {
width: 100%;
margin-top: 6px;
color: #38d7ef;
font-size: 13px;
font-weight: 900;
text-align: center;
}
.lpv-plan li {
display: flex;
gap: 9px;
color: rgba(238, 241, 246, 0.78);
font-size: 14px;
line-height: 1.5;
}
.lpv-plan a {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin-top: auto;
padding: 12px 14px;
border-radius: var(--radius-pill);
color: #fff;
background: rgba(255, 255, 255, 0.1);
font-family: var(--font-display);
font-weight: 800;
box-shadow: none;
}
.lpv-plan-featured a {
color: #fff;
background: var(--grad-primary);
}
.lpv-annual-note {
max-width: 78ch;
margin: 24px auto 0;
text-align: center;
color: rgba(238, 241, 246, 0.56);
font-size: 13px;
}
.lpv-faq-list {
max-width: 780px;
margin: 0 auto;
display: grid;
gap: 12px;
}
.lpv-faq details {
padding: 0 22px;
border-radius: 18px;
background: var(--card);
color: var(--ink);
box-shadow: var(--neu-raised-sm);
}
.lpv-faq summary {
cursor: pointer;
list-style: none;
padding: 19px 0;
font-family: var(--font-display);
font-weight: 800;
color: var(--ink);
display: flex;
justify-content: space-between;
gap: 14px;
}
.lpv-faq summary::-webkit-details-marker {
display: none;
}
.lpv-faq summary::after {
content: "+";
color: var(--indigo-2);
font-size: 20px;
line-height: 1;
}
.lpv-faq details[open] summary::after {
content: "-";
}
.lpv-faq details p {
padding-bottom: 18px;
}
.lpv-final {
text-align: center;
padding-bottom: 26px;
}
.lpv-mascot-final {
width: 132px;
height: 132px;
margin: 0 auto 10px;
}
.lpv-final h2 {
max-width: 14ch;
margin-left: auto;
margin-right: auto;
}
.lpv-final p {
max-width: 55ch;
margin: 0 auto 26px;
color: rgba(238, 241, 246, 0.62);
font-size: 17px;
line-height: 1.6;
}
@media (max-width: 1080px) {
.lpv-pricing-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lpv-plan-featured {
transform: none;
}
}
@media (max-width: 900px) {
.lpv-hero,
.lpv-visual-diff,
.lpv-ads-card,
.lpv-demo {
grid-template-columns: 1fr;
}
.lpv-hero {
min-height: auto;
padding-top: 48px;
}
.lpv-hero h1 {
max-width: 12.5ch;
}
.lpv-hero-stage {
min-height: 560px;
}
.lpv-pain-grid,
.lpv-steps,
.lpv-vs-grid {
grid-template-columns: 1fr;
}
.lpv-vs-emulo {
transform: none;
}
.lpv-vs-mascot {
width: 92px;
height: 92px;
}
.lpv-results-scene {
display: grid;
gap: 14px;
min-height: auto;
}
.lpv-results-scene::before {
inset: 6%;
}
.lpv-results-mascot {
position: relative;
left: auto;
top: auto;
width: min(86vw, 420px);
margin: 0 auto -28px;
opacity: 0.72;
transform: none;
}
.lpv-result-main,
.lpv-result-card {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 100%;
}
}
@media (max-width: 640px) {
.lpv-nav {
align-items: flex-start;
}
.lpv-nav-links {
justify-content: flex-end;
flex-wrap: wrap;
}
.lpv-nav-links a:not(.lpv-nav-login) {
display: none;
}
.lpv-hero,
.lpv-pain,
.lpv-visual-diff,
.lpv-ads,
.lpv-audience,
.lpv-how,
.lpv-video,
.lpv-demo,
.lpv-vs,
.lpv-testimonials,
.lpv-offer,
.lpv-pricing,
.lpv-faq,
.lpv-final {
padding-left: 18px;
padding-right: 18px;
}
.lpv-hero h1 {
font-size: clamp(38px, 14vw, 58px);
}
.lpv-subhead {
font-size: 16px;
}
.lpv-cta {
width: 100%;
}
.lpv-hero-stage {
min-height: 505px;
}
.lpv-mascot-hero {
width: 132px;
height: 132px;
top: -4px;
left: 0;
}
.lpv-phone {
width: 100%;
margin-top: 70px;
padding: 14px;
border-radius: 32px;
}
.lpv-video-card {
min-height: 410px;
border-radius: 24px;
}
.lpv-video-frame {
min-height: 250px;
}
.lpv-floating-card {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
max-width: none;
margin-top: 12px;
}
.lpv-hero-stage {
display: block;
}
.lpv-output-grid,
.lpv-pricing-grid {
grid-template-columns: 1fr;
}
.lpv-visual-panel {
margin-top: 56px;
}
.lpv-ads-card,
.lpv-vs-grid article {
padding: 24px 20px;
}
.lpv-ads-mini {
margin-top: 42px;
}
.lpv-billing-toggle {
width: 100%;
gap: 10px;
justify-content: space-between;
font-size: 14px;
}
.lpv-billing-toggle strong {
padding-left: 44px;
}
.lpv-result-main,
.lpv-result-card {
padding: 20px;
}
.lpv-vs-grid article {
padding: 24px 20px;
}
.lpv-vs-emulo h3 {
max-width: 4.8ch;
}
.lpv-vs-mascot {
top: 18px;
right: 12px;
width: 78px;
height: 78px;
}
}
/* Landing v2 refinements */
.lpv-hero-simple {
min-height: calc(100vh - 92px);
grid-template-columns: minmax(0, 1fr);
place-items: center;
text-align: center;
padding-top: 34px;
padding-bottom: 76px;
}
.lpv-hero-simple .lpv-hero-copy {
max-width: 940px;
margin: 0 auto;
align-items: center;
}
.lpv-mascot-hero-simple {
width: clamp(116px, 14vw, 168px);
height: clamp(116px, 14vw, 168px);
margin: 0 auto 18px;
filter: drop-shadow(0 0 26px rgba(98, 83, 255, 0.46));
animation: lpv-float 4.8s ease-in-out infinite;
}
.lpv-hero-simple .lpv-pill,
.lpv-hero-simple .lpv-cta-row {
justify-content: center;
}
.lpv-hero-simple h1 {
max-width: 13.5ch;
margin-left: auto;
margin-right: auto;
font-size: clamp(48px, 7.5vw, 96px);
line-height: 0.95;
}
.lpv-hero-simple .lpv-subhead {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.lpv-hero-simple .lpv-proof-note {
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
.lpv-meet {
display: grid;
grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.05fr);
align-items: center;
gap: clamp(28px, 5vw, 82px);
}
.lpv-meet-visual {
display: grid;
place-items: center;
min-height: 420px;
border-radius: 34px;
background:
radial-gradient(circle at 50% 58%, rgba(91, 74, 255, 0.2), transparent 42%),
radial-gradient(circle at 50% 74%, rgba(47, 203, 239, 0.13), transparent 32%),
var(--surface);
box-shadow: var(--neu-raised);
overflow: hidden;
}
.lpv-mascot-divine {
width: min(88%, 520px);
height: auto;
object-fit: contain;
filter: drop-shadow(0 34px 48px rgba(0, 0, 0, 0.42));
animation: lpv-float 5.2s ease-in-out infinite;
}
.lpv-meet-copy h2 {
max-width: 12ch;
}
.lpv-meet-copy > p:not(.lpv-kicker) {
max-width: 62ch;
color: rgba(238, 241, 246, 0.64);
font-size: 18px;
line-height: 1.7;
}
.lpv-meet-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 26px;
}
.lpv-meet-grid span {
display: flex;
align-items: center;
gap: 10px;
min-height: 58px;
padding: 14px 16px;
border-radius: 18px;
color: var(--ink);
font-family: var(--font-display);
font-weight: 800;
background: var(--card);
box-shadow: var(--neu-raised-sm);
}
.lpv-ads-visual {
min-width: 0;
}
.lpv-ads-visual img {
display: block;
width: 100%;
max-width: 520px;
margin-left: auto;
border-radius: 28px;
box-shadow: 24px 24px 58px rgba(0, 0, 0, 0.42), -16px -16px 42px rgba(255, 255, 255, 0.035);
}
.lpv-context-mockup {
position: relative;
display: grid;
gap: 16px;
min-width: 0;
padding: 18px;
border-radius: 26px;
background: linear-gradient(145deg, #f7faff, #dfe8f2);
box-shadow: 18px 18px 42px rgba(24, 34, 48, 0.18), -14px -14px 32px rgba(255, 255, 255, 0.8);
}
.lpv-context-inputs {
display: grid;
gap: 12px;
}
.lpv-context-card,
.lpv-context-output {
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: 20px;
background: rgba(248, 251, 255, 0.86);
box-shadow: 8px 8px 20px rgba(24, 34, 48, 0.12), -8px -8px 20px rgba(255, 255, 255, 0.86);
}
.lpv-context-card {
padding: 16px 18px;
}
.lpv-context-card span,
.lpv-context-output p {
display: flex;
align-items: center;
gap: 9px;
color: #14b8d4;
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 900;
text-transform: uppercase;
}
.lpv-context-card strong {
display: block;
margin-top: 8px;
color: #171728;
font-size: 16px;
line-height: 1.35;
}
.lpv-context-arrow {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin: 0 auto;
border-radius: 999px;
color: #fff;
background: var(--grad-primary);
box-shadow: 0 16px 34px rgba(47, 203, 239, 0.22);
transform: rotate(90deg);
}
.lpv-context-output {
position: relative;
padding: 22px;
overflow: hidden;
}
.lpv-context-output::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: var(--grad-primary);
}
.lpv-context-output h3 {
max-width: 20ch;
margin: 10px 0 18px;
color: #171728;
font-size: clamp(24px, 3.1vw, 34px);
line-height: 1.08;
}
.lpv-context-output ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.lpv-context-output li {
display: flex;
gap: 10px;
align-items: center;
min-height: 40px;
padding: 10px 12px;
border-radius: 14px;
color: #505367;
background: rgba(226, 235, 246, 0.78);
font-weight: 700;
}
.lpv-context-output li .icon {
flex: 0 0 auto;
color: #5665f6;
}
.lpv-annual-strip {
display: grid;
grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1.1fr);
gap: 18px;
align-items: center;
margin: 0 auto 28px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 22px;
background: linear-gradient(145deg, rgba(34, 43, 58, 0.95), rgba(14, 18, 27, 0.95));
box-shadow: var(--neu-raised-sm);
}
.lpv-annual-strip strong,
.lpv-annual-strip span {
display: block;
}
.lpv-annual-strip strong {
color: var(--ink);
font-family: var(--font-display);
font-size: 22px;
line-height: 1.15;
}
.lpv-annual-strip > div > span {
margin-top: 5px;
color: rgba(238, 241, 246, 0.58);
}
.lpv-annual-values {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.lpv-annual-values span {
padding: 12px 14px;
border-radius: 14px;
color: var(--ink);
background: rgba(255, 255, 255, 0.055);
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
text-align: center;
}
@media (max-width: 900px) {
.lpv-hero-simple {
min-height: auto;
padding-top: 46px;
}
.lpv-meet,
.lpv-annual-strip {
grid-template-columns: 1fr;
}
.lpv-meet-copy h2 {
max-width: 14ch;
}
.lpv-ads-visual img {
margin: 12px auto 0;
max-width: 460px;
}
}
@media (max-width: 640px) {
.lpv-meet {
padding-left: 18px;
padding-right: 18px;
}
.lpv-hero-simple h1 {
font-size: clamp(42px, 13.5vw, 64px);
}
.lpv-hero-simple .lpv-pill {
max-width: 100%;
}
.lpv-mascot-hero-simple {
margin-bottom: 14px;
}
.lpv-meet-visual {
min-height: 330px;
border-radius: 24px;
}
.lpv-mascot-divine {
width: min(96%, 360px);
}
.lpv-meet-grid,
.lpv-annual-values {
grid-template-columns: 1fr;
}
.lpv-ads-visual img {
max-width: 100%;
border-radius: 20px;
}
.lpv-annual-strip {
padding: 16px;
border-radius: 18px;
}
}
@media (max-width: 480px) {
/* En celulares angostos (iPhone SE/mini, Android ~360-412px) el 13.5vw de la regla de
arriba crece más rápido de lo que "max-width: 13.5ch" puede contener a ese tamaño de
letra -- el título terminaba saliéndose del viewport en vez de solo hacer más líneas.
Reduce fuente y ancho en caracteres juntos para que siempre quepa. */
.lpv-hero-simple h1 {
max-width: 11ch;
font-size: clamp(32px, 10vw, 42px);
}
}
/* Landing polish: stable transformation grid, meet section, and interactive pricing */
.lpv-meet {
position: relative;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: clamp(18px, 3vw, 34px);
padding-top: 86px;
padding-bottom: 92px;
}
.lpv-meet::before {
content: "";
position: absolute;
left: 2%;
top: 12%;
width: min(48vw, 620px);
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(circle, rgba(47, 203, 239, 0.16), transparent 45%),
radial-gradient(circle, rgba(98, 83, 255, 0.2), transparent 62%);
filter: blur(4px);
pointer-events: none;
z-index: -1;
}
.lpv-meet-visual {
position: relative;
min-height: 430px;
aspect-ratio: 1;
width: min(82vw, 540px);
border-radius: 50%;
background: none;
box-shadow: none;
overflow: visible;
}
.lpv-mascot-divine {
width: min(96%, 540px);
max-height: 540px;
filter: drop-shadow(0 42px 72px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 44px rgba(98, 83, 255, 0.38));
}
.lpv-meet-title {
max-width: 12ch;
margin: 0 auto;
color: #fff;
font-family: var(--font-display);
font-size: clamp(48px, 7.2vw, 92px);
line-height: 0.9;
letter-spacing: 0;
text-wrap: balance;
}
.lpv-meet-copy {
max-width: 900px;
margin: 0 auto;
}
.lpv-meet-grid {
align-items: stretch;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.lpv-meet-grid span {
position: relative;
min-width: 0;
overflow-wrap: anywhere;
min-height: 74px;
padding: 18px 20px;
border: 1px solid rgba(47, 203, 239, 0.18);
color: rgba(238, 241, 246, 0.88);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
box-shadow: 14px 14px 34px rgba(0, 0, 0, 0.22), inset 1px 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px);
}
.lpv-meet-grid span strong {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(145deg, #38d7ef, #6454ff);
box-shadow: 0 16px 26px rgba(47, 203, 239, 0.2);
font-size: 18px;
}
.lpv-meet-copy h3 {
max-width: 18ch;
margin: 0 auto 18px;
color: #fff;
font-family: var(--font-display);
font-size: clamp(34px, 4.6vw, 64px);
line-height: 0.96;
letter-spacing: 0;
text-wrap: balance;
}
.lpv-meet-copy > p:not(.lpv-kicker) {
max-width: 62ch;
margin-left: auto;
margin-right: auto;
color: rgba(238, 241, 246, 0.68);
font-size: 19px;
}
.lpv-orbit {
position: absolute;
z-index: 2;
padding: 12px 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
color: #fff;
background: rgba(12, 16, 29, 0.72);
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.28), 0 0 24px rgba(47, 203, 239, 0.14);
backdrop-filter: blur(14px);
font-family: var(--font-display);
font-size: 14px;
font-weight: 900;
}
.lpv-orbit-a {
left: 2%;
top: 20%;
}
.lpv-orbit-b {
right: 0;
top: 28%;
}
.lpv-orbit-c {
left: 20%;
bottom: 13%;
}
.lpv-results-scene {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
min-height: auto;
max-width: 1120px;
isolation: isolate;
}
.lpv-results-scene::before {
inset: 10% 18%;
z-index: -2;
}
.lpv-results-mascot {
z-index: -1;
width: min(48vw, 500px);
opacity: 0.25;
}
.lpv-result-main,
.lpv-result-card {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: auto;
}
.lpv-result-main {
grid-column: 1 / -1;
justify-self: center;
max-width: 720px;
text-align: center;
}
.lpv-result-main strong {
max-width: 22ch;
margin-left: auto;
margin-right: auto;
}
.lpv-result-card {
min-height: 255px;
display: flex;
flex-direction: column;
}
.lpv-result-card strong {
margin-top: 14px;
}
.lpv-result-card p {
margin-top: auto;
}
.lpv-billing-toggle {
cursor: pointer;
border: 0;
}
.lpv-billing-toggle span,
.lpv-billing-toggle strong {
transition: color 0.2s ease, opacity 0.2s ease;
}
.lpv-monthly-active .lpv-billing-toggle [data-billing-monthly],
.lpv-annual-active .lpv-billing-toggle [data-billing-annual] {
color: #211717;
opacity: 1;
}
.lpv-monthly-active .lpv-billing-toggle [data-billing-annual],
.lpv-annual-active .lpv-billing-toggle [data-billing-monthly] {
color: #8b7f7a;
opacity: 0.68;
}
.lpv-monthly-active .lpv-billing-toggle strong::before {
background: #ded7cf;
}
.lpv-monthly-active .lpv-billing-toggle strong::after {
left: 3px;
}
.lpv-plan small {
display: block;
margin-top: 2px;
color: #ef2fb1;
font-size: 11.5px;
font-weight: 900;
line-height: 1.25;
}
.lpv-price strong {
letter-spacing: 0;
}
.lpv-model-note {
max-width: 980px;
margin: 24px auto 0;
padding: 18px 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
background: rgba(255, 255, 255, 0.07);
color: rgba(238, 241, 246, 0.62);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}
.lpv-model-note p {
margin: 0;
font-size: 13px;
line-height: 1.55;
}
.lpv-model-note p + p {
margin-top: 8px;
}
.lpv-model-note strong {
color: #fff;
}
.lpv-pricing-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lpv-credit-mix {
display: grid;
gap: 7px;
margin: 0 0 18px;
padding: 14px;
border: 1px solid rgba(47, 203, 239, 0.18);
border-radius: 16px;
background:
radial-gradient(circle at 100% 0%, rgba(47, 203, 239, 0.14), transparent 42%),
rgba(255, 255, 255, 0.055);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.08);
}
.lpv-credit-mix strong,
.lpv-credit-mix span {
display: block;
line-height: 1.25;
}
.lpv-credit-mix strong {
color: #fff;
font-family: var(--font-display);
font-size: 16px;
}
.lpv-credit-mix span {
color: rgba(238, 241, 246, 0.66);
font-size: 12.5px;
font-weight: 800;
}
.lpv-credit-mix-featured {
border-color: rgba(47, 203, 239, 0.42);
background:
radial-gradient(circle at 100% 0%, rgba(47, 203, 239, 0.22), transparent 44%),
radial-gradient(circle at 0% 100%, rgba(239, 47, 177, 0.13), transparent 48%),
rgba(255, 255, 255, 0.075);
}
.lpv-plan-no-annual .lpv-annual-line {
color: rgba(238, 241, 246, 0.7);
}
.lpv-plan-no-annual .lpv-price-total {
color: #ef2fb1;
}
.lpv-plan li:has(use[href="#i-lock"]) {
color: rgba(238, 241, 246, 0.58);
}
.lpv-plan li:has(use[href="#i-lock"]) .icon {
color: #ef2fb1;
}
@media (max-width: 1180px) {
.lpv-pricing-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.lpv-how-flow {
grid-template-columns: 1fr;
}
.lpv-how-core {
min-height: 250px;
}
.lpv-meet {
grid-template-columns: 1fr;
padding-top: 60px;
}
.lpv-meet-visual {
min-height: 400px;
aspect-ratio: auto;
}
.lpv-results-scene {
grid-template-columns: 1fr;
}
.lpv-results-mascot {
position: absolute;
left: 50%;
top: 50%;
width: min(86vw, 430px);
opacity: 0.16;
transform: translate(-50%, -50%);
}
.lpv-result-main {
text-align: left;
}
.lpv-result-main strong {
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 640px) {
.lpv-meet-visual {
min-height: 320px;
}
.lpv-mascot-divine {
width: min(92%, 340px);
}
.lpv-orbit {
font-size: 12px;
padding: 9px 12px;
}
.lpv-result-card {
min-height: auto;
}
.lpv-price strong {
font-size: clamp(38px, 14vw, 58px);
}
}
/* Landing conversion pass: clearer pain, ads, value and pricing */
.lpv-pain-grid article {
position: relative;
overflow: hidden;
min-height: 230px;
padding: 30px 28px;
}
.lpv-pain-grid article::after {
content: "";
position: absolute;
right: -38px;
bottom: -42px;
width: 130px;
height: 130px;
border-radius: 50%;
background: radial-gradient(circle, rgba(47, 203, 239, 0.18), transparent 66%);
}
.lpv-pain-grid p strong {
display: block;
margin-bottom: 5px;
color: var(--ink);
font-family: var(--font-display);
font-size: 16px;
line-height: 1.25;
}
.lpv-pain-signal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
max-width: 920px;
margin: 22px auto 0;
}
.lpv-pain-signal span,
.lpv-ads-pills span {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 42px;
padding: 10px 14px;
border-radius: 999px;
color: #fff;
background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.1), 10px 10px 28px rgba(0,0,0,0.18);
font-family: var(--font-display);
font-size: 13px;
font-weight: 900;
}
.lpv-ads-card {
grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1.14fr);
}
.lpv-ads-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0;
}
.lpv-ads-pills span {
color: #15172a;
background: linear-gradient(145deg, #f8fbff, #dfe8f2);
box-shadow: 8px 8px 18px rgba(32,26,46,0.12), -8px -8px 18px rgba(255,255,255,0.82);
}
.lpv-ads-pills .icon {
width: 16px;
height: 16px;
color: #14b8d4;
}
.lpv-ads-card p strong {
color: #121426;
background: linear-gradient(90deg, rgba(47, 203, 239, 0.18), rgba(98, 83, 255, 0.12));
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.lpv-audience-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 960px;
}
.lpv-audience-strip span {
display: grid;
gap: 4px;
min-height: 82px;
align-content: center;
border-radius: 18px;
text-align: left;
}
.lpv-audience-strip strong,
.lpv-audience-strip small {
display: block;
}
.lpv-audience-strip strong {
color: #fff;
font-family: var(--font-display);
font-size: 15px;
}
.lpv-audience-strip small {
color: rgba(238, 241, 246, 0.52);
font-size: 12.5px;
font-weight: 700;
}
.lpv-copy-highlight {
color: #fff;
background: linear-gradient(90deg, rgba(47, 203, 239, 0.28), rgba(239, 47, 177, 0.16));
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
padding: 0 4px;
}
.lpv-output-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lpv-vs-grid {
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
gap: 30px;
}
.lpv-vs-typical {
opacity: 0.62;
filter: grayscale(1) saturate(0.28);
transform: scale(0.98);
background: linear-gradient(145deg, rgba(238, 241, 246, 0.82), rgba(197, 203, 214, 0.74));
}
.lpv-vs-typical .lpv-vs-label {
color: #5f5968;
background: rgba(95, 89, 104, 0.13);
}
.lpv-vs-emulo {
transform: translateY(-12px) scale(1.02);
border-color: rgba(47, 203, 239, 0.82);
box-shadow:
var(--card-shadow),
0 0 0 2px rgba(47, 203, 239, 0.98),
0 0 80px rgba(47, 203, 239, 0.3),
0 22px 70px rgba(98, 83, 255, 0.18);
}
.lpv-plan-desc {
min-height: 4.2em;
padding: 12px 14px;
border-radius: 16px;
color: rgba(238, 241, 246, 0.78);
background: rgba(255, 255, 255, 0.055);
font-style: italic;
font-weight: 700;
}
.lpv-annual-line {
min-height: 56px;
padding-left: 12px;
border-left: 3px solid rgba(47, 203, 239, 0.58);
font-style: italic;
}
.lpv-mode-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 12px;
}
.lpv-mode-badges span,
.lpv-mode-badges strong {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 7px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 950;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
}
.lpv-mode-badges span {
color: #101626;
background: linear-gradient(145deg, #e7f8ff, #b9ecf7);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.82);
}
.lpv-mode-badges strong {
color: #fff;
background: linear-gradient(145deg, #ef2fb1, #6253ff);
box-shadow: 0 10px 24px rgba(239, 47, 177, 0.22);
}
.lpv-credit-guide {
max-width: 980px;
margin: 28px auto 0;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
background:
radial-gradient(circle at 100% 0%, rgba(47, 203, 239, 0.14), transparent 38%),
linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}
.lpv-credit-guide-head {
display: grid;
gap: 6px;
margin-bottom: 18px;
text-align: center;
}
.lpv-credit-guide-head h3 {
max-width: 22ch;
margin: 0 auto;
color: #fff;
font-family: var(--font-display);
font-size: clamp(27px, 3.8vw, 42px);
line-height: 1.02;
}
.lpv-credit-guide-head p:not(.lpv-kicker) {
max-width: 62ch;
margin: 4px auto 0;
color: rgba(238, 241, 246, 0.64);
font-size: 15.5px;
line-height: 1.58;
}
.lpv-credit-guide-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.lpv-credit-guide article {
display: grid;
gap: 12px;
padding: 20px;
border-radius: 20px;
color: #15172a;
background: linear-gradient(145deg, #f7faff, #dfe8f2);
box-shadow: 12px 12px 28px rgba(0,0,0,0.18), -8px -8px 20px rgba(255,255,255,0.06);
}
.lpv-credit-guide article > span {
display: inline-flex;
align-items: center;
gap: 8px;
width: max-content;
max-width: 100%;
color: #0c697b;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.lpv-credit-guide article > span.lpv-credit-mode-creator {
color: #077f96;
border-radius: var(--radius-pill);
padding: 7px 10px;
background: rgba(47, 203, 239, 0.16);
box-shadow: inset 0 0 0 1px rgba(47, 203, 239, 0.28);
}
.lpv-credit-guide article > span.lpv-credit-mode-pro {
color: #8a1fc4;
border-radius: var(--radius-pill);
padding: 7px 10px;
background: rgba(239, 47, 177, 0.13);
box-shadow: inset 0 0 0 1px rgba(239, 47, 177, 0.26);
}
.lpv-credit-guide-head p strong {
color: #fff;
border-radius: 999px;
padding: 0.12em 0.42em;
background: rgba(47, 203, 239, 0.18);
}
.lpv-credit-guide-head p strong:nth-of-type(2) {
background: rgba(239, 47, 177, 0.18);
}
.lpv-credit-guide article > strong {
color: #111426;
font-family: var(--font-display);
font-size: 24px;
line-height: 1.1;
}
.lpv-credit-guide article p {
margin: 0;
color: #575b70;
font-size: 14px;
line-height: 1.5;
}
.lpv-credit-guide article div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 42px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.62);
}
.lpv-credit-guide article b {
color: #16182a;
}
.lpv-credit-guide article em {
flex: 0 0 auto;
padding: 5px 9px;
border-radius: 999px;
color: #fff;
background: linear-gradient(145deg, #38d7ef, #6454ff);
font-style: normal;
font-size: 12px;
font-weight: 900;
white-space: nowrap;
}
.lpv-credit-guide .lpv-credit-pro {
background:
radial-gradient(circle at 100% 0%, rgba(239, 47, 177, 0.18), transparent 42%),
linear-gradient(145deg, #fbf7ff, #e4e8f6);
}
.lpv-credit-guide-note {
margin: 16px 0 0;
color: rgba(238, 241, 246, 0.66);
font-size: 13px;
font-weight: 800;
text-align: center;
}
.lpv-credit-guide-note strong {
color: #fff;
}
.lpv-faq .lpv-credit-guide {
max-width: none;
margin: 18px 0 4px;
padding: clamp(16px, 3vw, 24px);
background:
radial-gradient(circle at 100% 0%, rgba(47, 203, 239, 0.16), transparent 40%),
linear-gradient(145deg, rgba(11, 16, 31, 0.94), rgba(25, 21, 41, 0.94));
}
.lpv-faq .lpv-credit-guide-head h3 {
font-size: clamp(26px, 3vw, 38px);
}
.lpv-faq .lpv-credit-guide article p,
.lpv-faq .lpv-credit-guide-note {
font-size: 14px;
}
@media (max-width: 900px) {
.lpv-audience-strip,
.lpv-output-grid,
.lpv-credit-guide-grid {
grid-template-columns: 1fr;
}
.lpv-vs-emulo {
transform: none;
}
}
/* Landing final CRO pass: compact ads section, stronger proof, and mobile overflow guard */
html,
body,
.lpv-body {
max-width: 100%;
overflow-x: hidden;
}
.lpv-training-proof {
margin: -10px auto 8px;
max-width: 680px;
color: rgba(238, 241, 246, 0.72);
font-family: var(--font-display);
font-size: clamp(18px, 2vw, 24px);
font-weight: 800;
line-height: 1.25;
text-align: center;
}
.lpv-training-proof strong {
color: #fff;
background: linear-gradient(90deg, rgba(47, 203, 239, 0.24), rgba(239, 47, 177, 0.18));
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.lpv-ads-card-simple {
grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1.08fr);
padding: clamp(26px, 4vw, 48px);
background:
radial-gradient(circle at 96% 10%, rgba(47, 203, 239, 0.18), transparent 34%),
var(--card);
}
.lpv-ads-card-simple h2 {
max-width: 12ch;
font-size: clamp(36px, 5.4vw, 68px);
line-height: 0.94;
}
.lpv-ads-card-simple p:not(.lpv-kicker) {
max-width: 48ch;
font-size: 18px;
}
.lpv-ads-strip {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
min-width: 0;
}
.lpv-ads-strip span,
.lpv-ads-strip strong {
display: flex;
align-items: center;
gap: 10px;
min-height: 72px;
padding: 16px 18px;
border-radius: 18px;
font-family: var(--font-display);
font-size: 16px;
font-weight: 900;
line-height: 1.18;
box-shadow: 10px 10px 26px rgba(32, 26, 46, 0.12), -8px -8px 20px rgba(255, 255, 255, 0.76);
}
.lpv-ads-strip span {
color: #171728;
background: linear-gradient(145deg, #f8fbff, #dfe8f2);
}
.lpv-ads-strip strong {
grid-column: 1 / -1;
color: #fff;
background:
radial-gradient(circle at 100% 0%, rgba(47, 203, 239, 0.28), transparent 44%),
linear-gradient(145deg, #191626, #30254c);
box-shadow: 0 26px 52px rgba(0, 0, 0, 0.24), inset 1px 1px 0 rgba(255, 255, 255, 0.12);
}
.lpv-ads-strip .icon {
color: #14b8d4;
width: 18px;
height: 18px;
}
.lpv-ads-strip strong .icon {
color: #fff;
}
.lpv-demo-copy h2 {
max-width: 15ch;
}
.lpv-price-total {
max-width: 100%;
}
@media (max-width: 900px) {
.lpv-ads-card-simple {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.lpv-hero,
.lpv-pain,
.lpv-visual-diff,
.lpv-ads,
.lpv-audience,
.lpv-how,
.lpv-demo,
.lpv-vs,
.lpv-testimonials,
.lpv-offer,
.lpv-pricing,
.lpv-faq,
.lpv-final {
width: 100%;
max-width: 100%;
padding-left: 16px;
padding-right: 16px;
box-sizing: border-box;
}
.lpv-results-scene,
.lpv-result-main,
.lpv-result-card,
.lpv-ads-card-simple,
.lpv-demo-panel,
.lpv-plan {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.lpv-ads-strip {
grid-template-columns: 1fr;
}
.lpv-ads-card-simple h2,
.lpv-demo-copy h2,
.lpv-meet-title {
max-width: 100%;
}
}
/* Meet Emulo: richer floating intelligence chips */
.lpv-meet-visual {
min-height: 560px;
}
.lpv-orbit {
white-space: nowrap;
animation: lpv-chip-float 4.8s ease-in-out infinite;
}
.lpv-orbit-a { left: -3%; top: 20%; }
.lpv-orbit-b { right: -4%; top: 24%; animation-delay: -0.8s; }
.lpv-orbit-c { left: 16%; bottom: 12%; animation-delay: -1.4s; }
.lpv-orbit-d { right: 14%; bottom: 9%; animation-delay: -2.1s; }
.lpv-orbit-e { left: -5%; top: 54%; animation-delay: -2.8s; }
.lpv-orbit-f { right: -8%; top: 54%; animation-delay: -3.5s; }
.lpv-orbit-g {
left: 50%;
top: 4%;
transform: translateX(-50%);
animation-delay: -4.1s;
}
@keyframes lpv-chip-float {
0%, 100% {
translate: 0 0;
}
50% {
translate: 0 -8px;
}
}
@media (max-width: 900px) {
.lpv-meet-visual {
width: min(100%, 560px);
}
.lpv-orbit-a { left: 0; top: 18%; }
.lpv-orbit-b { right: 0; top: 24%; }
.lpv-orbit-e { left: 0; top: 56%; }
.lpv-orbit-f { right: 0; top: 56%; }
}
@media (max-width: 640px) {
.lpv-meet-visual {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: 8px;
min-height: auto;
width: 100%;
padding: 16px 0 0;
}
.lpv-mascot-divine {
order: 1;
flex: 0 0 100%;
width: min(92%, 330px);
margin: 0 auto 8px;
}
.lpv-orbit {
position: relative;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
order: 2;
transform: none !important;
font-size: 11px;
padding: 8px 10px;
animation: none;
}
}
/* Mobile repair pass after real-device screenshots */
@media (max-width: 820px) {
.lpv-pricing-grid,
.lpv-vs-grid,
.lpv-audience-strip,
.lpv-results-scene {
grid-template-columns: 1fr !important;
}
.lpv-plan,
.lpv-vs-grid article,
.lpv-result-main,
.lpv-result-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
.lpv-plan {
padding: 28px 22px 24px !important;
border-radius: 24px;
}
.lpv-plan + .lpv-plan {
margin-top: 0;
}
.lpv-featured-badge,
.lpv-plan-no-annual::after {
position: static;
display: inline-flex;
width: max-content;
max-width: 100%;
margin: 0 0 12px;
transform: none;
}
.lpv-plan h3 {
font-size: clamp(34px, 10vw, 46px);
}
.lpv-plan-desc {
min-height: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: rgba(238, 241, 246, 0.72);
font-size: 16px;
font-style: normal;
font-weight: 750;
line-height: 1.42;
}
.lpv-price {
align-items: baseline;
gap: 8px;
margin-top: 18px;
}
.lpv-price strong {
font-size: clamp(56px, 18vw, 76px) !important;
line-height: 0.92;
max-width: 100%;
}
.lpv-old {
display: block;
width: 100%;
font-size: 17px;
line-height: 1.3;
}
.lpv-price-unit {
font-size: 22px;
}
.lpv-price-total {
width: 100%;
margin-top: 6px;
font-size: 16px;
line-height: 1.35;
}
.lpv-annual-line {
min-height: 0;
font-size: 15.5px;
line-height: 1.45;
}
.lpv-mode-badges span,
.lpv-mode-badges strong {
white-space: normal;
text-align: left;
}
.lpv-credit-mix {
padding: 14px;
}
.lpv-credit-mix strong {
font-size: 15px;
}
.lpv-plan ul {
gap: 10px;
}
.lpv-plan li {
font-size: 14.5px;
line-height: 1.4;
}
.lpv-vs-typical,
.lpv-vs-emulo {
opacity: 1 !important;
transform: none !important;
}
.lpv-vs-emulo h3,
.lpv-vs-typical h3 {
max-width: none !important;
font-size: clamp(34px, 10vw, 46px);
}
.lpv-vs-grid li {
grid-template-columns: 40px minmax(0, 1fr);
font-size: 18px;
line-height: 1.35;
}
.lpv-vs-grid li span {
width: 34px;
height: 34px;
}
.lpv-audience-strip span {
min-height: auto;
padding: 22px;
}
.lpv-result-main strong,
.lpv-result-card strong {
max-width: none;
font-size: clamp(24px, 7vw, 34px);
}
}
@media (max-width: 430px) {
.lpv-hero,
.lpv-pain,
.lpv-visual-diff,
.lpv-ads,
.lpv-audience,
.lpv-how,
.lpv-demo,
.lpv-vs,
.lpv-testimonials,
.lpv-offer,
.lpv-pricing,
.lpv-faq,
.lpv-final {
padding-left: 14px !important;
padding-right: 14px !important;
}
.lpv-section-head h2,
.lpv-visual-copy h2,
.lpv-demo-copy h2,
.lpv-final h2,
.lpv-meet-title,
.lpv-ads-card-simple h2 {
font-size: clamp(34px, 11vw, 48px) !important;
}
}
/* Final polish pass: clarity, mobile safety and stronger visual selling cues */
.lpv-audience-strip span {
position: relative;
min-height: 132px;
padding: 28px 26px 28px 94px;
overflow: hidden;
border-color: rgba(47, 203, 239, 0.18);
background:
radial-gradient(circle at 88% 18%, rgba(239, 47, 177, 0.18), transparent 34%),
radial-gradient(circle at 0% 100%, rgba(47, 203, 239, 0.18), transparent 38%),
rgba(28, 32, 44, 0.96);
}
.lpv-audience-strip span::after {
content: "";
position: absolute;
right: -58px;
bottom: -70px;
width: 176px;
height: 176px;
border-radius: 50%;
background: radial-gradient(circle, rgba(47, 203, 239, 0.26), transparent 68%);
pointer-events: none;
}
.lpv-audience-strip span em {
position: absolute;
left: 26px;
top: 50%;
z-index: 1;
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 16px;
background: linear-gradient(135deg, #32cdef, #6658f5 62%, #ef2fb1);
box-shadow: 0 18px 34px rgba(47, 203, 239, 0.24), inset 1px 1px 0 rgba(255, 255, 255, 0.34);
font-size: 22px;
font-style: normal;
}
.lpv-audience-strip strong,
.lpv-audience-strip small {
position: relative;
z-index: 1;
}
.lpv-audience-strip small {
color: rgba(238, 241, 246, 0.72);
text-transform: none;
}
.lpv-step-number {
width: 54px;
height: 54px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.95), transparent 16%),
linear-gradient(145deg, #28d4ee 0%, #4a78ff 58%, #8a38f5 100%);
box-shadow: 0 18px 38px rgba(47, 203, 239, 0.28), 0 0 0 9px rgba(47, 203, 239, 0.08);
font-size: 19px;
letter-spacing: 0;
}
.lpv-how-flow article {
position: relative;
}
.lpv-how-flow article::after {
content: "";
position: absolute;
inset: 12px 12px auto auto;
width: 72px;
height: 72px;
border-radius: 50%;
background: radial-gradient(circle, rgba(47, 203, 239, 0.15), transparent 70%);
pointer-events: none;
}
.lpv-how-variations {
background:
radial-gradient(circle at 100% 0%, rgba(239, 47, 177, 0.2), transparent 36%),
radial-gradient(circle at 0% 100%, rgba(47, 203, 239, 0.18), transparent 42%),
rgba(27, 31, 42, 0.92) !important;
}
.lpv-demo-tabs {
width: max-content;
max-width: 100%;
gap: 9px;
padding: 8px;
border-radius: 999px;
background: rgba(20, 25, 36, 0.06);
box-shadow: inset 8px 8px 18px rgba(20, 25, 36, 0.08), inset -8px -8px 18px rgba(255, 255, 255, 0.64);
}
.lpv-demo-tabs span {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(22, 32, 49, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.54);
box-shadow: none;
color: rgba(36, 30, 54, 0.74);
}
.lpv-demo-tabs span::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
opacity: 0.48;
}
.lpv-demo-tabs span:first-child {
color: #0b6f80;
border-color: rgba(47, 203, 239, 0.22);
background: rgba(47, 203, 239, 0.14);
}
.lpv-vs-grid li {
grid-template-columns: 42px minmax(0, 1fr) 32px;
align-items: center;
}
.lpv-row-mark {
justify-self: end;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 999px;
font-size: 18px;
font-style: normal;
font-weight: 1000;
line-height: 1;
}
.lpv-row-x {
color: #fff;
background: #ef4444;
box-shadow: 0 12px 26px rgba(239, 68, 68, 0.28);
}
.lpv-row-check {
color: #fff;
background: #22c55e;
box-shadow: 0 12px 26px rgba(34, 197, 94, 0.28);
}
.lpv-results-mascot {
display: none !important;
}
.lpv-pricing > .lpv-billing-toggle {
display: none !important;
}
.lpv-plan-billing {
display: flex;
align-items: center;
gap: 8px;
margin: 16px 0 10px;
padding: 7px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
background: rgba(12, 17, 29, 0.36);
}
.lpv-plan-billing button {
border: 0;
border-radius: 999px;
padding: 9px 13px;
background: transparent;
color: rgba(238, 241, 246, 0.58);
cursor: pointer;
font: 900 13px/1 var(--font-body);
}
.lpv-plan-billing button.is-active {
color: #101626;
background: #f6fbff;
box-shadow: 0 10px 22px rgba(47, 203, 239, 0.22);
}
.lpv-plan-billing em {
margin-left: auto;
color: var(--cyan);
font: 950 12px/1 var(--font-body);
font-style: normal;
white-space: nowrap;
}
.lpv-pain {
position: relative;
overflow: hidden;
}
.lpv-pain::before {
content: "";
position: absolute;
left: 50%;
top: 78px;
z-index: 0;
width: min(760px, 78vw);
aspect-ratio: 1;
transform: translateX(-50%);
border-radius: 50%;
background:
radial-gradient(circle at 28% 26%, rgba(47, 203, 239, 0.28), transparent 32%),
radial-gradient(circle at 70% 68%, rgba(239, 47, 177, 0.2), transparent 34%);
opacity: 0.78;
filter: blur(4px);
pointer-events: none;
}
.lpv-pain .lpv-section-head,
.lpv-pain-grid,
.lpv-pain-signal {
position: relative;
z-index: 1;
}
.lpv-pain-grid article {
border-color: rgba(47, 203, 239, 0.2);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 248, 252, 0.94)),
#fff;
box-shadow: 18px 18px 44px rgba(0, 0, 0, 0.2), -12px -12px 34px rgba(255, 255, 255, 0.06);
}
.lpv-pain-grid article:nth-child(2) {
border-color: rgba(239, 47, 177, 0.22);
}
.lpv-pain-grid article:nth-child(3) {
border-color: rgba(102, 88, 245, 0.24);
}
.lpv-pain-grid article > span {
background: linear-gradient(135deg, #2fcdef, #4c75ff);
box-shadow: 0 18px 34px rgba(47, 203, 239, 0.26);
}
.lpv-pain-grid article:nth-child(2) > span {
background: linear-gradient(135deg, #ef2fb1, #6b5cff);
}
.lpv-pain-grid article:nth-child(3) > span {
background: linear-gradient(135deg, #28d4ee, #24c28a);
}
.lpv-faq-list details[open] {
box-shadow: 0 0 0 1px rgba(47, 203, 239, 0.22), 0 18px 38px rgba(47, 203, 239, 0.14);
}
.lpv-faq-list details p {
max-width: none;
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.62;
}
@media (max-width: 820px) {
.lpv-audience-strip span {
min-height: 112px;
padding: 22px 20px 22px 82px !important;
}
.lpv-audience-strip span em {
left: 20px;
width: 44px;
height: 44px;
}
.lpv-vs-grid li {
grid-template-columns: 36px minmax(0, 1fr) 28px !important;
gap: 12px;
}
.lpv-row-mark {
width: 24px;
height: 24px;
font-size: 16px;
}
.lpv-plan-billing {
width: 100%;
flex-wrap: wrap;
border-radius: 20px;
}
.lpv-plan-billing button {
flex: 1 1 96px;
}
.lpv-plan-billing em {
flex: 1 0 100%;
margin: 2px 0 0;
text-align: center;
}
.lpv-pricing-grid {
gap: 22px !important;
}
.lpv-mode-badges {
display: flex;
flex-wrap: wrap;
}
.lpv-mode-badges span,
.lpv-mode-badges strong {
min-width: 0;
flex: 1 1 150px;
justify-content: center;
text-align: center;
padding: 10px 12px;
font-size: 13px;
}
.lpv-demo-tabs {
width: 100%;
justify-content: flex-start;
overflow-x: auto;
}
.lpv-demo-tabs span {
flex: 0 0 auto;
}
}
@media (max-width: 520px) {
body {
overflow-x: hidden;
}
.lpv-wrap,
.lpv-section-head,
.lpv-hero,
.lpv-pain,
.lpv-visual-diff,
.lpv-ads,
.lpv-audience,
.lpv-how,
.lpv-demo,
.lpv-vs,
.lpv-testimonials,
.lpv-offer,
.lpv-pricing,
.lpv-faq,
.lpv-final {
max-width: 100vw;
overflow-x: hidden;
}
.lpv-price strong {
font-size: clamp(48px, 16vw, 68px) !important;
overflow-wrap: anywhere;
}
.lpv-price {
display: flex;
flex-wrap: wrap;
}
.lpv-step-number {
width: 48px;
height: 48px;
font-size: 17px;
}
.lpv-pain-signal {
align-items: stretch;
}
.lpv-pain-signal span {
justify-content: center;
text-align: center;
}
}
/* Pricing CTA and desktop overflow repair */
.lpv-plan a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 56px;
margin-top: 22px;
border: 0;
border-radius: 18px;
color: #07111d;
background:
radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.72), transparent 24%),
linear-gradient(135deg, #42ddf2 0%, #57a8ff 52%, #7b5dff 100%);
box-shadow: 0 20px 44px rgba(47, 203, 239, 0.22), inset 1px 1px 0 rgba(255, 255, 255, 0.5);
font-family: var(--font-display);
font-size: 16px;
font-weight: 950;
letter-spacing: 0.01em;
text-decoration: none;
}
.lpv-plan a::after {
content: "->";
margin-left: 10px;
font-family: var(--font-mono);
font-weight: 900;
}
.lpv-plan a:hover {
transform: translateY(-2px);
color: #07111d;
box-shadow: 0 26px 54px rgba(47, 203, 239, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}
.lpv-plan-featured {
border-color: rgba(239, 47, 177, 0.72) !important;
background:
radial-gradient(circle at 96% 0%, rgba(239, 47, 177, 0.23), transparent 34%),
radial-gradient(circle at 0% 18%, rgba(47, 203, 239, 0.22), transparent 36%),
linear-gradient(145deg, rgba(48, 59, 80, 0.98), rgba(37, 36, 67, 0.98)) !important;
box-shadow: 0 0 0 2px rgba(239, 47, 177, 0.3), 0 34px 84px rgba(239, 47, 177, 0.18) !important;
}
.lpv-featured-badge {
color: #fff !important;
background: linear-gradient(135deg, #ff3ab7 0%, #7b5dff 55%, #2fcdef 100%) !important;
box-shadow: 0 16px 34px rgba(239, 47, 177, 0.34), 0 0 0 6px rgba(239, 47, 177, 0.12) !important;
}
.lpv-plan-featured a {
color: #fff;
background:
radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.5), transparent 24%),
linear-gradient(135deg, #ff3ab7 0%, #a846ff 48%, #2fcdef 100%);
box-shadow: 0 24px 54px rgba(239, 47, 177, 0.34), inset 1px 1px 0 rgba(255, 255, 255, 0.42);
}
.lpv-plan-featured a:hover {
color: #fff;
}
@media (min-width: 821px) {
.lpv-price {
min-width: 0;
width: 100%;
}
.lpv-price strong {
font-size: clamp(52px, 5vw, 82px) !important;
line-height: 0.92;
max-width: 100%;
overflow-wrap: anywhere;
}
.lpv-old {
max-width: 100%;
font-size: clamp(14px, 1.2vw, 18px);
line-height: 1.35;
white-space: normal;
}
.lpv-plan-billing {
max-width: 100%;
}
.lpv-plan-billing button {
min-width: 0;
padding-inline: clamp(10px, 1.1vw, 16px);
}
.lpv-plan-billing em {
font-size: clamp(11px, 1vw, 14px);
}
}
@media (min-width: 821px) and (max-width: 1180px) {
.lpv-plan {
padding-inline: 26px !important;
}
.lpv-price strong {
font-size: clamp(50px, 4.6vw, 70px) !important;
}
.lpv-price-unit {
font-size: 22px;
}
}
/* Pricing desktop fix: avoid four cramped cards on normal laptop/desktop widths */
.lpv-pricing-grid {
grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
max-width: 1120px;
margin-inline: auto;
}
.lpv-plan {
min-width: 0;
}
.lpv-price {
justify-content: flex-start;
column-gap: 8px;
row-gap: 4px;
}
.lpv-price strong {
white-space: nowrap;
overflow-wrap: normal !important;
word-break: keep-all;
}
.lpv-price-annual strong {
font-size: clamp(58px, 6vw, 92px) !important;
}
.lpv-price-unit {
flex: 0 0 auto;
}
.lpv-old,
.lpv-price-total {
text-align: left;
}
.lpv-plan-billing {
display: grid;
grid-template-columns: minmax(82px, 1fr) minmax(82px, 1fr) auto;
}
.lpv-plan-billing button {
width: 100%;
}
.lpv-plan-billing em {
margin-left: 0;
}
@media (min-width: 1680px) {
.lpv-pricing-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
max-width: 1760px;
}
.lpv-plan {
padding-inline: 26px !important;
}
.lpv-price-annual strong {
font-size: clamp(58px, 4.6vw, 78px) !important;
}
.lpv-plan-billing {
grid-template-columns: 1fr 1fr;
}
.lpv-plan-billing em {
grid-column: 1 / -1;
text-align: center;
}
}
@media (max-width: 900px) {
.lpv-pricing-grid {
grid-template-columns: 1fr !important;
max-width: 560px;
}
.lpv-price-annual strong {
font-size: clamp(54px, 16vw, 76px) !important;
}
.lpv-plan-billing {
display: flex;
}
}
/* Ecommerce landing sequence and analysis emphasis */
.lpv-ecommerce main {
display: flex;
flex-direction: column;
}
.lpv-ecommerce .lpv-hero { order: 1; }
.lpv-ecommerce .lpv-meet { order: 2; }
.lpv-ecommerce .lpv-video { order: 3; }
.lpv-ecommerce .lpv-how { order: 4; }
.lpv-ecommerce .lpv-visual-diff { order: 5; }
.lpv-ecommerce .lpv-audience { order: 6; }
.lpv-ecommerce .lpv-demo { order: 7; }
.lpv-ecommerce .lpv-offer { order: 8; }
.lpv-ecommerce .lpv-pricing { order: 9; }
.lpv-ecommerce .lpv-vs { order: 10; }
.lpv-ecommerce .lpv-testimonials { order: 11; }
.lpv-ecommerce .lpv-faq { order: 12; }
.lpv-ecommerce .lpv-final { order: 13; }
.lpv-ecommerce .lpv-hero-simple {
min-height: auto;
padding-top: clamp(30px, 5vw, 60px);
padding-bottom: clamp(36px, 5vw, 66px);
}
.lpv-ecommerce .lpv-meet {
padding-top: clamp(40px, 6vw, 76px);
}
.lpv-ecommerce .lpv-visual-diff {
display: block;
background:
radial-gradient(circle at 8% 12%, rgba(239, 47, 177, 0.14), transparent 34%),
radial-gradient(circle at 92% 18%, rgba(47, 203, 239, 0.18), transparent 36%),
linear-gradient(145deg, rgba(15, 18, 34, 0.98), rgba(24, 19, 36, 0.98));
border-top: 1px solid rgba(47, 203, 239, 0.12);
border-bottom: 1px solid rgba(239, 47, 177, 0.12);
}
.lpv-ecommerce .lpv-visual-head {
margin-bottom: 30px;
}
.lpv-ecommerce .lpv-visual-head h2 {
max-width: 18ch;
}
.lpv-ecommerce .lpv-visual-panel {
max-width: 980px;
margin: 0 auto;
}
.lpv-ecommerce .lpv-visual-panel ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.lpv-ecommerce .lpv-visual-panel h3 {
max-width: 14ch;
margin: 0 0 18px;
color: #111426;
font-family: var(--font-display);
font-size: clamp(28px, 3.2vw, 42px);
line-height: 0.98;
}
.lpv-ecommerce .lpv-visual-panel li {
align-items: flex-start;
min-height: 74px;
padding: 14px 14px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.16), -6px -6px 18px rgba(255, 255, 255, 0.08);
}
.lpv-ecommerce .lpv-visual-panel li .icon {
flex: 0 0 auto;
margin-top: 2px;
color: #5b5cff;
}
.lpv-video {
padding: clamp(54px, 8vw, 98px) var(--lpv-page-x);
background:
radial-gradient(circle at 18% 18%, rgba(47, 203, 239, 0.16), transparent 34%),
radial-gradient(circle at 82% 18%, rgba(239, 47, 177, 0.14), transparent 34%),
linear-gradient(180deg, #080d19 0%, #0b1020 100%);
}
.lpv-demo-video-frame {
/* Vertical por defecto (9:16): la mayoría de visitantes llega desde el celular y el
primer VSL real que se sube es el vertical. En escritorio (media query abajo) pasa
a 16:9 -- cuando exista también el video horizontal, aquí es donde se agrega el