/* Components: frame, hero, action, proof, content, sales. */

/* ---------- Frame ---------- */
.lp-infobar { background: var(--brand-deep); color: var(--on-deep); font-size: 0.875rem; }
.lp-infobar--urgent { background: var(--urgent); color: var(--on-urgent); }
.lp-infobar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.75rem; min-height: 2.75rem; padding-block: 0.5rem; text-align: center; }
.lp-infobar em { font-family: var(--font-accent); font-size: 1.1em; }
@media (max-width: 639px) { .lp-infobar .lp-dot { display: none; } }
.lp-infobar a, .lp-infobar button { padding: 0; border: 0; background: none; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.lp-nav { padding-block: 1rem; }
.lp-nav__inner { display: flex; align-items: center; justify-content: center; }
.lp-nav__logo { display: inline-flex; align-items: center; gap: 0.625rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.lp-nav__logo img { width: auto; height: var(--lp-logo-h, 2.25rem); } /* logo size per brand: --lp-logo-h in brand.css */

/* Theme switch: three round buttons in a pill (light / dark / system). */
.lp-theme { display: inline-flex; width: fit-content; gap: 0.125rem; padding: 0.1875rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
.lp-theme__btn { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); transition: background-color 0.25s, color 0.25s; }
.lp-theme__btn svg { width: 1rem; height: 1rem; }
.lp-theme__btn:hover { color: var(--ink); }
.lp-theme__btn[aria-pressed="true"] { background: var(--brand-10); color: var(--brand-text); }

/* Navigation with anchor menu: sticky, blurred, links + theme switch; on phones a dropdown panel. */
.lp-nav--menu { position: sticky; z-index: 60; top: 0; padding-block: 0.75rem; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); transition: border-color 0.3s; }
.lp-nav--menu.is-scrolled { border-bottom-color: var(--line); }
.lp-nav--menu .lp-nav__inner { justify-content: space-between; gap: 1rem; }
.lp-nav--menu .lp-nav__logo img { height: var(--lp-logo-h, 2rem); }
.lp-nav__menu { display: none; }
.lp-nav__menu a { padding: 0.5rem 0.25rem; color: var(--ink-muted); font-size: 0.9375rem; text-decoration: none; }
.lp-nav__menu a:hover { color: var(--ink); }
.lp-nav__actions { display: flex; align-items: center; gap: 0.5rem; }
.lp-nav--menu .lp-nav__logo { flex: none; }
.lp-nav--menu .lp-nav__logo span { white-space: nowrap; }
/* Practical limit: nav CTA text should stay under about 20 characters; below 381px it may wrap. */
@media (min-width: 381px) { .lp-nav__actions .lp-btn { white-space: nowrap; } }
.lp-nav__toggle { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); }
.lp-nav__bars, .lp-nav__bars::before, .lp-nav__bars::after { display: block; width: 1rem; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease-out), background-color 0.2s; }
.lp-nav__bars { position: relative; }
.lp-nav__bars::before, .lp-nav__bars::after { content: ""; position: absolute; left: 0; }
.lp-nav__bars::before { top: -5px; }
.lp-nav__bars::after { top: 5px; }
.lp-nav--menu.is-open .lp-nav__bars { background: transparent; }
.lp-nav--menu.is-open .lp-nav__bars::before { transform: translateY(5px) rotate(45deg); }
.lp-nav--menu.is-open .lp-nav__bars::after { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 899px) {
  .lp-nav--menu.is-open .lp-nav__menu { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; padding: 0.25rem var(--gutter) 1.25rem; border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-m); }
  .lp-nav--menu.is-open .lp-nav__menu a { padding: 0.875rem 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1.0625rem; }
  .lp-nav--menu.is-open .lp-nav__menu .lp-theme { align-self: flex-start; margin-top: 1rem; }
}
@media (max-width: 380px) { .lp-nav--menu .lp-nav__logo span { display: none; } }
@media (min-width: 900px) {
  .lp-nav__menu { display: flex; align-items: center; gap: 1.5rem; }
  .lp-nav__toggle { display: none; }
}
/* Anchor targets land below the sticky navigation. */
:where(section, header, div, form)[id] { scroll-margin-top: 5.5rem; }

