/* Clip kit: shared by every site. Theme with these variables on :root or any ancestor:
   --clip-accent, --clip-accent-soft, --clip-glow-a, --clip-glow-b, --clip-radius.            */
:root { --clip-accent: var(--accent, #58a6ff); --clip-accent-soft: rgba(88,166,255,0.16); --clip-glow-a: rgba(88,166,255,0.16); --clip-glow-b: rgba(139,124,255,0.14); --clip-radius: 14px; }

.clip { margin: 0; position: relative; }
.clip-frame {
  position: relative; border-radius: var(--clip-radius); overflow: hidden; background: #161618; aspect-ratio: var(--clip-ratio, 1280 / 920);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.5), 0 0 90px var(--clip-glow-a);
}
.clip-frame video { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease; }
.clip.is-narrow .clip-frame { aspect-ratio: 660 / 1434; max-width: min(78%, 340px); margin-inline: auto; border-radius: 34px; }
.clip figcaption { margin-top: 0.8rem; font-size: 0.85rem; color: var(--text-faint, #707b87); text-align: center; }

/* Controls: pause/play (always reachable) and replay */
.clip-ctl {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-width: 34px; height: 34px; padding: 0 0.7rem 0 0.6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(14,17,23,0.72); color: #e6edf3; font: 600 0.8rem/1 var(--font, system-ui); cursor: pointer; opacity: 0; transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.clip:hover .clip-ctl, .clip:focus-within .clip-ctl, .clip.is-done .clip-ctl { opacity: 1; transform: none; }
.clip-ctl:hover { border-color: var(--clip-accent); }
.clip-ctl:focus-visible { outline: 2px solid var(--clip-accent); outline-offset: 2px; }
.clip-ctl .i-play, .clip.is-paused .clip-ctl .i-pause { display: none; }
.clip.is-paused .clip-ctl .i-play { display: block; }
.clip-ctl--replay { left: auto; right: 12px; display: none; }
.clip.is-done .clip-ctl--replay { display: inline-flex; }
.clip.is-done .clip-ctl--pause { display: none; }
@media (hover: none) { .clip-ctl { opacity: 0.9; transform: none; } }

/* Callouts: real text, timed to the video (data-from / data-to in seconds) */
.clip-note {
  position: absolute; z-index: 2; left: 3.2%; top: 11%; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem 0.5rem 0.7rem;
  border-radius: 999px; background: var(--clip-accent-soft); border: 1.5px solid color-mix(in srgb, var(--clip-accent) 70%, transparent); color: #e6edf3;
  font: 600 clamp(0.72rem, 0.66rem + 0.22vw, 0.86rem)/1.1 var(--font, system-ui); box-shadow: 0 0 28px var(--clip-accent-soft);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(8px) scale(0.97); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.clip-note.is-on { opacity: 1; transform: none; }
.clip-note svg { color: var(--clip-accent); flex: none; }

/* Hero: product copy left, clip right, with a soft 3D entrance and a glow that drifts on scroll */
.hero-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero-split .hero-copy .lead { max-width: 46ch; }
.hero-clip { perspective: 1800px; }
.hero-clip .clip { transform: rotateY(-7deg) rotateX(3deg) scale(0.96); transform-origin: 70% 50%; opacity: 0; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 0.9s ease; }
.hero-clip.is-in .clip { transform: none; opacity: 1; }
.product-hero.has-clip::before { opacity: 1; }
.glow-drift { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 55% at 74% 40%, var(--clip-glow-a), transparent 70%), radial-gradient(35% 45% at 90% 15%, var(--clip-glow-b), transparent 70%); transform: translate3d(0, calc(var(--sy, 0) * -0.12px), 0); will-change: transform; }

/* Showcase + stories */
.showcase-head { text-align: center; margin-inline: auto; max-width: 44rem; }
.stories { display: grid; gap: clamp(3.5rem, 9vw, 7rem); }
.story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; content-visibility: auto; contain-intrinsic-size: 700px; }
.story:nth-child(even) .story-copy { order: 2; }
.story-copy h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 0.8rem; }
.story-copy p { color: var(--text-muted, #9aa6b2); font-size: 1.075rem; max-width: 30ch; margin: 0; }
.story-copy .eyebrow { display: inline-block; margin-bottom: 0.7rem; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero-split, .story { grid-template-columns: 1fr; }
  .story:nth-child(even) .story-copy { order: 0; }
  .hero-clip .clip { transform: translateY(14px) scale(0.98); }
  .story-copy p { max-width: 46ch; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-clip .clip { opacity: 1; transform: none; transition: none; }
  .glow-drift { transform: none; }
  .clip-note { transition: none; }
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Family/home hero with a clip: keep the headline from towering over it */
.hero.has-clip { position: relative; isolation: isolate; overflow: hidden; }
.hero.has-clip h1 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); }
.hero.has-clip .hero-copy { max-width: none; }