/* ── The scroll film ────────────────────────────────────────────────────────
   A section that pins while you read it. Beside the steps, a laptop moves with
   your scroll: the lid opens as the section arrives, the screen goes from
   profile to matches, the scheme page dissolves away to leave the apply button
   on its own, and the lid closes as you leave. Driven by laptop.js; used on
   the homepage, /features, /startups and /incubators.

   There is no frame and no backdrop. The film is cut out: every frame carries
   its own transparency (colour above, alpha below, one video), and a WebGL
   canvas puts the two together, so the laptop and its soft shadow sit directly
   on the page in whichever theme it is in. Cards land beside the laptop at the
   moments they describe.

   Every word a reader needs is in .lap-steps, as ordinary text that is never
   hidden. The film is decoration (aria-hidden): with JavaScript off, with
   reduced motion, or without WebGL it is a cut-out still of the open laptop,
   and position: sticky still pins it, so the page reads the same. */

.lap{--lap-top:72px;--lap-bg:var(--bg,var(--color-bg,#0A0C0C));position:relative;overflow-x:clip}
.lap-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);column-gap:clamp(28px,5vw,84px);position:relative}
.lap-steps{grid-column:1;grid-row:1;margin:0;padding:0;list-style:none}
.lap-step{min-height:140vh}
/* The last step is longer: the film carries the scheme page and the apply
   button there, then closes. */
.lap-step:last-child{min-height:200vh}
.lap-copy{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:var(--lap-top) 0 32px}
.lap .lap-num{font:900 clamp(52px,6vw,88px)/1 var(--display,'Roboto',sans-serif);letter-spacing:-.05em;color:var(--gold,var(--color-gold,#D4A017));font-variant-numeric:tabular-nums}
.lap .lap-copy h2,.lap .lap-copy h3{font-family:var(--display,'Roboto',sans-serif);font-weight:900;font-size:clamp(28px,3.2vw,44px);line-height:1.04;letter-spacing:-.035em;margin:14px 0 0;max-width:16ch;color:var(--ink,var(--color-text))}
.lap .lap-copy p{margin:16px 0 0;font-size:17px;line-height:1.65;color:var(--muted,var(--color-muted));max-width:42ch}
.lap .lap-copy ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:42ch}
.lap .lap-copy li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5;color:var(--ink-2,var(--lead,var(--color-text)))}
.lap .lap-copy li::before{content:"";position:absolute;left:0;top:.3em;width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--teal,var(--color-teal-500,#14B8A6))}
.lap .lap-copy li::after{content:"";position:absolute;left:5px;top:calc(.3em + 4px);width:4px;height:7px;border:solid var(--teal,var(--color-teal-500,#14B8A6));border-width:0 2px 2px 0;transform:rotate(45deg)}

.lap-stage{grid-column:2;grid-row:1;position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding-top:var(--lap-top)}

/* The film: a little wider than its column, since nothing in it has an edge. */
.lap-film{position:relative;width:116%;max-width:960px;margin:0 -10% 0 -6%;aspect-ratio:16/9;transform-origin:50% 62%;will-change:transform,opacity}
.lap-still,.lap-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.lap-canvas{opacity:0}
.lap-live .lap-canvas{opacity:1}
.lap-live .lap-still{opacity:0}
/* The decoder only: it is drawn into the canvas, never shown. */
.lap-video{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
/* The light the screen throws. laptop.js raises it as the screen wakes. */
.lap-aura{position:absolute;inset:-4% 4% -8%;z-index:0;pointer-events:none;opacity:.6;
  background:radial-gradient(40% 44% at 50% 48%,rgba(20,184,166,.22),rgba(20,184,166,.06) 55%,transparent 72%);will-change:opacity,transform}
.lap-js .lap-aura{opacity:0}

/* Cards that land beside the laptop when the film reaches what they describe.
   They take the page's own surface, so they belong to it in either theme. */
.lap-cards{position:absolute;inset:0;z-index:2;pointer-events:none}
.lap-card{position:absolute;display:inline-flex;align-items:center;gap:10px;padding:11px 15px;border-radius:14px;white-space:nowrap;
  background:color-mix(in srgb,var(--surface,var(--color-surface,#121716)) 88%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--teal,#14B8A6) 40%,transparent);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.45),0 0 0 6px color-mix(in srgb,var(--teal,#14B8A6) 6%,transparent);
  font:600 14px/1.2 var(--sans,'Inter',sans-serif);color:var(--ink,var(--color-text,#EEF2F1));
  opacity:0;transform:translate3d(0,14px,0) scale(.96);transition:opacity .32s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.23,1,.32,1)}
.lap-card.on{opacity:1;transform:none}
.lap-card i{flex:none;width:20px;height:20px;border-radius:50%;background:#14B8A6;display:grid;place-items:center}
.lap-card i.ok::after{content:"";width:4px;height:8px;margin-top:-2px;border:solid #06100E;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lap-card i.bell::after{content:"";width:8px;height:8px;border-radius:50% 50% 2px 2px;background:#06100E}
.lap-card small{display:block;margin-top:3px;font:500 12px/1.2 var(--sans,'Inter',sans-serif);color:var(--muted,var(--color-muted,#8C9894))}
.lap-stamp{display:inline-block;padding:8px 11px 7px;border:2px solid currentColor;border-radius:5px;
  box-shadow:inset 0 0 0 2px var(--surface,var(--color-surface,#121716)),inset 0 0 0 3.5px currentColor;
  font:800 13px/1 var(--display,'Roboto',sans-serif);letter-spacing:.15em;text-transform:uppercase;color:var(--teal,#14B8A6);
  transform:rotate(-4deg) scale(1.55);transition:transform .45s cubic-bezier(.22,1,.36,1) .08s}
.lap-card.on .lap-stamp{transform:rotate(-4deg)}

/* The step being read keeps its number lit; the others step back. Text is untouched. */
.lap-js .lap-num{opacity:.3;transition:opacity .4s ease}
.lap-js .lap-step.is-active .lap-num{opacity:1}

@media (max-width:900px){
  .lap{--lap-top:64px}
  .lap-grid{grid-template-columns:minmax(0,1fr)}
  .lap-stage{grid-column:1;grid-row:1;top:var(--lap-top);height:auto;z-index:2;padding:8px 0 26px;
    background:linear-gradient(180deg,var(--lap-bg) 88%,transparent)}
  .lap-film{width:108%;max-width:600px;margin:0 -4%}
  .lap-cards{display:none}
  .lap-steps{grid-row:2}
  .lap-step,.lap-step:last-child{min-height:0;padding:20px 0 42vh}
  .lap-step:last-child{padding-bottom:62vh}
  .lap-copy{position:static;min-height:0;padding:0}
  .lap .lap-copy h2,.lap .lap-copy h3{font-size:clamp(26px,7vw,34px)}
}
@media (prefers-reduced-motion:reduce){.lap-card,.lap-stamp,.lap-js .lap-num{transition:none}}