/* ============================================================
   Upsell V2 — self-contained concept stylesheet.
   Does not touch or depend on styles.css.
   Brand colors pulled from the main LP palette (navy + gold).
   ============================================================ */

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

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

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

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

.v2-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(--v2-navy-deep), #06004a 60%, var(--v2-navy-deep));
  padding: 0;
}

.v2-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(--v2-paper);
  box-shadow: 0 30px 70px rgba(0, 0, 20, .45);
}

/* ---------- Hero: full-width image, badge overlaid on top ---------- */

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

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

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

@keyframes v2-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); }
}

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

.v2-headline {
  flex: 0 0 auto;
  padding: clamp(10px, 2.2dvh, 16px) 16px clamp(8px, 1.6dvh, 12px);
  text-align: center;
}

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

.v2-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(--v2-navy);
  white-space: nowrap;
}

/* ---------- Body: fills remaining space ---------- */

.v2-body {
  flex: 1 1 auto;
  flex-shrink: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, 1.2dvh, 10px);
  padding: clamp(9px, 2dvh, 15px) 14px clamp(5px, 1.2dvh, 8px);
}

/* ---------- Comparison card: one unit, two zones ---------- */

.v2-compare {
  position: relative;
  flex-shrink: 0;
  border-radius: 18px;
  border: 1px solid var(--v2-line);
  background: #fff;
  box-shadow: 0 8px 24px rgba(18, 8, 46, .08);
  overflow: hidden;
}

.v2-tier {
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
}

.v2-tier-standard {
  border-bottom: 1px dashed var(--v2-line);
}

/* Unified checkbox control — same shape/size/states on both rows,
   so the VIP row visibly reads as selectable instead of decorative. */

.v2-checkbox {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  border: 2px solid #cfc7de;
  background: #fff;
  font-size: 14px;
  font-weight: 900;
  color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.v2-checkbox.is-checked,
.v2-tier-vip input:checked ~ .v2-checkbox-toggle {
  border-color: var(--v2-gold);
  background: linear-gradient(180deg, var(--v2-gold-light), var(--v2-gold));
  color: var(--v2-navy-deep);
}

.v2-tier-vip input:not(:checked) ~ .v2-checkbox-toggle {
  border-color: #cfc7de;
  background: #fff;
  color: transparent;
}

.v2-tier-name {
  min-width: 0;
}

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

.v2-tier-name small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--v2-muted);
}

.v2-tier-name small + small {
  margin-top: 6px;
}

.v2-tier-name small s {
  opacity: .75;
}

.v2-tier-worth {
  color: #9a7300 !important;
  font-weight: 800 !important;
}

.v2-tier-price {
  text-align: right;
  font-family: "Sora", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--v2-ink);
  white-space: nowrap;
}

/* VIP zone acts as the checkbox label */

.v2-tier-vip {
  position: relative;
  cursor: pointer;
  background:
    radial-gradient(circle at 92% 0%, rgba(244, 180, 0, .22), transparent 55%),
    linear-gradient(180deg, var(--v2-cream), #fffdf5);
}

.v2-tier-vip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.v2-ribbon {
  position: absolute;
  top: 0;
  right: 12px;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, var(--v2-gold-light), var(--v2-gold));
  color: var(--v2-navy-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px 2.5px;
}

.v2-tier-vip .v2-tier-price {
  color: #9a7300;
}

.v2-vip-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 0 12px 10px;
}

.v2-vip-items span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(244, 180, 0, .4);
  padding: 8px 5px 7px;
  text-align: center;
  line-height: 1.24;
  color: var(--v2-ink);
}

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

.v2-vip-items i svg {
  width: 16px;
  height: 16px;
}

.v2-vip-items b {
  font-size: 12.5px;
  font-weight: 800;
}

.v2-vip-items em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 900;
  color: #9a7300;
}

/* Intentionally no graying-down of the VIP row when unchecked — it should
   still read as valuable while it's off; only the checkbox communicates state. */

/* ---------- Value stack ---------- */

.v2-value-stack {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  background: var(--v2-green-bg);
  border: 1px solid #b9e6cd;
  padding: 6px 16px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--v2-green);
}

.v2-value-stack s {
  color: var(--v2-muted);
  font-weight: 700;
  opacity: .8;
}

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

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

.v2-social-proof {
  margin: 0 0 6px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--v2-navy2);
}

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

.v2-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: v2-shine 3.6s ease-in-out infinite;
}

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

@keyframes v2-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); }
}

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

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

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

/* Slightly taller phones/desktops: allow a little more breathing room */
@media (min-width: 760px) {
  .v2-shell { padding: 18px; }
  .v2-card {
    height: auto;
    max-height: min(820px, calc(100dvh - 36px));
    border-radius: 24px;
  }
}