/* Shared explainer-video styles — used by academy-video, process-video, ai-ready-video, home-video, etc.
   Paired with explainer.js (the player engine). */
:root{
  --ground:#0E2A20; --green:#1B4332; --green2:#2D6A4F; --gold:#E9C46A; --gold2:#F0D48A;
  --cream:#F5F1E6; --muted:rgba(245,241,230,.66); --line:rgba(233,196,106,.28);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;background:#07160f;color:var(--cream);font-family:var(--sans);}
a{color:var(--gold);}
.lp-top{display:flex;align-items:center;justify-content:space-between;max-width:1680px;margin:0 auto;padding:clamp(20px,2.6vw,30px) 22px;}
.lp-top img{height:30px;width:auto;}
.lp-top a{font-size:.82em;font-weight:700;color:var(--muted);text-decoration:none;}
.lp-wrap{max-width:1680px;margin:0 auto;padding:clamp(18px,3vw,38px) 22px 70px;}
.lp-hero{text-align:center;padding:0;}
.lp-hero .lp-eyebrow{margin-bottom:clamp(16px,2.2vw,26px);}
.lp-eyebrow{display:block;text-align:center;font-size:clamp(.84rem,1.5vw,1.08rem);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.lp-hero h1{font-size:clamp(1.7rem,4.4vw,3rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:14px auto 12px;max-width:20ch;text-wrap:balance;}
.lp-hero h1 .hl{color:var(--gold);}
.lp-hero p{color:var(--muted);font-size:clamp(1rem,2vw,1.15rem);line-height:1.6;max-width:52ch;margin:0 auto 26px;}
.stage{position:relative;width:100%;max-width:1240px;margin:0 auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:
  radial-gradient(120% 90% at 80% 10%, rgba(45,106,79,.55), transparent 60%),
  radial-gradient(90% 80% at 8% 94%, rgba(233,196,106,.12), transparent 55%),
  linear-gradient(155deg,#123528 0%, var(--ground) 55%, #081a12 130%);
  box-shadow:0 40px 120px rgba(0,0,0,.55), inset 0 0 0 1px rgba(233,196,106,.14);}
.grain{position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.7) 1px,transparent 1px);background-size:3px 3px;}
.top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:flex-end;align-items:center;padding:clamp(12px,2.4vw,24px);z-index:5;}
.brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:clamp(.7rem,1.2vw,.9rem);opacity:.9;}
.brand i{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block;}
.scene{position:absolute;inset:0;display:flex;align-items:center;gap:clamp(14px,3vw,44px);padding:0 clamp(22px,5vw,60px) clamp(64px,8vw,96px);opacity:0;transition:opacity .6s ease;}
.scene.active{opacity:1;}
.presenter{flex:0 0 auto;width:clamp(120px,22%,240px);text-align:center;}
/* The agent art is a square crop of a wide banner: the face sits high and a little
   left of centre, so a circle inscribed in that square lands its rim across the top
   of the head. The circle now lives on a wrapper, which gives the image somewhere to
   move — --av-zoom fills the corners the lift would otherwise expose, and --av-lift
   drops the subject far enough for real headroom. Tune these two values only. */
:root{--av-zoom:1;--av-lift:0%;}
 /* A square image inscribed in a circle loses its corners; at zoom 1 the head can
    still graze the rim depending on where the artwork places it. Scaling to .88
    pulls the whole subject inside with real margin, and the small corner gaps read
    as background because the artwork's edges are dark to begin with. */
 /* Zoom measured, not guessed: the highest head in the cast (Khalid) starts
    3% from the top edge, and any zoom above 1 crops that margin away before
    the circle clips. At 1 the square image exactly fills the circle with no
    gaps, which is the maximum headroom available. */