.lp-footer { padding-block: 2rem 7rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-muted); }
.lp-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.lp-footer a, .lp-footer button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.lp-footer a:hover, .lp-footer button:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Badge + live dot ---------- */
.lp-badge { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; padding: 0.375rem 0.875rem; border: 1px solid var(--brand-20); border-radius: var(--radius-pill); background: var(--brand-4); color: var(--ink); font-size: 0.875rem; font-weight: 500; text-wrap: balance; }
.lp-badge .lp-dot { color: var(--brand); }
.lp-badge--urgent { border-color: var(--urgent-20); background: var(--urgent-8); color: var(--urgent); }
.lp-badge--urgent .lp-dot { color: var(--urgent); }
.lp-dot { position: relative; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.lp-dot::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid currentColor; border-radius: 50%; animation: lp-pulse 2s ease-out infinite; }
@keyframes lp-pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ---------- Hero ---------- */
.lp-hero { padding-block: 2rem 3.5rem; text-align: center; }
@media (min-width: 768px) { .lp-hero { padding-block: 5rem 5rem; } }
.lp-hero__copy { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; max-width: 52rem; margin-inline: auto; }
@media (min-width: 768px) { .lp-hero__copy { gap: 1.5rem; } }
.lp-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.25rem; font-size: 0.9375rem; color: var(--ink-muted); }
.lp-hero__meta strong { color: var(--ink); font-weight: 600; }
.lp-hero__media { margin-top: 3rem; }
.lp-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.875rem; width: 100%; }
/* Phones: the hero button stays a button, not a full-width bar; nav buttons get compact */
@media (max-width: 639px) {
  .lp-cta-wrap .lp-btn--xl { gap: 0.75rem; padding: 0.875rem 1.125rem 0.875rem 1.375rem; font-size: 1.0625rem; }
  .lp-cta-wrap .lp-btn--xl .lp-btn__icon { width: 1.25rem; height: 1.25rem; }
  .lp-nav__actions .lp-btn--s { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
  /* Pages with a sticky CTA bar need no second CTA in the header (hero CTA covers the top) */
  body:has([data-lp-sticky]) .lp-nav__actions .lp-btn { display: none; }
  /* Header then holds only logo + menu button: logo centered, menu button stays right */
  body:has([data-lp-sticky]) .lp-nav--menu .lp-nav__logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  body:has([data-lp-sticky]) .lp-nav--menu .lp-nav__actions { margin-left: auto; }
}

/* ---------- Proof ---------- */
.lp-proof { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; color: var(--ink-muted); }
.lp-proof strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-proof .lp-dot { color: #1fa855; }

.lp-avatar { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: 50%; background: var(--brand-10); color: var(--brand-text); font-size: 0.875rem; font-weight: 600; }
.lp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-verified { flex: none; width: 0.95rem; height: 0.95rem; color: var(--brand); }

.lp-quote { display: flex; flex-direction: column; gap: 1rem; }
.lp-quote__text { font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.lp-quote__who { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; text-align: left; }
.lp-quote__name { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9375rem; font-weight: 600; }
.lp-quote__role { display: block; font-size: 0.8125rem; color: var(--ink-muted); }
.lp-quote--mini { flex-direction: row; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-s); text-align: left; }
.lp-quote--mini .lp-quote__text { font-size: 0.875rem; }
.lp-quote--feature { align-items: center; max-width: 44rem; margin-inline: auto; text-align: center; }
.lp-quote--feature .lp-quote__text { font-family: var(--font-accent); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.3; }

.lp-rail { display: flex; gap: 1rem; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lp-rail::-webkit-scrollbar { display: none; }
.lp-rail > * { flex: 0 0 85%; scroll-snap-align: start; }
@media (min-width: 768px) {
  .lp-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: 0; padding: 0; overflow: visible; }
}

.lp-logos { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.lp-logos__label { font-size: 0.875rem; color: var(--ink-muted); text-align: center; }
.lp-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.25rem; }
.lp-logos__row img { width: auto; height: 1.75rem; filter: grayscale(1); opacity: 0.7; }
.lp-logos__row span { font-weight: 600; letter-spacing: -0.02em; color: var(--ink-muted); }

.lp-facts { display: grid; overflow: hidden; border: 1px solid var(--brand-20); border-radius: var(--radius-m); background: linear-gradient(135deg, var(--brand-10), var(--brand-4) 50%, var(--brand-10)); }
@media (min-width: 640px) { .lp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-fact { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.5rem 1rem; text-align: center; }
.lp-fact + .lp-fact { border-top: 1px solid var(--brand-20); }
@media (min-width: 640px) { .lp-fact + .lp-fact { border-top: 0; border-left: 1px solid var(--brand-20); } }
.lp-fact__num { font-family: var(--font-accent); font-size: 2.25rem; font-style: italic; line-height: 1; color: var(--brand-text); }
.lp-fact__label { font-size: 0.875rem; color: var(--ink-muted); text-wrap: balance; }

/* ---------- Content ---------- */
.lp-rows { display: flex; flex-direction: column; }
.lp-row { display: grid; align-items: center; gap: 2rem; padding-block: 3rem; }
@media (min-width: 992px) {
  .lp-row { grid-template-columns: 1.1fr 1fr; gap: 4rem; padding-block: 4rem; }
  .lp-row:nth-child(even) .lp-row__media { order: 2; }
}
.lp-row__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; }
.lp-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-m); background: var(--surface-mist); box-shadow: var(--shadow-m); }
.lp-media > img, .lp-media > video { width: 100%; height: 100%; object-fit: cover; }
.lp-media--placeholder { display: grid; place-items: center; padding: 1rem; border: 1px dashed var(--line); box-shadow: none; background: repeating-linear-gradient(135deg, var(--surface-mist) 0 12px, var(--surface) 12px 24px); color: var(--ink-muted); font-size: 0.875rem; text-align: center; }
.lp-num { margin-bottom: -0.5rem; padding-right: 0.1em; font-family: var(--font-accent); font-size: clamp(4rem, 3rem + 3vw, 5.5rem); font-style: italic; line-height: 0.9; letter-spacing: -0.04em; color: var(--brand); opacity: 0.22; }
/* The big number slides in shortly after its card is revealed (lp-core.js adds .is-in). */
.lp-js [data-lp-reveal] .lp-num { opacity: 0; transform: translateX(-0.3em); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--lp-delay, 0ms) + 250ms); }
.lp-js [data-lp-reveal].is-in .lp-num { opacity: 0.22; transform: none; }

