/* Product spotlights: real app captures in glass frames (features + upsells pages),
   and the three Val sales channels, where Val pops up from behind a card to explain it. */

.spot-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: center; }
.spot-split--flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.spot-split--flip .spot-split__copy { order: 2; }
.spot-split__copy .label { display: block; margin-bottom: 12px; }
.spot-split__copy .heading-xl { margin-bottom: 16px; }
.spot-split__copy .body-lg { margin-bottom: 20px; }
.spot-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--persona-color, var(--green)); text-decoration: none; }
.spot-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.spot-note { margin-top: 12px; font-size: 13px; color: var(--text-3); }

.shot-frame {
  position: relative; margin: 0; border-radius: 20px; overflow: hidden;
  background: #040605; border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 70px rgba(0, 0, 0, .55);
}
.shot-frame img { display: block; width: 100%; height: auto; }

/* reply in the thread, the Teach dialog stacked over its corner */
/* dialog hangs below the thread, leaving the reply and its Apprendre à Iris button visible */
.teach-stack { position: relative; padding-bottom: 47%; }
.teach-stack .shot-frame--dialog { position: absolute; left: 4%; top: 36.5%; width: 46%; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }

/* ---------- Val's three channels ---------- */
.val-channels-intro { margin: 72px 0 8px; text-align: center; }
.val-channels-intro .heading-lg { margin-bottom: 8px; }
.val-channels-intro .hint-touch { display: none; }
@media (hover: none) {
  .val-channels-intro .hint-hover { display: none; }
  .val-channels-intro .hint-touch { display: inline; }
}
.val-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.val-channel { position: relative; padding-top: 112px; }
/* Val waits behind the card and rises over its top edge */
.val-channel__val {
  position: absolute; right: 22px; top: 112px; height: 150px; width: auto; z-index: 0; pointer-events: none;
  transform: translateY(16px); opacity: 0;
  transition: transform .55s cubic-bezier(.3, 1.45, .5, 1), opacity .2s ease;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5));
}
.val-channel__card {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; width: 100%; min-height: 370px;
  padding: 26px 24px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)), var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: border-color .3s ease, transform .3s ease;
}
.val-channel__card:focus-visible { outline: 2px solid var(--persona-color); outline-offset: 3px; }
.val-channel__tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--persona-color); padding: 5px 10px; border-radius: 999px; background: color-mix(in oklch, var(--persona-color) 14%, transparent); }
.val-channel__title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.val-channel__line { font-size: 16px; line-height: 1.5; color: var(--text-2); transition: opacity .25s ease, transform .25s ease; }
.val-channel__bubble {
  position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 16px; border-radius: 16px 16px 16px 4px;
  font-size: 15px; line-height: 1.5; color: var(--text);
  background: color-mix(in oklch, var(--persona-color) 12%, var(--surface-3));
  border: 1px solid color-mix(in oklch, var(--persona-color) 40%, transparent);
  opacity: 0; transform: translateY(10px) scale(.98); transform-origin: bottom left;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .9, .25, 1);
}
.val-channel__bubble b { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; color: var(--persona-color); }
.val-channel__bubble b img { width: 22px; height: 22px; border-radius: 50%; }

.val-channel.is-open .val-channel__val { transform: translateY(-104px); opacity: 1; transition-delay: 0s, 0s; }
.val-channel.is-open .val-channel__card { border-color: color-mix(in oklch, var(--persona-color) 55%, transparent); }
.val-channel.is-open .val-channel__line { opacity: 0; transform: translateY(-6px); }
.val-channel.is-open .val-channel__bubble { opacity: 1; transform: none; transition-delay: .12s; }
@media (hover: hover) {
  .val-channel:hover .val-channel__val { transform: translateY(-104px); opacity: 1; }
  .val-channel:hover .val-channel__card { border-color: color-mix(in oklch, var(--persona-color) 55%, transparent); }
  .val-channel:hover .val-channel__line { opacity: 0; transform: translateY(-6px); }
  .val-channel:hover .val-channel__bubble { opacity: 1; transform: none; transition-delay: .12s; }
}

@media (max-width: 900px) {
  .spot-split, .spot-split--flip { grid-template-columns: 1fr; gap: 32px; }
  .spot-split--flip .spot-split__copy { order: 0; }
  .val-channels { grid-template-columns: 1fr; gap: 0; }
  .val-channel { padding-top: 100px; }
  .val-channel__val { top: 100px; }
  .val-channel__card { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .val-channel__val, .val-channel__card, .val-channel__line, .val-channel__bubble { transition: none; }
}