/* The platform walkthrough: a quiet dark stage so the light software carries the section. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.platform-film{
  --film-edge:#ffffff1f;
  --film-dim:#9fb3a7;
  background:var(--dark);
  color:var(--paper);
  padding:96px 0 88px;
  margin-top:0;
}
.platform-film .product-heading h2{color:var(--paper)}
.platform-film .product-heading h2 span{color:var(--lime)}
.platform-film .product-heading p{color:#b9cfc1;max-width:46ch}
.platform-film .eyebrow{color:var(--lime)}

.film-stage{margin-top:44px}
.film-figure{margin:0}
.film-frame{
  position:relative;margin:0;
  border-radius:8px;
  border:1px solid var(--film-edge);
  background:#0d1a16;
  overflow:hidden;
  box-shadow:0 40px 120px #0009, 0 6px 24px #0006;
}
.film-frame video,.film-frame .film-poster{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0d1a16;
}
.film-frame .film-poster{position:absolute;inset:0;height:100%;transition:opacity .5s ease}
.film-playing .film-poster{opacity:0;pointer-events:none}

/* One primary affordance before anything loads. */
.film-start{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;
  border:0;background:#08121099;color:var(--paper);font:inherit;font-weight:600;font-size:15px;
  letter-spacing:.01em;cursor:pointer;transition:background .3s ease;
}
.film-start:hover{background:#081210b3}
.film-start span{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border-radius:999px;background:var(--lime);color:var(--ink)}
.film-playing .film-start{display:none}

.film-bar{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:16px;
  padding:14px 18px;background:linear-gradient(to top,#040807e6,#04080700);
  opacity:0;transition:opacity .3s ease;
}
.film-frame:hover .film-bar,.film-frame:focus-within .film-bar{opacity:1}
.film-bar button{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--film-edge);border-radius:999px;background:#0810107a;color:var(--paper);cursor:pointer;padding:0;
}
.film-bar button:hover{background:#081010b8}
.film-bar svg{width:16px;height:16px;fill:currentColor}
.film-track{flex:1;height:3px;border-radius:2px;background:#ffffff26;overflow:hidden}
.film-track>span{display:block;height:100%;width:0;background:var(--lime);transition:width .2s linear}
.film-time{font-size:12px;letter-spacing:.06em;color:var(--film-dim);font-variant-numeric:tabular-nums;min-width:74px;text-align:right}

.platform-film figcaption{
  margin-top:16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--film-dim);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* Chapters double as the written summary of what the film shows. */
.film-chapters{margin-top:40px}
.film-chapters ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--film-edge)}
.film-chapters li{background:var(--dark)}
.film-chapters button{
  width:100%;height:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:20px 16px 22px;color:var(--film-dim);font:inherit;display:grid;gap:7px;align-content:start;
  border-top:2px solid transparent;transition:color .25s ease,border-color .25s ease;
}
.film-chapters button:hover{color:var(--paper)}
.film-chapters strong{font-size:14px;font-weight:600;color:var(--paper);line-height:1.3}
.film-chapters small{font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.film-chapters p{font-size:12px;line-height:1.6;margin:0}
.film-chapters [aria-current="true"]{border-top-color:var(--lime);color:var(--paper)}
.film-chapters [aria-current="true"] small{color:var(--lime)}

@media(max-width:1100px){
  .film-chapters ol{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .platform-film{padding:64px 0 56px}
  .film-stage{margin-top:28px}
  .film-chapters ol{grid-template-columns:1fr 1fr}
  .film-chapters button{padding:14px 12px 16px}
  .film-chapters p{display:none}
  .film-bar{opacity:1;padding:10px 12px}
  .film-time{min-width:62px}
  .film-start{font-size:14px}
}

/* No autoplay, no fades: the visitor drives it with the native controls. */
@media(prefers-reduced-motion:reduce){
  .film-frame .film-poster{transition:none}
  .film-start{transition:none}
}

/* Narrated films (Awaab's Law, leak detection): the play button only appears once
   the script has taken over from the native controls. */
.film-start[hidden]{display:none}
.film-frame video:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.film-transcript{margin-top:28px;border-top:1px solid var(--film-edge);border-bottom:1px solid var(--film-edge)}
.film-transcript summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;cursor:pointer;list-style:none;color:var(--paper);font-weight:600;font-size:15px}
.film-transcript summary::-webkit-details-marker{display:none}
.film-transcript summary::after{content:"+";color:var(--lime);font-size:22px;font-weight:400;line-height:1}
.film-transcript[open] summary::after{content:"−"}
.film-transcript summary:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.film-transcript div{padding:4px 0 24px;max-width:72ch}
.film-transcript p{margin:0 0 14px;color:var(--on-dark-muted);font-size:15px;line-height:1.75}
/* The posters carry their own titles, so the button sits in the corner over a
   bottom fade instead of dimming the whole frame. */
.narrated-film .film-start{align-items:flex-end;justify-content:flex-start;padding:28px;background:linear-gradient(to top,color-mix(in srgb,var(--dark) 72%,transparent),transparent 42%)}
.narrated-film .film-start:hover{background:linear-gradient(to top,color-mix(in srgb,var(--dark) 82%,transparent),transparent 50%)}
@media(max-width:700px){
  .narrated-film .film-start{padding:12px}
  .narrated-film .film-start span{gap:8px;padding:9px 14px;font-size:13px}
}