.lp-card { position: relative; display: flex; flex-direction: column; gap: 0.875rem; padding: 1.75rem 1.5rem; border: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent); background: var(--surface); }
.lp-card::before {
  content: "";
  --t: var(--brand);
  --l: 0.625rem;
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(var(--t), var(--t)) top left / var(--l) 1.5px no-repeat,
    linear-gradient(var(--t), var(--t)) top left / 1.5px var(--l) no-repeat,
    linear-gradient(var(--t), var(--t)) top right / var(--l) 1.5px no-repeat,
    linear-gradient(var(--t), var(--t)) top right / 1.5px var(--l) no-repeat,
    linear-gradient(var(--t), var(--t)) bottom left / var(--l) 1.5px no-repeat,
    linear-gradient(var(--t), var(--t)) bottom left / 1.5px var(--l) no-repeat,
    linear-gradient(var(--t), var(--t)) bottom right / var(--l) 1.5px no-repeat,
    linear-gradient(var(--t), var(--t)) bottom right / 1.5px var(--l) no-repeat;
}
.lp-card__img { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-s); background: var(--surface-mist); }
.lp-card__img img { width: 100%; height: 100%; object-fit: cover; }
.lp-card__title { font-size: 1.1875rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.lp-card__title strong { font-weight: 700; }
.lp-card p { font-size: 0.9375rem; color: var(--ink-muted); }
.lp-section--deep .lp-card { border-color: var(--on-deep-line); background: color-mix(in srgb, var(--on-deep) 4%, transparent); }
.lp-section--deep .lp-card::before { --t: var(--brand-soft); }
.lp-section--deep .lp-card p { color: var(--on-deep-muted); }

/* Check list: circles fill one after another when the list is revealed (lp-core.js adds .is-in). */
.lp-checks { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.lp-checks li { position: relative; padding-left: 2.125rem; }
.lp-checks li::before, .lp-checks li::after { content: ""; position: absolute; top: 0.08em; left: 0; width: 1.375rem; height: 1.375rem; }
.lp-checks li::before { border-radius: 50%; background: var(--brand-10); transition: background-color 0.45s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms + 200ms); }
.lp-checks li::after {
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 12.3l3 3 6-6.3' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 12.3l3 3 6-6.3' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: background-color 0.45s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms + 200ms);
}
.lp-checks li:nth-child(2) { --i: 1; } .lp-checks li:nth-child(3) { --i: 2; } .lp-checks li:nth-child(4) { --i: 3; }
.lp-checks li:nth-child(5) { --i: 4; } .lp-checks li:nth-child(6) { --i: 5; } .lp-checks li:nth-child(7) { --i: 6; } .lp-checks li:nth-child(8) { --i: 7; }
.lp-checks.is-in li::before, html:not(.lp-js) .lp-checks li::before { background: var(--brand); }
.lp-checks.is-in li::after, html:not(.lp-js) .lp-checks li::after { background: var(--on-brand); }
.lp-checks--no li { color: var(--ink-muted); }
.lp-checks--no li::before, .lp-checks--no.is-in li::before, html:not(.lp-js) .lp-checks--no li::before { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.lp-checks--no li::after, .lp-checks--no.is-in li::after, html:not(.lp-js) .lp-checks--no li::after {
  background: var(--ink-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.lp-steps { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: lp-step; }
@media (min-width: 768px) { .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-steps li { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.lp-steps li::before { content: counter(lp-step, decimal-leading-zero); counter-increment: lp-step; font-family: var(--font-accent); font-size: 2rem; font-style: italic; line-height: 1; color: var(--brand); }
.lp-steps strong { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; }
.lp-steps p { font-size: 0.9375rem; color: var(--ink-muted); }
.lp-section--deep .lp-steps li { border-color: var(--on-deep-line); background: color-mix(in srgb, var(--on-deep) 4%, transparent); }
.lp-section--deep .lp-steps li::before { color: var(--brand-soft); }
.lp-section--deep .lp-steps p { color: var(--on-deep-muted); }

.lp-faq { display: flex; flex-direction: column; max-width: var(--container-narrow); margin-inline: auto; border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-size: 1.0625rem; font-weight: 500; list-style: none; cursor: pointer; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--brand), var(--brand)) center / 0.75rem 1.5px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center / 1.5px 0.75rem no-repeat,
    var(--brand-10);
  transition: transform 0.3s var(--ease-out);
}
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq__answer { padding: 0 2.75rem 1.25rem 0; color: var(--ink-muted); }

.lp-host { display: grid; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .lp-host { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; } }
.lp-host__photo { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-l); background: var(--surface-mist); box-shadow: var(--shadow-m); }
.lp-host__photo img { width: 100%; height: 100%; object-fit: cover; }
.lp-host__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; }
.lp-host__sign { font-family: var(--font-accent); font-size: 1.5rem; font-style: italic; color: var(--brand); }

.lp-fit { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .lp-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-fit__col { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.lp-fit__col--yes { border-color: var(--brand-20); background: var(--brand-4); }
.lp-fit__col h3 { font-size: 1.125rem; font-weight: 600; }

/* ---------- Action ---------- */
.lp-band { position: relative; overflow: hidden; background: var(--brand-deep); color: var(--on-deep); }
.lp-band__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding-block: 2.75rem; }
@media (min-width: 768px) { .lp-band__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.lp-band__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.lp-band__title em { font-family: var(--font-accent); color: var(--brand-soft); }
.lp-band__sub { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--on-deep-muted); }
.lp-band .lp-btn { flex: none; }
@media (max-width: 767px) { .lp-band .lp-btn { width: 100%; justify-content: space-between; } }

.lp-sticky { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom)); transform: translateY(120%); transition: transform 0.5s var(--ease-out); pointer-events: none; }
.lp-sticky.is-shown { transform: none; pointer-events: auto; }
.lp-sticky__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 56rem; margin-inline: auto; padding: 0.625rem 0.625rem 0.625rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-m); }
.lp-sticky__text { font-size: 0.9375rem; color: var(--ink-muted); }
.lp-sticky__text strong { color: var(--ink); }
@media (max-width: 639px) {
  .lp-sticky__text { display: none; }
  .lp-sticky__inner { padding: 0; border: 0; background: none; box-shadow: none; }
  .lp-sticky .lp-btn { width: 100%; justify-content: space-between; box-shadow: var(--shadow-m); }
}
html.lp-done .lp-sticky { display: none; }

