/* app-stage: the stage the three consumer chapters film their apps on (see app-stage.js). Everything is in design pixels of the
   frame's canvas (film 1280 by 720, step 600 by 600; under 900px a window of it: film 440 by 720, step 400 by 600), scaled by
   --s, which app-stage.js sets from the frame's width. The phone is drawn at its own size (412 by 866 outside, the screen 390 by
   844, an iPhone's), so what is drawn inside it is in the points an iOS screen is designed in. */

.as{position:relative;--ww:1280;--wh:720;--W:1280;--fx:640;--s:1;color:var(--ink);-webkit-user-select:none;user-select:none}
.as[data-kind="step"]{--ww:600;--wh:600;--W:600;--fx:300}
@media (max-width:899px){
  .as[data-kind="film"]{--ww:440;--wh:720;--fx:840;max-width:480px;margin-inline:auto}
  .as[data-kind="step"]{--ww:400;--wh:600;--fx:300;max-width:440px;margin-inline:auto}
}
.as:not([data-on])::before{content:"";display:block;aspect-ratio:var(--ww) / var(--wh)}
.as-clip{position:relative;overflow:hidden;aspect-ratio:var(--ww) / var(--wh);background:#050505;isolation:isolate}
.as[data-kind="step"] .as-clip{border-radius:26px;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.07)}
.as-cv{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--s)) translateX(calc((var(--ww) / 2 - var(--fx)) * 1px));font-size:15px;line-height:1.35;letter-spacing:-.006em}
.as-bg{position:absolute;inset:0}
.as-world{position:absolute;inset:0;perspective:1900px;perspective-origin:50% 50%}
.as-cam{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;transform-style:preserve-3d}
.as-top{position:absolute;inset:0;pointer-events:none}
.as .h{opacity:0}
.as .z{display:none}
.as svg{display:block}

