/* ==========================================================================
   Cenematic home-c — "You Have A Choice to Make" comparison + LOCK IN CTA

   Three option blocks (Cénematic = best choice) as full-width alternating
   text / video rows, the best row highlighted. Rows render from choice.js.
   Media is the placeholder video thumbnail — swap for the real video.
   ========================================================================== */

.choice {
  position: relative;
  overflow: hidden;
  padding: 80px 40px;
  background:
    radial-gradient(44% 46% at 10% 8%, rgba(255, 193, 7, 0.08), transparent 72%),
    radial-gradient(38% 44% at 92% 18%, rgba(255, 138, 0, 0.065), transparent 74%),
    radial-gradient(46% 52% at 48% 100%, rgba(255, 77, 0, 0.035), transparent 76%),
    linear-gradient(180deg, #fffefa 0%, #fffaf2 52%, #fffdf8 100%);
  color: var(--ink);
}

/* Faint warm aurora */
.choice::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 138, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 193, 7, 0.03) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(68% 72% at 50% 42%, #000 0%, transparent 78%);
  pointer-events: none;
}
.choice__inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }

/* Header ------------------------------------------------------------------ */
.choice__header { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.choice__eyebrow {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 8px;
  background: linear-gradient(100deg, #ffc107, #ff8a00); color: #141414;
  font-size: clamp(18px, 2vw, 24px); font-weight: 700; transform: rotate(-1.2deg);
}
.choice__title { font-size: clamp(28px, 4vw, 52px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.choice__sub { margin-top: 12px; font-size: clamp(16px, 1.7vw, 20px); color: var(--muted); }
.choice__title-accent {
  background: linear-gradient(105deg, #ffc107, #ff8a00, #ff4d00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Option pieces ----------------------------------------------------------- */
.choice__badge {
  display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 8px;
  background: linear-gradient(100deg, #ff8a00, #ff3d00); color: #fff; font-size: 12px;
  font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; transform: rotate(-1.5deg);
}
.choice__label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.choice__name { margin-bottom: 14px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.01em; }
.choice__body { margin-bottom: 14px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; color: var(--muted); }
.choice__points { list-style: none; margin-top: 6px; }
.choice__points li { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-weight: 600; }
.choice__emoji { font-size: 18px; line-height: 1; }
.choice__media { margin: 0; }
.choice__media img { display: block; width: 100%; border-radius: 16px; }

/* Alternating rows -------------------------------------------------------- */
.choice__rows { display: flex; flex-direction: column; gap: 56px; }
.choice__row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.choice__rows .choice__row:nth-child(even) .choice__media { order: -1; }
/* Winner: no box — bigger type, gradient name, framed video */
.choice__row--best .choice__name {
  width: fit-content;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900;
  background: linear-gradient(105deg, #ffc107, #ff8a00, #ff4d00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.choice__row--best .choice__media img {
  border: 3px solid transparent;
  background: linear-gradient(120deg, #ffc107, #ff8a00, #ff3d00, #ffc107) border-box;
  background-size: 300% 100%;
  animation: gradient-shift 10s linear infinite;
}

/* LOCK IN NOW closing CTA ------------------------------------------------- */
.lockin {
  padding: 72px 40px 100px;
  background:
    radial-gradient(42% 48% at 12% 0%, rgba(255, 193, 7, 0.07), transparent 72%),
    radial-gradient(42% 48% at 88% 72%, rgba(255, 138, 0, 0.07), transparent 74%),
    radial-gradient(46% 52% at 52% 100%, rgba(255, 77, 0, 0.04), transparent 76%),
    linear-gradient(180deg, #fffdf8 0%, #fffaf1 52%, #fffefa 100%);
  color: var(--ink);
  text-align: center;
}
.lockin__title { margin-bottom: 28px; font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.01em; }
.lockin__body { max-width: 900px; margin: 0 auto 18px; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6; color: var(--muted); }
.lockin__huge { margin: 36px 0 30px; font-size: clamp(48px, 9vw, 120px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .choice { padding-left: 22px; padding-right: 22px; }
  .choice__row { grid-template-columns: 1fr; gap: 24px; }
  .choice__rows .choice__row:nth-child(even) .choice__media { order: 0; }
  .lockin { padding: 56px 22px 80px; }
}