.presenter__fig{display:block;position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:5px solid var(--gold);background:#0c1c14;box-shadow:0 22px 60px rgba(0,0,0,.55);}
.presenter__img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--av-zoom)) translateY(var(--av-lift));}
.scene.active .presenter__fig{animation:ring 1.7s ease-out infinite;border-radius:50%;}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(233,196,106,.5);}70%{box-shadow:0 0 0 22px rgba(233,196,106,0);}100%{box-shadow:0 0 0 0 rgba(233,196,106,0);}}
.presenter__nm{margin-top:13px;font-weight:800;font-size:clamp(.92rem,1.8vw,1.25rem);}
.presenter__role{font-size:clamp(.64rem,1.2vw,.84rem);color:var(--muted);}
.content{flex:1;min-width:0;}
.eyebrow{font-size:clamp(.62rem,1.15vw,.78rem);font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:clamp(8px,1.4vw,14px);}
.line{font-size:clamp(1.3rem,3.4vw,2.6rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;max-width:20ch;text-wrap:balance;margin:0;}
.line .hl{color:var(--gold);}
.sub{margin-top:clamp(10px,1.6vw,16px);font-size:clamp(.9rem,1.7vw,1.12rem);color:var(--muted);max-width:40ch;line-height:1.5;}
@media (max-width:680px){.sub,.line{margin-left:auto;margin-right:auto;}}
.scene.active .rise{animation:rise .6s cubic-bezier(.2,.7,.2,1) both;}
.scene.active .rise.d1{animation-delay:.12s;}.scene.active .rise.d2{animation-delay:.26s;}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:#123528;font-weight:800;font-size:clamp(.9rem,1.6vw,1.1rem);text-decoration:none;padding:13px 24px;border-radius:999px;box-shadow:0 14px 40px rgba(233,196,106,.32);transition:transform .15s,box-shadow .15s;margin-top:clamp(12px,1.8vw,20px);}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(233,196,106,.45);}
.cta.ghost{background:transparent;color:var(--gold);box-shadow:none;border:2px solid var(--gold);}
.prog{position:absolute;left:clamp(22px,5vw,60px);right:clamp(22px,5vw,60px);bottom:clamp(13px,2.2vw,24px);display:flex;gap:5px;z-index:5;}
.seg{flex:1;height:3px;border-radius:2px;background:rgba(245,241,230,.18);overflow:hidden;cursor:pointer;} .seg i{display:block;height:100%;width:0;background:var(--gold);} .seg.done i{width:100%;}
.seg:hover{background:rgba(245,241,230,.34);}
.ov{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:clamp(10px,1.5vh,18px);background:rgba(7,22,15,.62);backdrop-filter:blur(3px);text-align:center;padding:clamp(22px,4vh,44px) 22px clamp(20px,3.4vh,38px);overflow-y:auto;}
.ov.hide{display:none;}
/* Replay, on the end card. The markup has always been there and no rule ever
   matched it, so it rendered as a bare browser button on a dark blurred panel —
   present in the DOM and invisible to anybody looking at it. It sits under the
   next-step buttons because replaying is the quieter choice: outlined, not
   filled, so it never competes with the thing we actually want them to do. */
.replay{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(10px,1.6vh,16px);
  padding:11px 22px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--cream,#EAF2EC);
  border:1.5px solid rgba(255,255,255,.34);
  font:inherit;font-weight:700;font-size:clamp(.78rem,1.3vw,.92rem);
  transition:border-color .15s,background .15s,transform .15s;}
.replay:hover{border-color:var(--gold);color:var(--gold);background:rgba(233,196,106,.08);transform:translateY(-1px);}
.replay:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){.replay{transition:none;} .replay:hover{transform:none;}} .ov h2{font-size:clamp(1.4rem,4vw,2.6rem);font-weight:800;margin:0;max-width:20ch;text-wrap:balance;} .ov h2 .hl{color:var(--gold);} .ov p{color:var(--muted);margin:0;max-width:40ch;font-size:clamp(.84rem,1.5vw,1rem);}
.playbtn{flex:none;width:clamp(72px,9vw,100px);height:clamp(72px,9vw,100px);border-radius:50%;border:none;cursor:pointer;background:var(--gold);color:#123528;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 50px rgba(233,196,106,.4);transition:transform .15s;}
.playbtn:disabled{opacity:.5;cursor:default;} .playbtn:hover:not(:disabled){transform:scale(1.06);} .playbtn svg{width:42%;height:42%;margin-left:8%;}
/* Start overlay: the whole cast, as cards, while the video builds. The in-scene
   presenter keeps its circle and its pulsing ring — this is only the wait. Cards
   are rounded rectangles rather than circles so the full portrait shows and no
   head is ever clipped. */
/* The proposition, inside the frame, while it builds. Sized to stay readable
   without pushing the play button off a short stage. */
.ov-head{font-size:clamp(1.15rem,2.9vw,2.05rem)!important;line-height:1.14;letter-spacing:-.02em;max-width:22ch;text-wrap:balance;margin:0;}
.ov-head .hl{color:var(--gold);}
.ov-sub{max-width:58ch;font-size:clamp(.78rem,1.4vw,.96rem);line-height:1.55;color:var(--cream);opacity:.88;margin:0;}
.ov-status{display:flex;align-items:center;gap:10px;}
.ov-status p{margin:0;font-size:clamp(.72rem,1.2vw,.84rem);color:var(--muted);}
.ov-status .spin{width:20px;height:20px;border-width:2px;}
@media (max-width:680px){ .ov-sub{display:none;} .ov{gap:11px;} }

/* A scene that leads with a mark rather than a headline. The artwork sits on
   its own dark ground, so screen blending drops that ground and leaves the
   gold — no cut-out file needed, and it sits seamlessly on the stage. */
.scene-logo{display:block;width:clamp(210px,32vw,400px);height:auto;margin:0 0 clamp(2px,.6vw,8px) -2%;
  mix-blend-mode:screen;filter:drop-shadow(0 14px 34px rgba(0,0,0,.4));}
@media (max-width:680px){ .scene-logo{margin-left:auto;margin-right:auto;width:clamp(180px,58vw,270px);} }

/* On-screen points, for a scene where the words themselves are the content and
   hearing them once is not enough. Sized to sit under the line without pushing
   the presenter out of the frame. */
.points{list-style:none;margin:clamp(10px,1.6vw,16px) 0 0;padding:0;display:grid;gap:clamp(5px,.8vw,9px);max-width:44ch;}
.points li{display:grid;grid-template-columns:clamp(56px,7vw,84px) 1fr;gap:clamp(8px,1.2vw,14px);align-items:baseline;}
.points b{font-size:clamp(.66rem,1.15vw,.84rem);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.points span{font-size:clamp(.76rem,1.35vw,1rem);line-height:1.4;color:var(--cream);opacity:.92;}
@media (max-width:680px){ .points{max-width:100%;margin-left:auto;margin-right:auto;text-align:left;} }

.ov-cast{display:flex;gap:clamp(12px,2.4vw,28px);align-items:flex-start;justify-content:center;flex-wrap:wrap;}
.ov-card{width:clamp(128px,17vw,208px);text-align:center;opacity:0;animation:ovRise .55s cubic-bezier(.2,.7,.3,1) forwards;}
.ov-card__img{display:block;width:100%;height:auto;border-radius:14px;
  border:2px solid rgba(233,196,106,.55);background:#0f2f24;box-shadow:0 20px 50px rgba(0,0,0,.55);}
.ov-card__nm{margin-top:8px;font-weight:800;font-size:clamp(.78rem,1.3vw,.94rem);letter-spacing:-.01em;}
.ov-card__role{margin-top:2px;font-size:clamp(.62rem,1.1vw,.76rem);color:var(--muted);line-height:1.35;}
@keyframes ovRise{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .ov-card{animation:none;opacity:1;} }
@media (max-width:680px){ .ov-card{width:clamp(104px,30vw,140px);} .ov-card__role{display:none;} }

.avatar-lg{flex:none;display:block;position:relative;width:clamp(84px,10vw,116px);height:clamp(84px,10vw,116px);border-radius:50%;border:3px solid var(--gold);background:#0f2f24;overflow:hidden;}
.avatar-lg img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--av-zoom)) translateY(var(--av-lift));}
.spin{flex:none;width:34px;height:34px;border-radius:50%;border:3px solid rgba(233,196,106,.25);border-top-color:var(--gold);animation:sp 1s linear infinite;} @keyframes sp{to{transform:rotate(360deg);}}
.mutebtn{position:absolute;bottom:clamp(13px,2.2vw,24px);right:clamp(22px,5vw,60px);z-index:6;background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--cream);border-radius:999px;padding:6px 12px;font-size:.72rem;font-weight:700;cursor:pointer;display:none;}
.ctrls{position:absolute;left:clamp(22px,5vw,60px);right:clamp(22px,5vw,60px);bottom:clamp(24px,3.4vw,40px);z-index:6;display:none;align-items:center;gap:8px;}
.ctrls.on{display:flex;}
.cbtn{background:rgba(0,0,0,.42);border:1px solid var(--line);color:var(--cream);border-radius:999px;min-width:34px;height:34px;padding:0 11px;font-size:.78rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,transform .15s;}
.cbtn:hover{background:rgba(0,0,0,.66);transform:translateY(-1px);}
.cbtn:disabled{opacity:.35;cursor:default;transform:none;}
.cbtn svg{width:14px;height:14px;fill:currentColor;}
.cbtn.wide{padding:0 14px;}
.ctrls .scenenum{margin-left:auto;font-size:.7rem;color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums;}
.lp-cta{max-width:760px;margin:34px auto 0;text-align:center;background:linear-gradient(160deg,#153c2c,#0d271d);border:1px solid var(--line);border-radius:22px;padding:clamp(30px,5vw,52px) clamp(24px,5vw,52px);}
.lp-cta h2{font-size:clamp(1.5rem,3.6vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance;} .lp-cta h2 .hl{color:var(--gold);}
.lp-cta p{color:var(--cream);opacity:.9;font-size:clamp(.98rem,1.8vw,1.12rem);line-height:1.65;max-width:56ch;margin:0 auto 26px;}
/* The action plan, directly under the video. Numbered because the steps genuinely
   depend on each other — you cannot pilot before you know where you stand. */
.plan{max-width:1180px;margin:clamp(30px,4vw,48px) auto 0;padding:0 22px;}
.plan__h{text-align:center;font-size:clamp(1.35rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 clamp(18px,2.4vw,28px);}
.plan__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(14px,1.8vw,22px);}
.plan__step{background:linear-gradient(165deg,rgba(21,60,44,.72),rgba(13,39,29,.72));border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2.4vw,26px);}
.plan__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.plan__n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#123528;font-weight:800;font-size:.92rem;}
.plan__ico{width:30px;height:30px;color:var(--gold);opacity:.85;}
.plan__t{font-size:1.06rem;font-weight:800;margin:0 0 7px;letter-spacing:-.01em;}
.plan__b{font-size:.9rem;line-height:1.6;color:var(--muted);margin:0;}
.plan__b strong{color:var(--cream);font-weight:700;}
.plan__meta{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:.78rem;font-weight:700;color:var(--gold);}

/* Named contacts under a briefing. Photographs are shown as squares, not
   circles, so nobody's head is cropped by the frame. */
.ex-contacts{max-width:900px;margin:40px auto 0;padding:28px 0 0;border-top:1px solid rgba(255,255,255,.12);}
.ex-contacts__h{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;margin:0 0 22px;}
.ex-contacts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;max-width:820px;margin:0 auto;}
.ex-contact{text-align:center;}
.ex-contact__img{display:block;width:104px;height:104px;object-fit:cover;object-position:50% 22%;border-radius:14px;margin:0 auto 12px;border:2px solid rgba(233,196,106,.45);background:#0f2f24;}
.ex-contact__nm{font-weight:800;font-size:.96rem;letter-spacing:-.01em;}
.ex-contact__role{font-size:.76rem;color:var(--muted);line-height:1.45;margin-top:3px;}
.ex-contact__links{margin-top:8px;font-size:.78rem;}
.ex-contact__links a{color:var(--gold);font-weight:700;text-decoration:none;}
.ex-contact__links a:hover{text-decoration:underline;}

footer{max-width:1680px;margin:48px auto 0;padding:22px;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:var(--muted);font-size:.82rem;}
@media (max-width:680px){
  .stage{aspect-ratio:9/13;}
  .scene{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;padding:16px 16px 72px;overflow-y:auto;}
  .presenter{width:118px;} .presenter__fig{border-width:4px;}
  .presenter__nm{margin-top:8px;font-size:1rem;} .presenter__role{font-size:.72rem;}
  .content{text-align:center;width:100%;}
  .eyebrow{margin-bottom:6px;font-size:.62rem;} .line{font-size:1.4rem;max-width:100%;margin:0 auto;} .sub{font-size:.9rem;max-width:100%;margin:8px auto 0;}
  .cta{font-size:.86rem;padding:11px 18px;margin-top:12px;} .prog{left:14px;right:14px;bottom:9px;}
  .ov h2{font-size:1.5rem;} .ov p{font-size:.86rem;}
  .ctrls{gap:6px;bottom:14px;flex-wrap:wrap;justify-content:center;}
  .cbtn{min-width:30px;height:30px;padding:0 9px;font-size:.7rem;}
  .ctrls .scenenum{margin-left:0;width:100%;order:5;text-align:center;}
  .playbtn{width:66px;height:66px;}
}
@media (max-width:400px){ .stage{aspect-ratio:4/6;} .line{font-size:1.26rem;} .presenter{width:104px;} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:opacity .2s!important;}}

/* ---- Left video + right rail (stats / specs / social share) ---- */
.ex-row{display:flex;gap:28px;align-items:flex-start;max-width:1680px;margin:0 auto;}
.ex-row .stage{flex:1;min-width:0;margin:0;}
.ex-rail{flex:0 0 300px;max-width:300px;text-align:left;}
@media (max-width:900px){ .ex-row{flex-direction:column;} .ex-rail{flex:none;width:100%;max-width:100%;} }
.ex-rail__card{background:#0e2a20;border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:16px;}
.ex-rail__title{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 12px;}
.ex-stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.08);}
.ex-stat:first-of-type{border-top:0;padding-top:0;}
.ex-stat__n{font-weight:800;color:#fff;font-size:1.15rem;font-variant-numeric:tabular-nums;}
.ex-stat__l{color:var(--muted);font-size:.84rem;text-align:right;line-height:1.3;}
.ex-rail__note{color:var(--muted);font-size:.82rem;line-height:1.55;margin:12px 0 0;}
.ex-share{display:flex;gap:9px;flex-wrap:wrap;}
.ex-share a,.ex-share button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--cream);text-decoration:none;cursor:pointer;transition:background .15s,transform .15s;padding:0;}
.ex-share a:hover,.ex-share button:hover{background:rgba(233,196,106,.22);transform:translateY(-1px);}
.ex-share svg{width:18px;height:18px;fill:currentColor;}