/* ---------- the opening of a chapter: a tall track, one sticky box, the frame grown and pinned by scroll-open (TRACKS['.b2-open']) ---------- */
.b2-open{position:relative;width:100%;height:calc(100vh + 110vh);height:calc(100svh + 110svh);margin:clamp(40px,5vw,72px) 0 0}
.b2-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;padding-top:calc(var(--barra-h) + 6px);padding-bottom:20px}
.b2-film{width:min(1280px,100% - 32px,(100svh - 130px) * 16 / 9);transform-origin:50% 50%;will-change:transform;border-radius:26px;overflow:hidden;background:#050505;box-shadow:0 60px 140px -60px rgb(0 0 0/.95)}
@media (max-width:899px){.b2-film{width:min(100% - 32px,480px)}.b2-open{height:calc(100vh + 70vh);height:calc(100svh + 70svh)}}
@media (prefers-reduced-motion:reduce){.b2-open{height:auto}.b2-stick{position:relative;height:auto;padding-block:0}.b2-film{transform:none!important;will-change:auto}}

/* ---------- a step: the clip beside its list of three (the kit's .cl-sec, which clips.js would try to play, so not that class) ---------- */
.as-sec{width:min(var(--largo),100% - 2 * var(--gutter));margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.as-sec.inv{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.as-sec.inv .as-fr{order:2}
@media (max-width:899px){
  .as-sec,.as-sec.inv{grid-template-columns:minmax(0,1fr);gap:0}
  .as-sec .cl-txt{display:contents}
  .as-sec .cl-h2{order:1}
  .as-sec .cl-txt>.cl-p{order:2;margin-bottom:28px}
  .as-sec .as-fr,.as-sec.inv .as-fr{order:3}
  .as-sec .cl-list{order:4;margin-top:18px}
}

/* ---------- the caption: the film's big words (the page's display, Favorit Light), over the left of the canvas; under the frame on a phone ---------- */
.as-say{position:absolute;left:calc(var(--s) * 84px);top:calc(var(--s) * 96px);width:calc(var(--s) * 400px);margin:0;pointer-events:none;
  font-family:var(--serif);font-weight:300;font-size:calc(var(--s) * 58px);line-height:1.02;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.as[data-kind="step"] .as-say{left:calc(var(--s) * 30px);top:calc(var(--s) * 34px);width:calc(var(--s) * 330px);font-size:calc(var(--s) * 33px)}
.as-ln{display:block}
.as-w{display:inline-block;white-space:pre}
.as-say em{font-family:var(--accent);font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:1.04em;line-height:.9}
@media (max-width:899px){
  .as-say,.as[data-kind="step"] .as-say{position:static;width:auto;max-width:22ch;margin:22px auto 0;text-align:center;min-height:2.1em;font-size:clamp(26px,7.4vw,32px);line-height:1.06}
}

/* ---------- a phone: iPhone proportions, titanium frame, island, status bar, home bar ---------- */
.as-ph,.as-obj{position:absolute;left:0;top:0;transform-origin:0 0;transform-style:preserve-3d}
.as-ph{width:412px;height:866px}
.as-body{position:absolute;inset:0;border-radius:68px;
  background:conic-gradient(from 200deg at 50% 50%,#6d6e75,#2b2c30 14%,#4a4b51 30%,#1a1a1d 46%,#55565d 62%,#232427 80%,#6d6e75);
  box-shadow:0 0 0 .5px #000,0 50px 90px -30px rgb(0 0 0/.9)}
.as-body::before{content:"";position:absolute;inset:3.5px;border-radius:64.5px;background:#050506;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.07)}
.as-body::after{content:"";position:absolute;inset:0;border-radius:68px;pointer-events:none;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.2),inset 0 1.5px 0 oklch(100% 0 0/.38),inset 0 -1px 0 oklch(100% 0 0/.12)}
.as-key{position:absolute;width:5px;border-radius:2.5px;background:linear-gradient(90deg,#17171a,#5b5c63 50%,#202023)}
.as-key.k1{left:-3px;top:150px;height:32px}.as-key.k2{left:-3px;top:214px;height:58px}.as-key.k3{left:-3px;top:286px;height:58px}
.as-key.k4{right:-3px;left:auto;top:244px;height:92px;background:linear-gradient(270deg,#17171a,#5b5c63 50%,#202023)}
.as-scr{position:absolute;left:11px;top:11px;width:390px;height:844px;border-radius:55px;overflow:hidden;background:#fff;color:#000;font-family:var(--font);letter-spacing:0;line-height:1.3;font-size:16px;transform:translateZ(0);--ink-s:#000}
.as-scr[data-tone="dark"]{--ink-s:#fff}
.as-stack{position:absolute;inset:0}
.as-sc{position:absolute;inset:0;overflow:hidden}
:where(.as-sc){background:#fff}
.as-sb{position:absolute;left:0;right:0;top:0;height:54px;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:6px 36px 0 54px;pointer-events:none;color:var(--ink-s);transition:color .35s}
.as-time{font-family:var(--font);font-weight:600;font-size:17px;letter-spacing:-.01em;font-feature-settings:"tnum"}
.as-sbr{display:flex;align-items:center;gap:7px}
.as-sbr svg{fill:currentColor;stroke:currentColor;stroke-width:1}
.as-sg{width:19px;height:12px;stroke:none!important}.as-wf{width:17px;height:12px;stroke:none!important}.as-bt{width:27px;height:13px}
.as-isl{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000;z-index:62}
.as-hm{position:absolute;left:50%;bottom:8px;width:138px;height:5px;margin-left:-69px;border-radius:3px;background:var(--ink-s);z-index:60;transition:background-color .35s}
.as-gl{position:absolute;inset:0;border-radius:55px;pointer-events:none;z-index:80;background:linear-gradient(118deg,oklch(100% 0 0/.09) 0%,oklch(100% 0 0/0) 24%,oklch(100% 0 0/0) 72%,oklch(100% 0 0/.045) 100%)}
.as-fx{position:absolute;inset:0;z-index:70;pointer-events:none}
.as-dim{position:absolute;inset:0;z-index:30;background:#000;opacity:0;pointer-events:none}
.as-shadow-l{box-shadow:-22px 0 44px -12px rgb(0 0 0/.3)}

/* a sheet from the bottom, over the screen */
.as-shw{position:absolute;inset:0;z-index:40}
.as-dimmer{position:absolute;inset:0;background:#000;opacity:0}
.as-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:36px 36px 0 0;box-shadow:0 -20px 60px -20px rgb(0 0 0/.35);overflow:hidden}
.as-sheet::before{content:"";position:absolute;left:50%;top:8px;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:oklch(0% 0 0/.16);z-index:2}

/* a touch on the glass: a soft disc and a ring, pressed in when it lands */
.as-fg{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,oklch(30% .01 260/.3) 0 38%,oklch(100% 0 0/.5) 64%,oklch(100% 0 0/.16) 100%);
  box-shadow:0 0 0 1.5px oklch(100% 0 0/.8),0 0 0 2.5px oklch(0% 0 0/.12),0 10px 24px -6px oklch(0% 0 0/.45)}
.as-ring{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;border:2.5px solid oklch(100% 0 0/.95);box-shadow:0 0 0 1px oklch(0% 0 0/.15)}
.as .press{scale:.95;filter:brightness(.93)}

/* an iOS notification banner */
.as-bn{position:absolute;left:11px;right:11px;top:0;display:flex;align-items:center;gap:12px;padding:12px 15px 12px 12px;border-radius:27px;color:#111;
  background:oklch(97.5% .004 270/.9);-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  box-shadow:0 16px 44px -14px oklch(0% 0 0/.5),0 0 0 .5px oklch(0% 0 0/.08)}
.as-scr[data-tone="dark"] .as-bn{color:#fff;background:oklch(26% .005 270/.86);box-shadow:0 16px 44px -14px oklch(0% 0 0/.7),0 0 0 .5px oklch(100% 0 0/.12)}
.as-bn-ic{flex:none;width:40px;height:40px;border-radius:10px;overflow:hidden;display:grid;place-items:center}
.as-bn-ic img,.as-bn-ic svg{display:block;width:100%;height:100%}
.as-bn-tx{flex:1;min-width:0;display:grid;gap:1px}
.as-bn-tx b{font-weight:600;font-size:15px;letter-spacing:-.012em;line-height:1.25}
.as-bn-tx span{font-size:14.5px;line-height:1.28;letter-spacing:-.01em;color:oklch(0% 0 0/.72);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.as-scr[data-tone="dark"] .as-bn-tx span{color:oklch(100% 0 0/.74)}
.as-bn small{align-self:flex-start;margin-top:2px;font-size:12.5px;color:oklch(0% 0 0/.48)}
.as-scr[data-tone="dark"] .as-bn small{color:oklch(100% 0 0/.5)}

/* the frame's corner tag (an example) and the rings of a voice */
.as-ex{position:absolute;right:calc(var(--s) * 22px);top:calc(var(--s) * 20px);z-index:20;height:calc(var(--s) * 26px);font-size:calc(var(--s) * 13px);padding:0 calc(var(--s) * 11px) 0 calc(var(--s) * 9px)}
.as-ex::before{width:calc(var(--s) * 7px);height:calc(var(--s) * 7px)}
.as-rip{position:absolute;width:560px;height:560px;border-radius:50%;border:2px solid;pointer-events:none;transform:translate(-50%,-50%)}

/* the third act when outcome/ is not loaded: its own, small */
.as-oc{position:absolute;z-index:30;display:flex;align-items:center;justify-content:center;background:oklch(6% 0 0/.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff}
.as-oc-in{width:min(70%,520px);display:grid;gap:26px}
.as-oc-h,.as-oc-f{margin:0;font-size:19px;color:oklch(100% 0 0/.6)}
.as-oc-r{display:grid;gap:8px}
.as-oc-l{font-size:21px;color:oklch(100% 0 0/.74)}
.as-oc-n{font-family:var(--serif);font-weight:300;font-size:96px;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.as-oc-n i{font-style:normal;font-size:.5em;margin-left:.08em;color:oklch(100% 0 0/.7)}
.as-oc-b{display:block;height:3px;border-radius:3px;background:oklch(100% 0 0/.16)}
.as-oc-b u{display:block;height:100%;border-radius:3px;background:#fff;transform-origin:0 50%}
/* outcome.js draws strokes with the kit's .cl-cv rule, which this stage does not use */
.as .oc svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}

/* ---------- the maps (maps.js): a layer in metres that pans, zooms and tilts; pins stand up in it ---------- */
.as-mapw{position:absolute;inset:0;overflow:hidden;perspective:980px;perspective-origin:50% 42%}
.as-map{position:absolute;left:0;top:0;transform-origin:0 0;--iz:1;--rw:9}
.as-rome,.as-route{position:absolute;left:0;top:0}
.as-route path{stroke-width:calc(var(--rw) * 1px)}
.as-route .as-route-h{stroke-width:calc(var(--rw) * 1.9px)}
.as-haze{position:absolute;left:0;right:0;top:0;height:38%;pointer-events:none;opacity:var(--hz,0);background:linear-gradient(var(--hc) 0,var(--hc) 14%,color-mix(in srgb,var(--hc) 50%,transparent) 44%,transparent 100%)}
.as-mk{position:absolute;inset:0;pointer-events:none}
.as-pin{position:absolute;left:0;top:0;transform-origin:0 0;white-space:nowrap}
.as-lb span{display:block;font:600 13px/1.1 var(--font);letter-spacing:.01em;color:var(--lb,#76706a);text-shadow:0 0 2px #fff,0 0 4px #fff,0 0 6px #fff}
.as-globe{position:absolute;left:50%;top:50%;margin:-450px 0 0 -450px;display:block}

@media (prefers-reduced-motion:reduce){.as-fg{display:none}}

/* the small print under a chapter's numbers (map credit) */
.as-credit{width:min(var(--largo),100% - 2 * var(--gutter));margin:24px auto 0;font-size:calc(12.5 * var(--px));color:var(--ink-3)}

.as-thumb{display:block;width:100%;height:100%}