/* ═══════════════════════════════════════════════════════════
   Knovit Landing · v10 — Use Cases "pinned phone" (Bevel-style)
   Loaded only by Knovit Landing v10.html. The section markup is
   produced by UseCasesPinned (landing-v10-overrides.jsx), which
   replaces window.UseCasesStack for v10 only. The old section is
   preserved as UseCasesBackup.

   STICKY SAFETY (do not regress):
   • No ancestor of .kn-ucp__stage may set overflow ≠ visible.
   • No ancestor may set transform / filter / perspective.
   • The section is NOT wrapped in <Reveal> (Reveal animates with
     transform and would silently kill the sticky).
   ═══════════════════════════════════════════════════════════ */

.kn-ucp {
  position: relative;
  --ucp-accent: #4D1499;
  /* One tint across the whole section (intro + pinned area) so the title
     clearly belongs to the section instead of floating on the page. */
  background: color-mix(in srgb, var(--ucp-accent) 8%, #FAF8F2);
  transition: background 0.6s ease;
  padding: 128px 0 0;
}

/* ── Intro (copy unchanged from the original section) ──────── */
.kn-ucp__intro {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px 24px;
  text-align: center;
}
.kn-ucp__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-900, #14131B);
  margin: 0;
  text-wrap: balance;
}
.kn-ucp__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--knovit-purple, #3C007C);
}
.kn-ucp__sub {
  margin: 22px auto 0;
  max-width: 620px;
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-500, #565574);
  text-wrap: pretty;
}

/* ── Track + pinned stage ──────────────────────────────────── */
.kn-ucp__track {
  position: relative;
}

.kn-ucp__stage {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 1;
  overflow: visible;
}

/* The single, still phone — centered, fully visible */
.kn-ucp__phone {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 44px 90px rgba(18,16,38,0.26));
}

/* Cross-fading bespoke app screens inside the existing iPhone frame */
.kn-ucp__screens {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #ffffff;
}
.kn-ucp__screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.kn-ucp__screen.is-active { opacity: 1; }
.kn-ucp__screen-scroll {
  position: absolute;
  top: 0; left: 0; right: 0;
  will-change: transform;
}

/* ── Floating persona card — Apple-style photo card (parallaxes) ─ */
.kn-ucp__persona {
  position: absolute;
  top: calc(50% - 168px);
  left: calc(50% + var(--ucp-phone-half, 165px) + 36px);
  width: 268px;
  z-index: 4;
  will-change: transform;
}
.kn-ucp__persona-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 26px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ucp-accent) 14%, #fff);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 40px 80px -36px rgba(18,16,38,0.62);
  animation: ucpFloatIn 0.6s var(--ease-out, cubic-bezier(.2,.7,.2,1)) both;
}
@keyframes ucpFloatIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kn-ucp__persona-media { position: absolute; inset: 0; }
.kn-ucp__persona-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}
.kn-ucp__persona-media image-slot {
  width: 100%; height: 100%; display: block;
}
.kn-ucp__persona-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,8,20,0) 52%,
    rgba(10,8,20,0.28) 100%);
  pointer-events: none;
}
.kn-ucp__persona-meta {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 15px 13px;
  border-radius: 16px;
  background: rgba(18,16,30,0.42);
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  z-index: 2;
}
.kn-ucp__persona-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-text);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.86);
}
.kn-ucp__persona-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--ucp-accent) 55%, #fff);
}
.kn-ucp__persona-name {
  font-family: var(--font-display);
  font-weight: 500; font-size: 17px; line-height: 1.2;
  color: #fff;
}

/* Mobile-only persona card (stacked) — hidden on desktop */
.kn-ucp__seg-persona { display: none; }