/* Popups and the audience gate use native <dialog>. The dialog fills the screen, the card sits centered and
   scrolls inside the dialog if it is taller than the viewport (small iPhones). */
dialog.lp-popup, dialog.lp-gate { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 1rem; overflow: auto; overscroll-behavior: contain; border: 0; background: transparent; color: var(--ink); }
dialog.lp-popup[open], dialog.lp-gate[open] { display: flex; }
dialog.lp-popup::backdrop, dialog.lp-gate::backdrop { background: rgb(10 10 10 / 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lp-popup__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.125rem; width: 100%; max-width: 30rem; margin: auto; padding: 2.5rem 1.75rem 1.75rem; border-radius: var(--radius-l); background: var(--surface); box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.5); text-align: center; animation: lp-pop-in 0.45s var(--ease-out); }
.lp-gate .lp-popup__card { max-width: 42rem; }
@keyframes lp-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.lp-popup__card:focus { outline: none; }
.lp-popup__close { position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); font-size: 1.125rem; }
.lp-popup__close:hover { background: var(--surface-mist); color: var(--ink); }
.lp-popup__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.lp-popup__step { display: flex; flex-direction: column; align-items: center; gap: 1.125rem; width: 100%; }

.lp-form { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
.lp-form .lp-btn { width: 100%; justify-content: space-between; }
.lp-label { display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; text-align: left; }
.lp-input { width: 100%; height: 3.75rem; padding: 0 1.125rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font-size: 1.0625rem; transition: border-color 0.3s, box-shadow 0.3s; }
.lp-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-20); }
.lp-input::placeholder { color: color-mix(in srgb, var(--ink-muted) 80%, transparent); }
textarea.lp-input { height: auto; min-height: 8rem; padding: 0.875rem 1.125rem; line-height: 1.5; resize: vertical; }
.lp-hint { font-size: 0.8125rem; color: var(--ink-muted); text-align: center; }
.lp-error { font-size: 0.875rem; color: var(--urgent); text-align: left; }

