/* the mission homepage: a dark film of how one lesson travels, then the daylight world it serves */
:root{
  --night:#0E0D0B; --night2:#171512; --moon:#FFFFFF; --moonDim:#A39C8E; --wire:rgba(255,255,255,.55); --glass:rgba(255,255,255,.22);
  --glow:#E39A55; --glowS:rgba(227,154,85,.2);
  --green:#17362A; --greenInk:#E8EFE9; --greenDim:rgba(232,239,233,.28);
  --tan:#B9A48C; --tanInk:#1B1915;
}
html{ background:var(--night); scroll-behavior:auto !important; } /* Lenis smooths the scroll; the browser's own smoothing fights it */
html.lenis, html.lenis body{ height:auto; }
body{ overflow-x:hidden; background:var(--paper); }
main section{ border-top:none; }
.dim{ color:var(--dim); }

/* nav floats over the film, then settles onto paper */
nav{ transition:background .4s, border-color .4s, color .4s; }
nav.dark{ background:linear-gradient(rgba(14,13,11,.7), rgba(14,13,11,0)); border-bottom:none !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
nav.dark .brand, nav.dark .nlinks a{ color:var(--moon); }
nav.dark .brand .jot{ display:none; }
nav.dark .brand .jot-d{ display:block; }
nav.dark .btn{ background:var(--moon); color:var(--night); border-color:var(--moon); box-shadow:none; }

/* ---------- the story: one pinned stage, the beats scroll over it ---------- */
.story{ position:relative; display:grid; background:var(--night); color:var(--moon); --pw:min(58vw,58rem); margin-top:-4rem; overflow-x:clip; } /* the film runs under the nav */
.story > .stage, .story > .beats{ grid-area:1 / 1; }
.stage{ position:sticky; top:0; height:100vh; overflow:hidden; perspective:1500px; perspective-origin:50% 42%; z-index:0; }
.rig{ position:absolute; left:50%; top:42%; width:0; height:0; transform-style:preserve-3d; }
.pane{ position:absolute; left:0; top:0; width:var(--pw); aspect-ratio:16/9; border-radius:16px; overflow:hidden;
       transform-style:preserve-3d; backface-visibility:hidden; will-change:transform,opacity; }
.pane.footage{ background:#000; }
.pane.footage video, .pane.footage .plate{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; }
.pane.footage video.on, .pane.footage .plate.on{ opacity:1; }
.plate{ display:flex; align-items:flex-end; padding:1rem 1.2rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
        text-transform:uppercase; color:var(--moonDim); background:radial-gradient(120% 90% at 30% 30%, #2A2620, #0E0D0B 70%); }
/* the stand-in badge shows only while the visible clip is a stand-in */
.standin{ display:none; }
.pane:has(video.on[data-state="standin"]) .standin{ display:block; }
.standin{ position:absolute; right:.8rem; top:.7rem; z-index:2; font-family:var(--mono); font-size:.58rem; letter-spacing:.14em;
          text-transform:uppercase; color:var(--moonDim); background:rgba(14,13,11,.6); padding:.2rem .45rem; border-radius:3px; }
.pane.glass{ background:rgba(255,255,255,.025); border:1px solid var(--glass); overflow:visible; }
.pane.glass.trace{ background:none; border:none; box-shadow:none; } /* only the lines float over the footage: one frame, not two */
.pane.trace canvas{ width:100%; height:100%; display:block; border-radius:16px; }
.pane.grid{ background-image:linear-gradient(var(--glass) 1px, transparent 1px), linear-gradient(90deg, var(--glass) 1px, transparent 1px);
            background-size:calc(var(--pw) / 8) calc(var(--pw) / 8); background-position:-1px -1px; opacity:.5; }
.pane.grid i{ position:absolute; font-style:normal; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--moon); opacity:.8; }
.pane.grid i:nth-child(1){ left:-3.2rem; top:12%; } .pane.grid i:nth-child(2){ right:-2.6rem; top:30%; }
.pane.grid i:nth-child(3){ right:-3.2rem; top:62%; } .pane.grid i:nth-child(4){ left:-2rem; top:84%; }
.pane.lesson{ aspect-ratio:auto; width:calc(var(--pw) * .62); padding:1.1rem 1.3rem 1.2rem; background:rgba(253,252,249,.96); color:var(--ink);
              border-radius:10px; box-shadow:0 0 0 1px var(--glow), 0 0 0 7px var(--glowS), 0 40px 80px -30px rgba(0,0,0,.8); display:flex; flex-direction:column; gap:.4rem; }
.pane.lesson .tt, .pane.lesson .ts{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.pane.lesson b{ font-family:var(--serif); font-weight:500; font-size:clamp(1rem,1.6vw,1.45rem); line-height:1.3; }
.pane.mate, .pane.agent{ width:calc(var(--pw) * .5); box-shadow:0 0 0 1px var(--glass); transition:box-shadow .6s; }
.pane.lit{ box-shadow:0 0 0 1.5px var(--glow), 0 0 0 8px var(--glowS) !important; }
.pane .tag{ position:absolute; left:.7rem; bottom:.6rem; z-index:2; font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
            color:var(--moon); background:rgba(14,13,11,.62); padding:.25rem .5rem; border-radius:3px; }
.sky{ position:absolute; left:0; top:0; transform-style:preserve-3d; }
.sky .tile{ position:absolute; border-radius:8px; overflow:hidden; background:radial-gradient(120% 90% at 30% 30%, #2A2620, #0E0D0B 75%);
            box-shadow:0 0 0 1px var(--glass); opacity:0; transition:box-shadow .5s; }
.sky .tile img, .sky .tile video{ width:100%; height:100%; object-fit:cover; display:block; opacity:.85; }
.sky .tile.lit{ box-shadow:0 0 0 1.5px var(--glow), 0 0 0 5px var(--glowS); }
.wires{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.wires path.w{ fill:none; stroke:var(--wire); stroke-width:1.1; }
.wires path.w.hot{ stroke:var(--glow); stroke-width:1.6; }
.wires marker path{ fill:var(--wire); }
.wires circle{ fill:var(--glow); }
.veil{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,0) 26%, rgba(0,0,0,0) 62%, rgba(0,0,0,.7)); }

.beats{ position:relative; z-index:2; }
.beat{ min-height:130vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center;
       padding:0 clamp(1.25rem,4vw,3rem) 12vh; gap:.9rem; }
#hero{ min-height:100vh; justify-content:center; padding-bottom:0; }
#hero h1{ max-width:16ch; color:var(--moon); font-size:clamp(2.6rem,6.4vw,5.6rem); line-height:1; letter-spacing:-.035em; text-shadow:0 1px 2px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.55), 0 0 60px rgba(0,0,0,.35); }
#hero .ctas{ justify-content:center; }
.heroin{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; will-change:opacity, transform; position:relative; isolation:isolate; }
/* a pool of shade behind the headline: it must read over the brightest footage (a whiteboard in daylight) */
.heroin::before{ content:""; position:absolute; inset:-14% -18%; z-index:-1; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,0,0,.4), rgba(0,0,0,.2) 55%, rgba(0,0,0,0)); }
/* the opening scene: the whiteboard photo goes to an agent, the agent files it, the company keeps it */
#hero{ position:relative; }
.scene{ display:none; }
.js .scene{ display:block; position:absolute; right:clamp(1.5rem,5vw,5rem); top:15vh; width:min(31rem,34vw); aspect-ratio:1/1; pointer-events:none; z-index:1; }
.js .scene > *{ opacity:0; }
.flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:2; }
.shot{ position:absolute; left:0; top:0; width:72%; margin:0; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#111;
       border:1px solid rgba(255,255,255,.6); box-shadow:0 30px 60px rgba(0,0,0,.45); transform:rotate(-4deg); }
.shot canvas{ width:100%; height:100%; display:block; filter:brightness(1.3) contrast(1.1); } /* a phone photo is brighter than the room looks */
.shot figcaption{ position:absolute; left:.6rem; top:.5rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; color:#fff;
                  background:rgba(0,0,0,.55); padding:.15rem .45rem; border-radius:3px; }
.agentp{ position:absolute; right:0; top:31%; width:80%; padding:.8rem 1rem 1rem; border-radius:12px; text-align:left; color:#fff;
         background:rgba(12,12,12,.62); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.22);
         font-family:var(--mono); font-size:.78rem; line-height:1.5; box-shadow:0 30px 60px rgba(0,0,0,.4); }
