/* ==========================================================================
   Cenematic home-c — "Pay Once. Own It Forever." section

   White stage: a gradient-accent heading over alternating text / video
   rows. Rows render from pay-once.js. Media is the placeholder video thumbnail
   — swap for the real video.
   ========================================================================== */

.po {
  position: relative;
  overflow: hidden;
  padding: 92px 40px;
  background: #fff;
  color: var(--ink);
}

.po::before {
  display: none;
}
.po__inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }

.po__heading {
  margin-bottom: 56px;
  text-align: center;
  font-size: clamp(32px, 4.6vw, 60px);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.po__accent {
  background: linear-gradient(105deg, #ffc107, #ff8a00, #ff3d00, #ffc107);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 14s linear infinite;
}

.po__rows { display: flex; flex-direction: column; gap: 64px; }
.po__row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.po__rows .po__row:nth-child(even) .po__media { order: -1; }

.po__title { margin-bottom: 16px; font-size: clamp(22px, 2.6vw, 34px); font-weight: 900; line-height: 1.15; }
.po__kicker { color: #ff8a00; }
.po__body { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.72; color: var(--muted); }

.po__media { margin: 0; }
.po__media img {
  display: block;
  width: 100%;
  border-radius: 16px;
  border: 3px solid transparent;
  background: linear-gradient(120deg, #ffc107, #ff8a00, #ff3d00, #ffc107) border-box;
  background-size: 300% 100%;
  animation: gradient-shift 10s linear infinite;
  box-shadow: 0 34px 80px -34px rgba(255, 138, 0, 0.45);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 860px) {
  .po { padding: 64px 22px; }
  .po__heading { margin-bottom: 40px; }
  .po__row { grid-template-columns: 1fr; gap: 28px; }
  .po__rows .po__row:nth-child(even) .po__media { order: 0; }
}