.lp-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; width: 100%; }
@media (max-width: 380px) { .lp-options { grid-template-columns: 1fr; } }
@media (min-width: 640px) { .lp-gate .lp-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-option { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); text-align: left; transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease-out); }
.lp-option:hover { border-color: var(--brand-40); transform: translateY(-1px); }
.lp-option strong { font-size: 0.9375rem; font-weight: 600; }
.lp-option span { font-size: 0.8125rem; line-height: 1.35; color: var(--ink-muted); }
.lp-option.is-picked { border-color: var(--brand); background: var(--brand-4); }
.lp-skip { padding: 0; border: 0; background: none; color: var(--ink-muted); font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) and (max-height: 700px) {
  .lp-popup__card { gap: 0.875rem; padding: 2rem 1.25rem 1.25rem; }
  .lp-input { height: 3.25rem; }
}

/* ---------- Sales ---------- */
.lp-value { overflow: hidden; max-width: 40rem; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-m); }
.lp-value__rows { margin: 0; padding: 0.5rem 1.75rem; list-style: none; }
.lp-value__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px dashed var(--line); font-size: 0.9375rem; }
.lp-value__row:last-child { border-bottom: 0; }
.lp-value__row span:last-child { color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-price { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.75rem; background: var(--surface-mist); text-align: center; }
.lp-price__old { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--urgent); }
.lp-price__now { font-family: var(--font-accent); font-size: 3rem; font-style: italic; line-height: 1; }
.lp-price__note { font-size: 0.8125rem; color: var(--ink-muted); }
.lp-price .lp-btn { width: 100%; justify-content: space-between; }
.lp-bonus { flex-direction: row; align-items: flex-start; gap: 1rem; }
.lp-bonus__tag { align-self: flex-start; padding: 0.2rem 0.5rem; border-radius: 0.375rem; background: var(--brand-10); color: var(--brand-text); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.lp-bonus__value { font-size: 0.8125rem; color: var(--ink-muted); }
.lp-guarantee { display: flex; align-items: flex-start; gap: 1.25rem; max-width: 44rem; margin-inline: auto; padding: 1.75rem; border: 1px solid var(--brand-20); border-radius: var(--radius-l); background: var(--brand-4); }
@media (max-width: 539px) { .lp-guarantee { flex-direction: column; } }
.lp-guarantee__seal { flex: none; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--brand-text); color: var(--on-brand); font-family: var(--font-accent); font-size: 1.25rem; font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .lp-js [data-lp-reveal] .lp-num { opacity: 0.22; transform: none; transition: none; }
  .lp-dot::after { display: none; animation: none; }
  .lp-checks li::before, .lp-checks li::after { transition: none; }
  .lp-sticky { transition: none; }
  .lp-popup__card { animation: none; }
  .lp-faq summary::after { transition: none; }
  .lp-theme__btn { transition: none; }
  .lp-nav--menu, .lp-nav__bars, .lp-nav__bars::before, .lp-nav__bars::after { transition: none; }
}