/* ── Scrolling text rail (overlaps the pinned stage) ───────── */
.kn-ucp__rail {
  position: relative;
  margin-top: -100vh;
  z-index: 3;
  pointer-events: none;
}
.kn-ucp__seg {
  height: 100vh;
  display: flex;
  align-items: center;
}
.kn-ucp__seg-inner {
  pointer-events: auto;
  /* Right edge is pinned LEFT of the centered phone at every width:
     ≈ 50vw − half-phone − gap. Prevents the opaque screen from clipping
     the longer body lines at mid widths (768–1080px). */
  width: min(392px, calc(45vw - 170px));
  margin-left: max(24px, 4.5vw);
}
.kn-ucp__seg-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ucp-accent);
  margin-bottom: 18px;
}
.kn-ucp__seg-tag::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ucp-accent);
}
.kn-ucp__seg-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink-900, #14131B);
  margin: 0 0 18px;
  text-wrap: balance;
}
.kn-ucp__seg-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--ucp-accent);
}
.kn-ucp__seg-body {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-500, #565574);
  margin: 0;
  max-width: 380px;
  text-wrap: pretty;
}

/* Per-segment phone (mobile only — hidden on desktop) */
.kn-ucp__seg-phone { display: none; }

/* Release tail — gives the sticky stage enough travel to stay pinned
   through ALL four segments; the phone frees here, then the section ends. */
.kn-ucp__tail { height: 80vh; }

/* Hide the floating persona card when there isn't horizontal room for it */
@media (max-width: 959px) {
  .kn-ucp__persona { display: none; }
}

/* Mid widths: smaller type; width/clearance handled by the base calc above */
@media (max-width: 1080px) and (min-width: 768px) {
  .kn-ucp__seg-headline { font-size: clamp(26px, 4vw, 36px); }
  .kn-ucp__seg-body { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE (<768px) — no sticky, no parallax, no cross-fade.
   Single column: each segment shows its text then its screen,
   stacked, keeping the segment's background tint.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .kn-ucp { padding: 88px 0 0; }
  .kn-ucp__intro { margin-bottom: 8px; }

  .kn-ucp__stage { display: none; }       /* drop the pinned phone */
  .kn-ucp__rail { margin-top: 0; }
  .kn-ucp__tail { display: none; }

  .kn-ucp__seg {
    display: block;
    height: auto;
    min-height: 0;
    padding: 56px 22px 60px;
    background: color-mix(in srgb, var(--seg-accent, #4D1499) 8%, #FAF8F2);
  }
  .kn-ucp__seg-inner {
    width: auto;
    margin: 0 0 26px;
  }
  .kn-ucp__seg-headline { font-size: clamp(28px, 8vw, 40px); }

  /* Persona photo card, stacked above the app screen */
  .kn-ucp__seg-persona {
    display: block;
    width: min(320px, 78vw);
    margin: 0 auto 26px;
  }

  .kn-ucp__seg-phone {
    display: flex;
    justify-content: center;
  }
  .kn-ucp__seg-phone .kn-ucp__screens { position: absolute; inset: 0; }
}

/* ── Hero phone: real product screenshot (frame-less) ─────────
   Light app background matches the screenshot's own top edge so the
   re-added status bar blends seamlessly into the image. */
.milo--photo {
  background: #F8F8FB;
  overflow: hidden;
}
.milo--photo .milo__photo-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Camille's network avatars → real circular photos ─────────
   Static <img> cropped to a circle; the screen still scrolls. */
.kn-uc-scr__net-avatar--img {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
  background: #e9e7f0;
}
.kn-uc-scr__net-avatar--img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* ── Manager screen: real product screenshot (frame-less) ─────
   Peach app background matches the screenshot's own top edge so the
   generated status bar blends seamlessly into the image below it. */
.kn-uc-scr--photo {
  background: #FBF4ED;
  min-height: 100%;
  padding-bottom: 0;
}
.kn-uc-scr__photo-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Reduced motion: instant screen switch, no parallax ────── */
@media (prefers-reduced-motion: reduce) {
  .kn-ucp__screen { transition: none; }
  .kn-ucp__stage { transition: none; }
  .kn-ucp { transition: none; }
  .kn-ucp__persona-card { animation: none; }
  .kn-ucp__persona { transform: none !important; }
}