/* Native sticky sequence: overview → Tesla → Figure. */
.paid-story { position: relative; overflow: visible; }
.paid-story .dark-section-inner { width: calc(100% - 48px); max-width: 1440px; padding: 96px 0 32px; }
.paid-story .dark-section-title { line-height: 1.15; margin-bottom: 32px; }
.paid-story .dark-section-grid { display: block; height: auto; margin: 0; }
.paid-story .dark-yes-card {
  height: calc(100svh - 210px); min-height: 520px; padding: 48px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto 1fr;
  gap: 28px 40px;
}
.paid-story .dark-yes-copy { position: static; width: 100%; max-width: 440px; grid-column: 1; grid-row: 1; align-self: end; }
.paid-story .dark-email-form { position: static; width: 100%; max-width: 420px; height: auto; min-height: 56px; grid-column: 1; grid-row: 2; margin: 0; align-self: start; }
.paid-story .dark-yes-label { font-size: 36px; }
.paid-story .dark-yes-text { font-size: clamp(22px, calc(1.7vw + 4px), 28px); line-height: 1.3; }
.paid-story .paid-phone {
  position: relative; inset: auto; grid-column: 2; grid-row: 1 / -1;
  justify-self: center; align-self: center; margin: 0;
  height: 100%; max-height: 850px; width: auto; max-width: 100%; aspect-ratio: 877 / 1920;
  padding: 24px 9px 12px; border: 3px solid #636363; border-radius: 40px;
  background: #101010; box-shadow: inset 0 0 0 2px #303030, 0 18px 36px #0002;
  opacity: 1 !important; filter: none !important;
  transform: perspective(1400px) rotateY(-14deg) rotateX(3deg) rotateZ(-2deg) !important;
  transform-origin: center;
}
.paid-phone-screen { position: relative; height: 100%; width: 100%; border-radius: 24px; overflow: hidden; background: #fafafa; }
.paid-screen { display: block; width: 100%; height: 100%; object-fit: contain; }
.paid-cases { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 20px; }
.paid-story .dark-info-card { height: 100%; min-height: 280px; container-type: inline-size; }
.paid-story .dark-info-media { height: 100%; }
.paid-story .dark-info-copy { font-size: 24px; line-height: 1.3; }
.paid-story .dark-info-card--figure .dark-info-copy { margin-bottom: 12px; }
.paid-story.is-paid-sticky { height: 380svh; }
.paid-story.is-paid-sticky .dark-section-inner {
  position: sticky; top: 0; height: 100svh; padding-top: clamp(90px, 10vh, 120px); padding-bottom: max(32px, env(safe-area-inset-bottom));
  height: 100dvh;
  display: flex; flex-direction: column; overflow: clip;
}
.is-paid-sticky .dark-section-title { flex: none; }
.is-paid-sticky .dark-section-grid { flex: 1; min-height: 0; }
.paid-story.is-paid-sticky .dark-yes-card { height: 100%; min-height: 0; }
.is-paid-sticky .paid-cases { position: absolute; z-index: 4; bottom: 0; left: 0; width: 100%; height: 50%; margin: 0; transform: translateY(110%); }
.is-paid-sticky .paid-cases .reveal { opacity: 1; transform: none; translate: none; filter: none; transition: none; }
@media(max-width:599px) {
  .paid-story .dark-section-inner { width: calc(100% - 32px); }
  .paid-story .dark-section-title { font-size: clamp(26px, 6vw, 40px); margin-bottom: 20px; }
  .paid-story .dark-yes-card { display: flex; flex-direction: column; align-items: center; padding: 20px; gap: 16px; }
  .paid-story .dark-yes-copy { max-width: none; flex: none; }
  .paid-story .dark-yes-label { font-size: 24px; margin: 0 0 6px; }
  .paid-story .dark-yes-text { font-size: 16px; }
  .paid-story .dark-email-form { flex: none; order: 0; min-height: 44px; flex-wrap: nowrap; }
  .paid-story .dark-email-form input { flex: 1; min-width: 0; width: 0; }
  .paid-story .dark-email-form button { flex: 0 1 auto; width: auto; font-size: 12px; padding: 10px; }
  .paid-story .paid-phone { order: 1; flex: 0 1 auto; height: calc(100svh - 390px); min-height: 180px; max-height: 62vh; width: auto; align-self: center; border-radius: 28px; padding: 18px 6px 8px; }
  .paid-phone-screen { border-radius: 16px; }
  .paid-cases { gap: 12px; }
  .paid-story .dark-info-card { min-height: 0; border-radius: 24px; }
  .paid-story .dark-info-copy { left: 14px; right: 14px; bottom: 20px; font-size: 21px; }
  .paid-story .dark-info-source { top: 12px; right: 12px; width: 36px; height: 36px; }
}
@media(prefers-reduced-motion:reduce) {
  .paid-story .dark-yes-card { height: auto; min-height: 620px; }
  .paid-story .paid-phone { height: 560px; max-height: none; }
  .paid-cases { min-height: 340px; }
}

/* Each case is a separate full-width layer, revealing a 20px stack edge. */
.is-paid-sticky .dark-section-grid { position: relative; }
.is-paid-sticky .paid-cases {
  inset: 0; height: 100%; display: block; transform: none; pointer-events: none;
}
.paid-story.is-paid-sticky .paid-cases .dark-info-card {
  position: absolute; left: 0; width: 100%; top: 20px; height: calc(100% - 20px);
  min-height: 0; margin: 0; z-index: 1; pointer-events: auto;
  transform: translateY(110%); box-shadow: 0 -8px 32px #0002;
}
.paid-story.is-paid-sticky .paid-cases .dark-info-card--figure {
  top: 40px; height: calc(100% - 40px); z-index: 2;
}
.paid-story .paid-cases .dark-info-media { inset: 0; width: 100%; height: 100%; background-size: cover; }
.paid-story.is-paid-sticky .dark-info-copy {
  max-width: none; width: auto; font-size: clamp(24px, calc(1.6cqw + 8px), 32px); line-height: 1.35; text-wrap: wrap;
  left: clamp(24px,4vw,56px); right: clamp(24px,4vw,56px); bottom: clamp(28px,4vh,48px);
}
@media(prefers-reduced-motion:reduce) {
  .paid-cases { grid-template-columns: 1fr; }
  .paid-story .paid-cases .dark-info-card { height: auto; min-height: 320px; aspect-ratio: 16 / 10; }
}

/* iPhone 17 Pro front styling: slim bezel, rounded glass and Dynamic Island. */
.paid-story .paid-phone {
  aspect-ratio: 72 / 150; padding: 6px; border: 2px solid #a3a5a8;
  border-radius: 38px; background: #101113;
  box-shadow: inset 0 0 0 2px #313236,
    1px 0 0 #b8babd, 2px 1px 0 #92959a, 3px 1px 0 #73767c,
    4px 2px 0 #55585e, 5px 2px 0 #45484e, 6px 3px 0 #393c42,
    7px 3px 0 #55585e, 8px 4px 0 #82858a, 9px 4px 0 #3a3d42,
    18px 24px 38px #0002;
}
.paid-story .paid-phone::after {
  content: ''; position: absolute; right: -7px; top: 25%; width: 3px; height: 10%;
  border-radius: 2px; background: linear-gradient(90deg, #42454a, #a4a7ac 55%, #55585e);
  box-shadow: 1px 0 1px #0005; pointer-events: none;
}
.paid-story .paid-phone-screen { border-radius: 30px; background: #fafafa; }
.paid-story .paid-screen {
  position: absolute; left: 0; top: 7%; width: 100%; height: 91%;
  object-fit: contain; opacity: 1;
}
.paid-phone-island {
  position: absolute; z-index: 2; top: 2.6%; left: 34%; width: 32%; height: 3.6%;
  border-radius: 999px; background: #030304;
  box-shadow: inset 0 0 0 1px #191a1c;
}
.paid-phone-island::after {
  content: ''; position: absolute; right: 9%; top: 26%; height: 48%; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #344360, #111722 48%, #07090d 70%);
}
.paid-phone-home {
  position: absolute; left: 35%; bottom: 1.7%; width: 30%; height: 3px;
  border-radius: 9px; background: #252525;
}
@media(max-width:599px) {
  .paid-story .paid-phone { padding: 4px; border-radius: 28px; }
  .paid-story .paid-phone-screen { border-radius: 22px; }
}

@media (min-width: 1025px) {
  .paid-story .dark-yes-text { font-size: 30px; }
  .paid-story .dark-info-copy,
  .paid-story.is-paid-sticky .dark-info-copy { font-size: 28px; }
}

/* The supplied artwork includes the complete phone frame and screen. */
.paid-story .paid-phone--supplied {
  aspect-ratio: 570 / 1176;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.paid-story .paid-phone--supplied::after { content: none; }
.paid-story .paid-phone--supplied .paid-phone-screen {
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.paid-story .paid-phone--supplied .paid-screen {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Keep the supplied phone artwork upright, without a perspective tilt. */
.paid-story .paid-phone--supplied { transform: none !important; }

/* The supplied video includes the complete phone frame with a transparent exterior. */
.paid-story .paid-phone--video { aspect-ratio: 9 / 16; mix-blend-mode: normal; }
.paid-phone-screen > picture { display: block; width: 100%; height: 100%; }
.paid-phone-poster { display: block; width: 100%; height: 100%; object-fit: contain; }
.paid-story .paid-phone--video .paid-screen--overview {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
}
.paid-story .paid-phone--video.is-video-ready .paid-screen--overview { opacity: 1; }
.paid-phone--video.is-video-ready .paid-phone-poster { opacity: 0; }
.paid-story .paid-phone--video.is-video-held .paid-screen--overview { opacity: 0; }
.paid-phone--video.is-video-held .paid-phone-poster { opacity: 1; }
/* Used only if the browser cannot decode the alpha channel. */
.paid-story .paid-phone--matte { mix-blend-mode: multiply; }

/* Enlarge the actual phone and its poster together, keeping the card layout. */
.paid-story .paid-phone--video .paid-phone-screen {
  transform: scale(1.5);
  transform-origin: 50% 50%;
}

/* Keep a desktop composition while two readable columns still fit. */
@media (min-width: 600px) and (max-width: 1024px) {
  .paid-story .dark-yes-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    padding: clamp(24px, 4vw, 40px);
    gap: 24px;
  }
  .paid-story .dark-yes-copy { min-width: 0; }
  .paid-story .dark-yes-text { font-size: clamp(18px, 2.4vw, 24px); }
  .paid-story .dark-email-form { min-width: 0; width: 100%; flex-wrap: nowrap; }
  .paid-story .dark-email-form input { min-width: 0; width: 0; flex: 1 1 0; font-size: 16px; }
  .paid-story .dark-email-form button { flex: 0 0 auto; width: auto; padding: 12px; font-size: 12px; }
  .paid-story .paid-phone { min-width: 0; max-width: 100%; height: 85%; }
}

/* Reserve the enlarged phone's visual top edge below the mobile form. */
@media (max-width: 599px) {
  .paid-story .paid-phone--video { margin-top: 8px; min-height: 0; flex-shrink: 1; }
  .paid-story .paid-phone--video .paid-phone-screen { transform: translateY(16px) scale(1.5); transform-origin: 50% 50%; }
}