/* ============================================================
   Last-Step Register Page — self-contained stylesheet.
   Does not touch, import, or depend on styles.css or upsell-v2.css.
   Single-price framing: one seat, one price, no comparison table.
   Brand colors match the main LP palette (navy + gold).
   ============================================================ */

:root {
  --ls-navy-deep: #020031;
  --ls-navy: #050067;
  --ls-navy2: #09007d;
  --ls-gold: #f4b400;
  --ls-gold-light: #ffe000;
  --ls-cream: #fff9df;
  --ls-paper: #fffaf0;
  --ls-ink: #12082e;
  --ls-muted: #6b6480;
  --ls-line: #e8e1d0;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  color: var(--ls-ink);
  background: var(--ls-navy-deep);
  font-family: "Inter", "Noto Sans Kannada", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}

img { display: block; max-width: 100%; }

.ls-shell {
  height: 100dvh;
  height: 100svh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 0%, rgba(244, 180, 0, .18), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(9, 0, 125, .9), transparent 55%),
    linear-gradient(180deg, var(--ls-navy-deep), #06004a 60%, var(--ls-navy-deep));
  padding: 0;
}

.ls-card {
  width: min(430px, 100%);
  height: 100dvh;
  height: 100svh;
  max-height: 100dvh;
  max-height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ls-paper);
  box-shadow: 0 30px 70px rgba(0, 0, 20, .45);
}

/* ---------- Hero ---------- */

.ls-hero {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 2138 / 640;
  overflow: hidden;
  background: var(--ls-navy-deep);
}

.ls-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ls-hero-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 999px;
  border: 1px solid rgba(2, 0, 49, .3);
  background: linear-gradient(180deg, var(--ls-gold-light), var(--ls-gold));
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ls-navy-deep);
  white-space: nowrap;
  animation: ls-badge-pulse 2.2s ease-in-out infinite;
}

@keyframes ls-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 224, 0, .6); }
  50% { box-shadow: 0 0 0 7px rgba(255, 224, 0, 0); }
}

/* ---------- Fill: groups headline + body + CTA as one unit.
   space-evenly splits any leftover viewport height equally between
   the top/bottom edges AND the gaps between sections, instead of
   dumping it all above the headline and below the CTA. ---------- */

.ls-fill {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: clamp(10px, 2dvh, 16px);
}

/* ---------- Headline ---------- */

.ls-headline {
  flex: 0 0 auto;
  padding: 0 16px;
  text-align: center;
}

.ls-tagline {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--ls-navy2);
}

.ls-headline h1 {
  margin: 3px 0 0;
  font-family: "Sora", "Noto Sans Kannada", "Inter", sans-serif;
  font-size: clamp(15px, min(5.2dvh, 6vw), 24px);
  font-weight: 800;
  line-height: 1.45;
  color: var(--ls-navy);
}

/* ---------- Body ---------- */

.ls-body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2dvh, 18px);
  padding: 0 14px;
}

/* ---------- Single price card ---------- */

.ls-price-card {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  border: 1px solid var(--ls-line);
  background: linear-gradient(180deg, var(--ls-cream), #fffdf5);
  box-shadow: 0 8px 24px rgba(18, 8, 46, .08);
  padding: 14px 16px;
}

.ls-price-card-name {
  min-width: 0;
}

.ls-price-card-name strong {
  display: block;
  font-family: "Sora", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ls-ink);
  line-height: 1.2;
}

.ls-price-card-name small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ls-muted);
}

.ls-price-card-price {
  text-align: right;
  white-space: nowrap;
  line-height: 1;
}

.ls-price-card-price s {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--ls-muted);
  opacity: .82;
  text-decoration-thickness: 1.5px;
  margin-bottom: 2px;
}

.ls-price-card-price b {
  display: block;
  font-family: "Sora", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--ls-ink);
}

/* ---------- Value blocks (3 reasons to buy) ---------- */

.ls-value-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  flex-shrink: 0;
}

.ls-value-blocks > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(9, 0, 125, .12);
  padding: 9px 6px 8px;
  text-align: center;
  line-height: 1.28;
  color: var(--ls-ink);
}

.ls-value-blocks i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ls-cream), #fff2c9);
  color: #9a7300;
  font-style: normal;
}

.ls-value-blocks i svg {
  width: 16px;
  height: 16px;
}

.ls-value-blocks b {
  font-size: 12px;
  font-weight: 800;
}

.ls-value-blocks em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ls-muted);
}

/* ---------- Add-on: deliberately small and unobtrusive ---------- */

.ls-addon {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 2px 4px;
  margin-top: clamp(6px, 1.4dvh, 12px);
}

.ls-addon input {
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--ls-muted);
}

.ls-addon label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ls-ink);
  line-height: 1.3;
  cursor: pointer;
}

/* ---------- CTA ---------- */

.ls-cta-wrap {
  flex: 0 0 auto;
  padding: clamp(3px, 0.8dvh, 5px) 14px clamp(12px, 2.8dvh, 20px);
}

.ls-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 64px;
  padding: 9px 14px 8px;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(180deg, #171043, var(--ls-navy-deep) 70%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 10px 26px rgba(2, 0, 49, .45);
  color: var(--ls-gold-light);
  font: inherit;
  font-family: "Sora", "Inter", sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .01em;
  animation: ls-glow 2.6s ease-in-out infinite;
}

.ls-cta-main {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

.ls-cta-label,
.ls-cta-price,
.ls-cta-proof {
  position: relative;
  z-index: 1;
}

.ls-cta-price {
  font-size: 1.28em;
  font-weight: 950;
  line-height: 1;
}

.ls-cta-proof {
  color: rgba(255, 255, 255, .9);
  font-family: "Inter", "Noto Sans Kannada", "Segoe UI", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.1;
}

.ls-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 224, 0, 0) 30%,
    rgba(255, 224, 0, .55) 50%,
    rgba(255, 224, 0, 0) 70%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: ls-shine 3.6s ease-in-out infinite;
}

@keyframes ls-shine {
  0% { left: -60%; }
  18% { left: 130%; }
  100% { left: 130%; }
}

@keyframes ls-glow {
  0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 10px 26px rgba(2, 0, 49, .45); }
  50% { box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 10px 30px rgba(244, 180, 0, .35); }
}

.ls-cta[disabled] {
  opacity: .7;
  cursor: default;
}

.ls-trust {
  margin: 8px 0 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ls-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ls-cta, .ls-cta::after, .ls-hero-badge { animation: none; }
}

@media (max-width: 480px) {
  .ls-headline {
    padding: 18px 14px 0;
  }

  .ls-headline h1 {
    margin-top: 1px;
    font-size: clamp(19px, 5.4vw, 22px);
    line-height: 1.28;
  }

  .ls-body {
    gap: clamp(10px, 2.4vw, 14px);
    padding-top: 8px;
    padding-bottom: 4px;
  }
}

/* Slightly taller phones/desktops: allow a little more breathing room.
   min-height (in addition to max-height) gives .ls-fill's space-evenly
   some leftover room to distribute, matching the roomier mobile feel
   instead of the card shrink-wrapping tightly to its content. */
@media (min-width: 760px) {
  .ls-shell { padding: 18px; }
  .ls-card {
    height: auto;
    min-height: min(700px, calc(100dvh - 36px));
    max-height: min(820px, calc(100dvh - 36px));
    border-radius: 24px;
  }
}