/* Co-presented decks: both agents on screen, the speaker brought forward. */
.presenter--duo{display:flex;flex-direction:column;gap:clamp(6px,1vw,12px);justify-content:center;max-height:100%;}
/* Two full-size avatars do not fit a 16:9 stage — each takes about half. */
.presenter--duo .pres-one .presenter__fig{width:60%;margin:0 auto;border-width:4px;}
.presenter--duo .pres-one{transition:opacity .45s ease,transform .45s ease;opacity:.38;transform:scale(.84);}
.presenter--duo .pres-one.is-live{opacity:1;transform:scale(1);}
.presenter--duo .pres-one:not(.is-live) .presenter__fig{border-color:rgba(233,196,106,.35);box-shadow:none;animation:none;}
.presenter--duo .presenter__nm{font-size:clamp(.78rem,1.4vw,1rem);margin-top:8px;}
.presenter--duo .presenter__role{font-size:clamp(.6rem,1vw,.76rem);}
@media (max-width:680px){
  .presenter--duo{flex-direction:row;justify-content:center;gap:10px;}
  .presenter--duo .pres-one{flex:0 0 42%;}
}


/* ---- phones: the presenters were ending up about 30px across ------------
   .presenter is capped at 118px on mobile, and in duo mode each .pres-one took
   42% of that and then the figure took 60% again - three reductions stacked on
   one another. Give the pair the width of the screen instead and stop shrinking
   the figure inside it. */