.agentp .ah{ display:flex; gap:.35rem; align-items:center; margin-bottom:.6rem; color:rgba(255,255,255,.55); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; }
.agentp .ah i{ width:.5rem; height:.5rem; border-radius:50%; background:rgba(255,255,255,.22); }
.agentp .ah span{ margin-left:.4rem; }
.agentp p{ margin:.25rem 0; }
.agentp .pr{ color:var(--glow); }
.agentp .l2{ color:rgba(255,255,255,.6); }
.agentp .ok{ color:#86D6A2; }
.agentp .ty.typing::after{ content:"▍"; opacity:.7; }
.kept{ position:absolute; left:6%; bottom:0; width:94%; padding:1rem 1.2rem 1.1rem; border-radius:12px; text-align:left; display:flex; flex-direction:column; gap:.45rem;
       background:rgba(253,252,249,.97); color:var(--ink); box-shadow:0 30px 60px rgba(0,0,0,.45); }
.kept .tt, .kept .ts{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.kept .ts{ color:#2E6B4C; }
.kept b{ font-family:var(--serif); font-weight:500; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.3; }
/* scene 2: a teammate's agent finds the decision before changing the code */
.agentp.found, .agentp.chat{ top:18%; width:96%; }
.mini{ margin-top:.7rem; padding:.75rem .9rem .85rem; border-radius:9px; background:rgba(253,252,249,.97); color:var(--ink); display:flex; flex-direction:column; gap:.35rem; }
.mini .tt{ font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.mini b, .chat b{ font-family:var(--serif); font-weight:500; font-size:clamp(.98rem,1.3vw,1.15rem); line-height:1.3; }
/* scene 3: on-call asks in the channel during the outage, the answer is posted for everyone */
.chat .ah span{ margin-left:0; text-transform:none; letter-spacing:.04em; font-size:.7rem; color:rgba(255,255,255,.7); }
.chat .msg{ display:flex; gap:.6rem; align-items:flex-start; margin:.5rem 0; }
.chat .av{ flex:none; width:1.5rem; height:1.5rem; border-radius:6px; display:grid; place-items:center; font-style:normal; font-size:.7rem; background:#5B6B8C; color:#fff; }
.chat .av.db{ background:var(--glow); color:var(--night); }
.chat .reply > div{ display:flex; flex-direction:column; gap:.35rem; font-family:var(--sans); font-size:.82rem; line-height:1.45; }
.chat .reply p{ margin:0; color:rgba(255,255,255,.88); }
.chat .who{ font-weight:600; font-size:.78rem; }
.chat .who em{ font-style:normal; font-weight:400; color:rgba(255,255,255,.5); }
.chat .reply b{ padding-left:.7rem; border-left:2px solid var(--glow); color:#fff; }
.chat .src{ font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
/* desktop: the headline sits bottom left, the scene plays top right */
@media (min-width:52rem){
  #hero{ align-items:flex-start; text-align:left; justify-content:flex-end; padding-bottom:14vh; padding-left:clamp(2rem,7vw,7rem); }
  #hero .heroin{ align-items:flex-start; }
  #hero .ctas{ justify-content:flex-start; }
  #hero h1{ max-width:13ch; font-size:clamp(2.6rem,5.4vw,5.2rem); }
}
/* smaller laptops and tablets on their side: a wider, taller scene so the card never covers the agent's last line */
@media (min-width:52rem) and (max-width:80rem){ .js .scene{ width:40vw; aspect-ratio:1/1.18; top:13vh; } }
/* phone: the headline sits high, the scene plays below the buttons */
@media (max-width:51.99rem){
  #hero{ justify-content:flex-start; padding-top:17vh; }
  .js .scene{ left:4vw; right:4vw; top:auto; bottom:4vh; width:auto; height:38vh; aspect-ratio:auto; }
  .shot{ width:54%; }
  .agentp{ top:15%; width:78%; font-size:.66rem; padding:.6rem .8rem .7rem; }
  .kept{ left:0; width:100%; padding:.8rem 1rem .9rem; }
  .kept b{ font-size:1rem; }
  .agentp.found, .agentp.chat{ top:auto; bottom:0; width:100%; }
  .chat .reply > div{ font-size:.74rem; }
  .mini b, .chat b{ font-size:.95rem; }
}
/* short phones: a taller scene, so the card never covers the agent's last line */
@media (max-width:51.99rem) and (max-height:740px){
  .js .scene{ height:46vh; bottom:3vh; }
  .agentp{ top:12%; }
  #hero{ padding-top:15vh; }
}
#hero .quiet{ text-shadow:0 1px 2px rgba(0,0,0,.5), 0 1px 12px rgba(0,0,0,.7); }
/* captions hold in one band under the picture, the way a film subtitles itself */
.js .cap{ min-height:110vh; justify-content:flex-start; padding-bottom:0; }
.js .capin{ isolation:isolate; position:sticky; top:63vh; display:flex; flex-direction:column; align-items:center; gap:.7rem; will-change:opacity; }
.beat h2{ max-width:20ch; color:var(--moon); font-size:clamp(1.8rem,3.6vw,3rem); }
.beat .body{ max-width:38rem; color:var(--moonDim); font-size:clamp(.98rem,1.3vw,1.1rem); line-height:1.6; }
.beat .eye{ color:var(--glow); }
/* a soft pool of night behind each caption, so it reads over anything the film puts under it */
.js .capin::before{ content:""; position:absolute; inset:-2.2rem -4rem; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(14,13,11,.88), rgba(14,13,11,.6) 60%, rgba(14,13,11,0)); }
.js .fill .w{ opacity:.22; transition:opacity .25s linear; }
.js .fill .w.on{ opacity:1; }
.ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:.6rem; }
.btn.light{ background:var(--moon); color:var(--night); border-color:var(--moon); box-shadow:none; }
.btn.light:hover{ background:var(--glow); border-color:var(--glow); color:var(--night); }
.quiet{ color:inherit; opacity:.85; text-decoration:none; font-size:.95rem; border-bottom:1px solid currentColor; padding-bottom:1px; }
.quiet:hover{ opacity:1; color:var(--margin); }
.story .quiet{ color:var(--moon); }

/* ---------- sheets slide over each other ---------- */
.sheet{ position:relative; z-index:3; border-radius:28px 28px 0 0; margin-top:-6vh; }
.sheet.green{ background:var(--green); color:var(--greenInk); padding-block:clamp(5rem,12vh,9rem); }
.beliefin{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media (min-width:52rem){ .beliefin{ grid-template-columns:minmax(0,16rem) minmax(0,1fr); gap:4rem; } }
.peek{ margin:0; aspect-ratio:9/16; max-height:62vh; border-radius:14px; overflow:hidden; position:relative; background:#0d1f17; }
.beliefin.solo{ grid-template-columns:1fr; } .beliefin.solo .big{ max-width:22ch; }
.peek video, .peek img, .peek .plate{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.peek .plate{ background:radial-gradient(120% 90% at 30% 30%, #24473A, #0d1f17 70%); color:var(--greenDim); opacity:1; }
.big{ font-size:clamp(2.1rem,4.6vw,4rem); line-height:1.05; letter-spacing:-.03em; color:var(--greenInk); max-width:18ch; }
.green .body{ margin-top:1.4rem; color:rgba(232,239,233,.7); font-size:1.1rem; max-width:32rem; }
.js .green .fill .w{ opacity:.25; }

.sheet.light{ background:var(--paper); color:var(--ink); }
#where{ overflow:hidden; padding-block:5rem; }
.wherein{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2rem; }
#where h2{ font-size:clamp(2.2rem,5vw,4.2rem); line-height:1.05; letter-spacing:-.03em; }
.rot{ display:inline-grid; }
.rot > span{ grid-area:1 / 1; }
.js .rot > span{ opacity:0; transform:translateY(.35em); transition:opacity .22s, transform .22s; } /* the old word leaves fast... */
.js .rot > span.on{ opacity:1; transform:none; transition:opacity .4s .24s, transform .4s .24s; } /* ...and the new one arrives after it */
html:not(.js) .rot > span:not(:first-child){ display:none; }
.rot > span:nth-child(1){ color:#9A7B5C; } .rot > span:nth-child(2){ color:#1E6B54; } .rot > span:nth-child(3){ color:#6E5A86; }
.rot > span:nth-child(4){ color:#9A7B5C; } .rot > span:nth-child(5){ color:#26588F; } .rot > span:nth-child(6){ color:#1E6B54; }
/* the tools knowledge is captured from, orbiting the sentence (a plain grid on phones and without script) */
.orbit{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; position:relative; z-index:2; order:2; }
.ot{ width:5.6rem; display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.ot i{ width:4.4rem; height:4.4rem; border-radius:16px; background:var(--card); border:1px solid var(--rule);
       box-shadow:0 14px 30px -20px rgba(27,25,21,.45); position:relative; }
.ot i::after{ content:""; position:absolute; inset:24%; background:var(--c); -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; }
.ot span{ font-size:.74rem; color:var(--body); text-align:center; line-height:1.25; }
.ot.own i{ border-style:dashed; background:transparent; box-shadow:none; }
.ot.own i::after{ content:"+"; inset:0; display:grid; place-items:center; background:none; -webkit-mask:none; mask:none; color:var(--dim); font-size:1.6rem; font-weight:300; }
#where{ display:flex; flex-direction:column; align-items:center; gap:2.4rem; }
#where .body{ color:var(--body); font-size:1.08rem; margin-top:-.6rem; }
@media (min-width:64rem){
  #where{ min-height:88vh; display:grid; place-items:center; }
  .js .orbit{ position:absolute; inset:0; display:block; pointer-events:none; }
  .js .ot{ position:absolute; left:0; top:0; will-change:transform; }
  .js .ot.own{ width:7.5rem; }
}
.tagrow{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.tagrow a{ display:inline-block; padding:.55rem 1.05rem; border:1px solid var(--rule); border-radius:999px; background:var(--card);
           color:var(--ink); text-decoration:none; font-size:.92rem; }
.tagrow a:hover{ border-color:var(--margin); color:var(--margin); }

/* proof: one lesson, three moments */
#proof{ border-radius:0; margin-top:0; border-top:1px solid var(--rule); padding-block:clamp(4rem,8vw,6.5rem); }
#proof .head{ display:flex; flex-direction:column; gap:.8rem; max-width:36rem; margin-bottom:2.4rem; }
#proof .body{ font-size:clamp(1.05rem,1.7vw,1.2rem); color:var(--body); }
.steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:52rem){ .steps{ grid-template-columns:repeat(3,1fr); gap:1.4rem; } }
.step{ background:var(--card); border:1px solid var(--rule); border-radius:3px; padding:1.4rem 1.5rem 1.6rem;
       display:flex; flex-direction:column; gap:.45rem; transition:border-color .7s ease, box-shadow .7s ease; }
.step .when{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.step .person{ font-weight:600; color:var(--ink); }
.step p{ color:var(--body); font-size:.98rem; line-height:1.55; }
.js #proof .step .person, .js #proof .step p{ color:var(--dim); transition:color .7s ease; }
.js #proof[data-step="0"] .step:nth-child(1) :is(.person,p),
.js #proof[data-step="1"] .step:nth-child(-n+2) :is(.person,p),
.js #proof[data-step="2"] .step :is(.person,p){ color:var(--ink); }
.js #proof[data-step="0"] .step:nth-child(1),
.js #proof[data-step="1"] .step:nth-child(2),
.js #proof[data-step="2"] .step:nth-child(3){ border-color:var(--glow); box-shadow:0 0 0 4px var(--glowS); }
.proofbar{ display:flex; align-items:center; gap:1.4rem; margin-top:1.8rem; }

/* close: tan, with the person who started it drawn as one line */
.sheet.tan{ background:var(--tan); color:var(--tanInk); padding-block:clamp(5rem,12vh,9rem); }
.closein{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }
@media (min-width:52rem){ .closein{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); } }
#close h2{ font-size:clamp(2.2rem,5vw,4rem); letter-spacing:-.03em; }
#close .body{ margin-top:1rem; color:rgba(27,25,21,.75); font-size:1.1rem; }
#close .ctas{ margin-top:1.6rem; }
#close .btn2{ background:transparent; border-color:rgba(27,25,21,.4); }
.drawing{ width:100%; aspect-ratio:16/9; display:block; }
.drawing[hidden]{ display:none; }
/* without script the film can't play: its stage is left out and the words stand alone on the dark */
html:not(.js) .stage{ display:none; }

footer{ position:relative; z-index:3; background:#000; color:#FFFFFF; padding-block:4rem 0; overflow:hidden; }
footer .brand{ color:#FFFFFF; }
.fc{ display:flex; flex-direction:column; gap:.45rem; }
.fc a{ color:#C9C2B4; text-decoration:none; font-size:.9rem; } .fc a:hover{ color:#fff; }
.fh{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#8F887B; }
footer .dim{ color:#8F887B; }
@media (min-width:52rem){ .foot{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.tagline{ margin:4rem 0 0; padding-bottom:3.5rem; font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,6.2vw,6rem); line-height:1; letter-spacing:-.04em; color:#FFFFFF; }

@media (max-width:51.99rem){
  .story{ --pw:86vw; }
  .stage{ perspective-origin:50% 34%; } .rig{ top:34%; }
  .beat{ min-height:115vh; padding-bottom:9vh; }
  .js .capin{ top:60vh; } .js .cap{ min-height:110vh; }
  .pane.lesson b{ font-size:.95rem; }
  .pane.mate, .pane.agent{ width:calc(var(--pw) * .48); }
  .pane .tag{ font-size:.5rem; left:.45rem; bottom:.4rem; padding:.18rem .35rem; }
  .pane.grid i{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .pane.footage video, .js .fill .w, .js .rot > span, .step, .js #proof .step :is(.person,p){ transition:none !important; }
}