@media (max-width:680px){
  .presenter{width:158px;}
  .presenter--duo{width:min(88vw,380px);flex-direction:row;gap:12px;align-items:flex-start;}
  .presenter--duo .pres-one{flex:1 1 0;min-width:0;}
  .presenter--duo .pres-one .presenter__fig{width:100%;margin:0;border-width:4px;}
  .presenter__nm{font-size:.92rem;}
  .ov-card{width:clamp(132px,38vw,180px);}
}
@media (max-width:400px){
  .presenter{width:138px;}
  .presenter--duo{width:min(94vw,340px);gap:9px;}
  .presenter--duo .pres-one .presenter__fig{border-width:3px;}
  .ov-card{width:clamp(120px,40vw,160px);}
}

/* ── EMBEDDED (?embed=1) ──────────────────────────────────────────────────
   The film inside another page: the host already provides the heading, the
   logo and the way back, so everything around the stage comes off and the
   stage itself fills the frame. Opt-in only — nothing here applies without
   the flag, so every standalone film is unaffected. */
.ex-embed .lp-top,
.ex-embed .ex-rail,
.ex-embed .lp-eyebrow,
.ex-embed .lp-cta      { display: none !important; }
.ex-embed .lp-wrap     { padding: 0 !important; max-width: none !important; }
.ex-embed .lp-hero     { padding: 0 !important; margin: 0 !important; gap: 0 !important; }
.ex-embed .lp-hero h1,
.ex-embed .lp-hero .sub { display: none !important; }
.ex-embed .ex-row      { display: block !important; }
.ex-embed body,
.ex-embed              { background: #0B1F17 !important; }

/* The host frame decides the shape. Without this the film keeps its own
   aspect ratio — and at a narrow width it switches to the phone layout, 9:13,
   which is taller than the frame holding it and produces a second scrollbar
   inside the page. That is the frame-inside-a-frame. */
html.ex-embed, .ex-embed body { height: 100%; overflow: hidden; }
/* The iframe's viewport is the panel, so measure against that rather than a
   parent chain that has no height of its own. */
.ex-embed .lp-wrap, .ex-embed .lp-hero, .ex-embed .ex-row { height: 100% !important; }
.ex-embed .stage {
  aspect-ratio: auto !important;
  height: 100vh !important;
  max-width: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.ex-embed .ex-row .stage { flex: none !important; }