/* Install page layer. Loaded only by /install/, after pages.css, like die.js is only
   loaded where a page shows the die. Everything here draws the schematic devices and
   the step-by-step walkthrough that plays on them.

   Schematic devices: drawn, not photographed, and not a promise about any OS release.
   The screens are simplified on purpose. They show where to tap, not a pixel copy of
   Safari or Chrome.

   The walkthrough reads without JavaScript: each device rests on its most telling
   screen with the thing to tap already marked, and the step list is plain HTML.
   install.js adds the playback, the step buttons and the controls. Motion goes
   through window.STEWARD_MOTION, so reduced motion and the footer pause both leave a
   still, fully usable guide. */

/* ---------- Layout: the device column spans the whole article ---------- */
.platform{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);grid-template-areas:"head visual" "steps visual" "note visual";column-gap:64px;row-gap:0;align-items:start}
.platform-head{grid-area:head}
.platform>.step-list{grid-area:steps;margin-top:6px}
.platform>.callout,.platform>.platform-note{grid-area:note}
.platform>.platform-visual{grid-area:visual;align-self:center;flex-direction:column;align-items:center;min-width:0}
.platform .lead{margin-bottom:26px}

/* ---------- The stage ---------- */
.walk-scene{--rx:5deg;--ry:-14deg;--rz:2deg;position:relative;perspective:1300px;perspective-origin:50% 40%;display:flex;justify-content:center;padding:18px 24px 34px;isolation:isolate;width:100%}
.walk-scene:before{content:'';position:absolute;left:50%;top:46%;width:118%;max-width:520px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #c8893f30;background:radial-gradient(circle,#16253580 0,transparent 62%);z-index:-2}
.walk-scene:after{content:'';position:absolute;left:50%;top:46%;width:96%;max-width:420px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed #36475a80;z-index:-2}
.walk-floor{position:absolute;left:50%;bottom:10px;width:230px;height:34px;margin-left:-115px;border-radius:50%;background:radial-gradient(closest-side,#000a,transparent);transform:translateX(calc(var(--ry) * -2.2));z-index:-1;pointer-events:none}
.walk-device{position:relative;transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));transform-style:preserve-3d;will-change:transform}

/* ---------- Handset: the Home's chassis, sized for a guide ---------- */
.handset{--screen-h:520px;width:272px;flex-shrink:0;border:2px solid #77818b;border-radius:44px;padding:8px;background:linear-gradient(120deg,#4c5661,#14191f 40%,#555e67);box-shadow:4px 3px 0 #242d36,6px 5px 0 #64707b,22px 30px 50px #0008}
.handset:before{content:'';position:absolute;width:4px;height:62px;right:-7px;top:118px;background:#64707b;border-radius:0 3px 3px 0}
.handset:after{content:'';position:absolute;width:4px;height:34px;left:-7px;top:104px;background:#56616b;border-radius:3px 0 0 3px;box-shadow:0 46px 0 #56616b}
.walk-screen{position:relative;height:var(--screen-h);border-radius:35px;overflow:hidden;background:#0b1017;border:1px solid #080a0e;isolation:isolate;font-family:var(--ui);color:var(--text);text-align:left}
.walk-screen:after{content:'';position:absolute;inset:0;background:#05080c;opacity:0;pointer-events:none;z-index:8;transition:opacity .35s ease}
.is-focus .walk-screen:after{opacity:.42}
.ws-status{position:relative;z-index:7;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font:600 10px var(--ui)}
.ws-status i{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:78px;height:21px;border-radius:14px;background:#000}
.ws-status b{width:20px;height:9px;border:1px solid #ece7dab0;border-radius:3px;position:relative}
.ws-status b:after{content:'';position:absolute;inset:1px 4px 1px 1px;background:var(--text);border-radius:1px}
.android .ws-status i{width:10px;height:10px;top:12px;border-radius:50%}
.android .walk-screen{border-radius:30px}
.handset.android{border-radius:38px}

/* ---------- Screen layers ---------- */
.ws-layer{position:absolute;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s .45s}
.ws-page{position:absolute;inset:34px 0 0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 70% 0,#16253575,transparent 60%),#0b1017}
.ws-scrim{position:absolute;inset:0;background:#000;opacity:0;z-index:3;transition:opacity .35s ease;pointer-events:none}
[data-state=menu] .ws-scrim,[data-state=sheet] .ws-scrim,[data-state=add] .ws-scrim,[data-state=prompt] .ws-scrim{opacity:.45}

/* A miniature of the /app/ launcher, so the page in the browser is Steward's. */
.mini-launch{flex:1;padding:22px 20px 0;display:flex;flex-direction:column;align-items:flex-start}
.mini-launch img{width:92px;height:auto;margin-bottom:26px}
.mini-launch small{display:flex;align-items:center;gap:6px;font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);font-weight:600}
.mini-launch small:before{content:'';width:10px;height:1px;background:var(--bronze)}
.mini-launch strong{display:block;font:600 22px/1.12 var(--serif);margin:10px 0 12px;color:var(--text)}
.mini-launch strong span{display:block;color:var(--bronze-hi)}
.mini-launch p{font-size:9.5px;line-height:1.55;color:var(--muted);margin:0 0 16px;max-width:24ch}
.mini-btn{display:inline-flex;align-items:center;gap:8px;background:var(--volt);color:#04121c;border-radius:7px;font:600 11px var(--serif);padding:8px 13px}
.mini-rows{align-self:stretch;margin-top:auto;margin-bottom:12px;border-top:1px solid var(--line);font-size:8.5px;color:var(--muted)}
.mini-rows span{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}
.mini-rows b{font-weight:500;color:var(--text)}

/* Browser bars */
.ios-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:8px;padding:9px 12px 22px;background:linear-gradient(transparent,#0b1017 30%)}
.ios-bar:after{content:'';position:absolute;left:36%;right:36%;bottom:7px;height:4px;border-radius:4px;background:var(--text)}
.ui-circle{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#262d38e6;border:1px solid #ffffff14;box-shadow:0 4px 12px #0007;color:var(--text)}
.ui-circle svg{width:15px;height:15px}
.ui-url{flex:1;min-width:0;height:34px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:17px;background:#262d38e6;border:1px solid #ffffff14;box-shadow:0 4px 12px #0007;font-size:10.5px;color:var(--text);white-space:nowrap}
.ui-url svg{width:9px;height:9px;color:var(--muted);flex-shrink:0}
.chrome-bar{position:relative;z-index:2;display:flex;align-items:center;gap:7px;padding:6px 10px 8px;background:#11161f;border-bottom:1px solid var(--line)}
.chrome-bar .ui-url{height:30px;justify-content:flex-start;padding:0 11px;border-radius:15px;box-shadow:none;background:#1f2733}
.ui-tabs{flex:0 0 18px;height:18px;border:1.5px solid var(--muted);border-radius:4px;display:grid;place-items:center;font-size:8px;font-weight:700;color:var(--muted)}
.ui-dots{flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--text)}
.ui-dots svg{width:14px;height:14px}

/* Menus and sheets */
.ui-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:0 13px;font-size:11px;color:var(--text);background:#232a35;white-space:nowrap}
.ui-row svg{width:14px;height:14px;flex-shrink:0;color:var(--muted)}
.ui-row.quiet{color:var(--muted)}
.ios-menu{position:absolute;right:12px;bottom:68px;width:180px;z-index:4;border-radius:16px;overflow:hidden;display:grid;gap:1px;background:#161b23;box-shadow:0 18px 40px #000b;transform-origin:92% 100%;opacity:0;visibility:hidden;transform:scale(.6)}
[data-state=menu] .ios-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ios-sheet{position:absolute;left:0;right:0;bottom:0;top:128px;z-index:4;background:#171d26;border-radius:22px 22px 0 0;border-top:1px solid #ffffff14;padding:10px 12px 0;transform:translateY(100%);visibility:hidden}
.ios-sheet:before{content:'';display:block;width:34px;height:4px;border-radius:4px;background:var(--line2);margin:0 auto 12px}
[data-state=sheet] .ios-sheet{transform:none;visibility:visible;transition-delay:0s}
.sheet-head{display:flex;align-items:center;gap:10px;padding:0 4px 12px}
.sheet-head img{width:34px;height:34px;border-radius:9px}
.sheet-head b{display:block;font:600 11px var(--ui)}
.sheet-head small{display:block;font-size:9px;color:var(--muted)}
.sheet-head span{margin-left:auto;width:22px;height:22px;border-radius:50%;background:#2a323e;display:grid;place-items:center;color:var(--muted);font-size:12px}
.sheet-people{display:flex;gap:12px;padding:4px 4px 14px;border-bottom:1px solid var(--line)}
.sheet-people i{width:38px;height:38px;border-radius:50%;background:#262e3a;flex-shrink:0}
.sheet-people i:nth-child(2){background:#23303a}.sheet-people i:nth-child(3){background:#2a2a36}
.sheet-list{margin-top:12px;border-radius:12px;overflow:hidden;display:grid;gap:1px;background:#10151c;max-height:147px;align-content:start;transition:max-height .5s cubic-bezier(.3,.7,.2,1)}
.sheet-list .ui-row{height:36px}
.sheet-list .more{max-height:36px;overflow:hidden;transition:max-height .4s ease,min-height .4s ease,opacity .25s ease}
[data-scrolled] .sheet-list{max-height:260px}
[data-scrolled] .sheet-list .more{max-height:0;min-height:0;opacity:0}
.ios-add{position:absolute;left:0;right:0;bottom:0;top:44px;z-index:5;background:#141920;border-radius:22px 22px 0 0;border-top:1px solid #ffffff14;padding:14px 14px 0;transform:translateY(100%);visibility:hidden}
[data-state=add] .ios-add{transform:none;visibility:visible;transition-delay:0s}
.add-bar{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;margin-bottom:22px}
.add-bar b{font-weight:600}
.add-bar>span:first-child{color:var(--volt)}
.ui-link{display:inline-flex;align-items:center;justify-content:center;color:var(--volt);font-size:10.5px;font-weight:600;padding:5px 8px;border-radius:8px;background:#141920}
.ui-pill{display:inline-flex;align-items:center;justify-content:center;background:var(--volt);color:#04121c;border-radius:15px;font-size:11px;font-weight:600;padding:7px 12px}
.ui-pill.sm{font-size:9.5px;border-radius:12px;padding:5px 12px}
.add-card{display:flex;gap:12px;align-items:center;background:#1e2530;border-radius:12px;padding:12px}
.add-card img{width:50px;height:50px;border-radius:12px;flex-shrink:0}
.add-card div{flex:1;min-width:0}
.add-card span{display:block;font-size:11.5px;padding:0 0 7px;border-bottom:1px solid var(--line2);margin-bottom:7px}
.add-card small{display:block;font-size:9px;color:var(--muted)}
.add-toggle{display:flex;justify-content:space-between;align-items:center;background:#1e2530;border-radius:12px;padding:10px 12px;margin-top:12px;font-size:10.5px}
.add-toggle i{width:32px;height:19px;border-radius:10px;background:#2fbf71;position:relative}
.add-toggle i:after{content:'';position:absolute;right:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#fff}
.add-help{font-size:8.5px;color:var(--muted);line-height:1.5;margin:8px 4px 0}

/* Chrome on Android */
.chrome-menu{position:absolute;top:40px;right:8px;width:168px;z-index:4;border-radius:12px;overflow:hidden;display:grid;background:#232a35;box-shadow:0 18px 40px #000b;transform-origin:95% 0;opacity:0;visibility:hidden;transform:scale(.6)}
[data-state=menu] .chrome-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.chrome-menu .icons{display:flex;justify-content:space-between;padding:10px 13px;border-bottom:1px solid #ffffff12;color:var(--muted)}
.chrome-menu .icons svg{width:13px;height:13px}
.chrome-menu .ui-row{min-height:31px;font-size:10.5px}
.chrome-dialog{position:absolute;left:18px;right:18px;top:150px;z-index:5;background:#1e2530;border-radius:22px;padding:18px 18px 12px;box-shadow:0 24px 50px #000c;opacity:0;visibility:hidden;transform:scale(.88)}
[data-state=prompt] .chrome-dialog{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.chrome-dialog b{display:block;font:600 14px var(--ui);margin-bottom:14px}
.chrome-dialog .app{display:flex;gap:11px;align-items:center;margin-bottom:18px}
.chrome-dialog .app img{width:40px;height:40px;border-radius:50%}
.chrome-dialog .app span{font-size:11px;display:block}
.chrome-dialog .app small{font-size:9px;color:var(--muted);display:block}
.chrome-dialog .actions{display:flex;justify-content:flex-end;gap:6px;font-size:11px;font-weight:600}
.chrome-dialog .actions span{padding:7px 11px;border-radius:15px;color:var(--volt)}

/* Home screens */
.ws-home{position:absolute;inset:0;z-index:6;padding:46px 18px 14px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 20% 0,#1f3a4f,transparent 55%),radial-gradient(ellipse at 90% 100%,#3a2a18,transparent 55%),#0d141c;opacity:0;visibility:hidden;transform:scale(1.08)}
[data-state=home] .ws-home{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px 13px}
.hs-grid>i,.hs-app{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.hs-grid>i:before,.hs-dock i{content:'';display:block;width:100%;aspect-ratio:1;border-radius:13px;background:#ffffff12;border:1px solid #ffffff0d}
.hs-grid>i:after{content:'';width:62%;height:3px;border-radius:2px;background:#ffffff1c}
.hs-grid>i:nth-child(3n):before{background:#c8893f1c}.hs-grid>i:nth-child(5n):before{background:#3fd0ff14}
.hs-app img{width:100%;aspect-ratio:1;border-radius:13px;box-shadow:0 6px 14px #0007}
.hs-app b{font:500 8.5px var(--ui);color:var(--text)}
.hs-dots{display:flex;justify-content:center;gap:5px;margin:auto 0 10px}
.hs-dots i{width:5px;height:5px;border-radius:50%;background:#ffffff40}.hs-dots i:first-child{background:#fff}
.hs-dock{border-radius:24px;background:#ffffff14;padding:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.android .hs-dock{background:none;padding:0 4px}
.hs-search{height:34px;border-radius:17px;background:#ffffff14;margin-bottom:12px}
.android .ws-home{padding-top:48px}
/* The landing: a bronze ring answers the icon once it settles. */
.hs-app.is-new img{box-shadow:0 0 0 2px var(--bronze-hi),0 0 22px #f0bd7266}
.hs-app.is-landing img{visibility:hidden}

/* ---------- Laptop ---------- */
.laptop{width:470px;max-width:100%;flex-shrink:0}
.laptop-lid{position:relative;border:2px solid #7e8a96;border-radius:14px 14px 5px 5px;padding:10px 10px 18px;background:linear-gradient(125deg,#83909d,#313d49 16%,#131c26 53%,#667583);box-shadow:1px 1px 0 #b0bac3,4px 3px 0 #25303c,14px 16px 30px #0006;transform-style:preserve-3d}
.laptop-lid:after{content:'';position:absolute;bottom:6px;left:49%;width:2%;height:3px;border-radius:2px;background:#98a6b15c}
.laptop .walk-screen{--screen-h:278px;border-radius:5px;display:flex;flex-direction:column}
.laptop-base{position:relative;height:150px;margin:-1px -3% 0;border:1px solid #a6b2bc;border-bottom:0;border-radius:3px 3px 14px 14px;transform:rotateX(76deg);transform-origin:top;background:linear-gradient(115deg,#84929e,#adb8c0 42%,#73838f);box-shadow:inset 0 2px 3px #e8edf56b}
.laptop-base:before{content:'';position:absolute;left:9%;right:9%;top:12px;height:74px;border:1px solid #536271;border-radius:5px;background:repeating-linear-gradient(90deg,#303c48 0 4px,transparent 4px 7.14%),repeating-linear-gradient(0deg,#1a2530 0 2px,#445260 2px 14.8px);box-shadow:inset 0 1px 3px #0009}
.laptop-base:after{content:'';position:absolute;left:36%;width:28%;bottom:14px;height:44px;border:1px solid #586d7d;border-radius:5px;background:linear-gradient(120deg,#98a7b3,#899ca9)}
.desk-tabs{display:flex;align-items:flex-end;gap:6px;height:30px;padding:0 10px;background:#0d1219}
.desk-tabs .dots{display:flex;gap:5px;align-self:center;margin-right:8px}
.desk-tabs .dots i{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.desk-tab{display:flex;align-items:center;gap:6px;height:24px;padding:0 12px;border-radius:8px 8px 0 0;background:#161c26;font-size:9px;color:var(--text)}
.desk-tab img{width:11px;height:11px;border-radius:3px}
.desk-tabs .plus{font-size:12px;color:var(--muted);padding:0 6px 4px}
.desk-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#161c26;border-bottom:1px solid var(--line);color:var(--muted);font-size:10px}
.desk-bar .ui-url{height:24px;justify-content:space-between;padding:0 4px 0 12px;border-radius:12px;box-shadow:none;background:#0d1219;font-size:9.5px}
.desk-bar .ui-url>span{display:flex;align-items:center;gap:6px}
.ui-install{display:grid;place-items:center;width:20px;height:18px;border-radius:9px;color:var(--text)}
.ui-install svg{width:13px;height:13px}
.desk-page{position:relative;flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:16px;padding:18px 22px;background:radial-gradient(ellipse at 80% 20%,#16253575,transparent 60%),#0b1017}
.desk-page .mini-launch{padding:0}
.desk-page .mini-launch img{width:72px;margin-bottom:14px}
.desk-page .mini-launch strong{font-size:18px;margin:6px 0 8px}
.desk-page .mini-launch p{font-size:8.5px;margin-bottom:10px}
.desk-page .mini-btn{font-size:9.5px;padding:6px 11px}
.desk-art{align-self:center;justify-self:center;width:88%;aspect-ratio:1;border-radius:50%;border:1px solid #c8893f40;display:grid;place-items:center}
.desk-art img{width:44%;height:auto;filter:drop-shadow(3px 8px 8px #0008);transform:rotate(-12deg)}
.desk-pop{position:absolute;top:64px;right:12px;width:190px;z-index:4;background:#1e2530;border:1px solid var(--line2);border-radius:12px;padding:12px;box-shadow:0 18px 40px #000b;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.94);transform-origin:90% 0}
[data-state=prompt] .desk-pop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.desk-pop b{display:block;font:600 11px var(--ui);margin-bottom:10px}
.desk-pop .app{display:flex;gap:9px;align-items:center;margin-bottom:12px}
.desk-pop .app img{width:28px;height:28px;border-radius:7px}
.desk-pop .app span{display:block;font-size:10px}.desk-pop .app small{display:block;font-size:8px;color:var(--muted)}
.desk-pop .actions{display:flex;justify-content:flex-end;gap:6px}
.desk-pop .actions span{font-size:9.5px;font-weight:600;padding:5px 12px;border-radius:12px;border:1px solid var(--line2);color:var(--text)}
.desk-pop .actions .ui-pill{border-color:var(--volt)}
/* Installed: Steward in its own window, no tabs, no address bar. */
.desk-app{position:absolute;inset:16px 34px 14px 44px;z-index:6;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid #ffffff1f;box-shadow:0 24px 50px #000c;background:#0b1017;opacity:0;visibility:hidden;transform:scale(.9) translateY(8px)}
[data-state=home] .desk-app{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.desk-app .title{display:flex;align-items:center;gap:7px;height:24px;padding:0 10px;background:#0d1219;font-size:9px}
.desk-app .title img{width:12px;height:12px;border-radius:3px}
.desk-app .title i{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--line2);box-shadow:-13px 0 var(--line2),-26px 0 var(--line2)}
.desk-app .desk-page{padding:14px 18px}

/* ---------- Where to tap ---------- */
/* Without JavaScript the target of the resting screen is simply outlined. */
.is-target{box-shadow:0 0 0 1.5px var(--volt),0 0 16px #3fd0ff40;position:relative;z-index:1}
/* With JavaScript, a copy of the target rises out of the screen toward the reader. */
.walk-lift{position:absolute;left:0;top:0;z-index:20;pointer-events:none;opacity:0;border-radius:10px;overflow:hidden;transform:translate3d(var(--x,0),var(--y,0),1px);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .2s ease,box-shadow .5s ease;font-family:var(--ui);color:var(--text);text-align:left}
.walk-lift>*{width:100%;height:100%;margin:0!important;box-shadow:none!important}
.walk-lift.is-up{opacity:1;transform:translate3d(var(--x,0),var(--y,0),var(--z,28px)) scale(1.05);box-shadow:0 0 0 1.5px var(--volt),0 0 22px #3fd0ff55,0 22px 30px #000b}
.walk-lift.is-round{border-radius:999px}
.walk-tap{position:absolute;left:0;top:0;z-index:21;width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:none;opacity:0;transform:translate3d(var(--tx,0),var(--ty,0),32px);transition:transform .6s cubic-bezier(.3,.7,.2,1),opacity .25s ease}
.walk-tap:before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--volt-hi);background:#3fd0ff30;box-shadow:0 0 0 6px #3fd0ff14,0 8px 16px #0009;transition:scale .16s ease}
.walk-tap:after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--volt);opacity:0}
.walk-tap.is-shown{opacity:1}
.walk-tap.is-press:before{scale:.78}
.walk-tap.is-press:after{animation:walk-ripple .55s ease-out}
@keyframes walk-ripple{from{opacity:.9;transform:scale(.8)}to{opacity:0;transform:scale(2.1)}}
.walk-tap svg{display:none}
/* On a laptop the pointer is a cursor, not a fingertip. */
.laptop .walk-tap{width:22px;height:22px;margin:-4px 0 0 -5px}
.laptop .walk-tap:before{inset:auto;width:22px;height:22px;left:-6px;top:-6px;border-width:1.5px;background:#3fd0ff26;box-shadow:none;opacity:0}
.laptop .walk-tap.is-press:before{opacity:1}
.laptop .walk-tap:after{left:-6px;top:-6px;width:22px;height:22px;inset:auto}
.laptop .walk-tap svg{display:block;position:relative;width:16px;height:20px;filter:drop-shadow(1px 3px 3px #000a)}

.walk-note{margin:10px 0 0;font-size:11.5px;color:var(--muted);text-align:center;max-width:44ch}
.platform .platform-note{grid-area:note;margin:4px 0 0 70px}

/* ---------- Controls under the device ---------- */
.walk-controls{display:flex;align-items:center;gap:6px;margin-top:6px;width:100%;max-width:400px}
.walk-controls button{flex:none;min-width:44px;min-height:44px;border:1px solid var(--line2);border-radius:10px;background:var(--bg2);color:var(--text);display:grid;place-items:center;transition:border-color .18s ease,color .18s ease}
.walk-controls button:hover{border-color:var(--volt-lo);color:var(--volt-hi)}
.walk-controls button svg{width:16px;height:16px}
.walk-controls [data-walk-play]{padding:0 14px;font-size:12px;display:flex;gap:8px}
.walk-caption{flex:1;min-width:0;margin:0;padding:0 6px;font-size:13px;line-height:1.35;color:var(--text);text-align:center}
.walk-caption .num{display:block;font:600 10px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-hi);margin-bottom:2px}

/* ---------- The step list follows the device ---------- */
.walk-ready .step-list>li{transition:opacity .2s ease}
.walk-ready .step-list h3{margin:6px 0 4px}
.step-go{font:inherit;color:inherit;background:none;border:0;padding:3px 0;margin:0;text-align:left;cursor:pointer;min-height:36px}
.step-go:hover{color:var(--bronze-hi)}
.walk-ready .step-list>li:not([aria-current]) h3{color:#c9ccd1}
.walk-ready .step-list>li:not([aria-current]) p{color:#7d8a99}
.step-list>li[aria-current]:before{border-color:var(--volt);color:var(--volt-hi);box-shadow:0 0 0 4px #3fd0ff14}
.step-list>li.is-done:before{border-color:var(--bronze);background:#c8893f1f}
.step-fill{position:absolute;left:22px;top:44px;bottom:0;width:1px;background:var(--volt);transform:scaleY(0);transform-origin:top;z-index:0}
.step-list>li.is-done .step-fill{transform:scaleY(1);background:var(--bronze)}
.step-list>li:last-child .step-fill{display:none}

/* ---------- Hero ---------- */
/* The first screen is the guide's cover: the hero fills it, so the device tabs start
   below the fold instead of peeking cut. Steward stands flat beside the tilted phone;
   the contrast between the drawing and the 3D device is the point, so the tilt never
   reaches him. Whole figure, no softened edge and no orbit rings here (user, 2026-09-30). */
.page-install .page-hero{min-height:clamp(560px,calc(100svh - 66px),960px);display:flex;align-items:center;padding:36px 0}
.page-install .page-hero>.wrap{width:100%}
.page-install .page-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px}
.install-hero-art{justify-content:flex-end}
.install-hero-art .walk-scene{justify-content:flex-end;padding-right:6%}
.page-hero-art>img.hero-steward{position:absolute;left:0;bottom:5%;z-index:3;width:auto;height:88%;-webkit-mask-image:none;mask-image:none;max-width:none;pointer-events:none;filter:drop-shadow(10px 18px 22px #000a)}
.install-hero-art .walk-scene{padding:0 10px 30px}
.install-hero-art .walk-scene:before,.install-hero-art .walk-scene:after{display:none}
.install-hero-art .handset{--screen-h:480px;width:260px}
.install-hero-art .walk-screen{border-radius:30px}
.install-hero-art .ws-home{opacity:1;visibility:visible;transform:none;padding:42px 15px 12px}
.install-hero-art .hs-grid{gap:13px 11px}
.install-hero-art .walk-floor{width:200px;margin-left:-100px}

/* The one-step install, only when the browser offers it. */
.install-now{margin:22px 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.install-now p{margin:0;font-size:13px;color:var(--muted);max-width:40ch}
.install-state{margin:18px 0 0;font-size:13px;color:var(--text);border-left:2px solid var(--bronze);padding:2px 0 2px 12px;max-width:60ch}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
 .page-install .page-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .install-hero-art .handset{width:220px;--screen-h:410px}
 .page-hero-art>img.hero-steward{left:0;height:70%;width:auto}
 .platform{column-gap:36px}
 .handset{width:250px;--screen-h:480px}
 .laptop{width:400px}.laptop .walk-screen{--screen-h:240px}.laptop-base{height:128px}
 .desk-page .desk-art{display:none}.desk-page{grid-template-columns:1fr}
}
@media(max-width:820px){
 .platform{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "visual" "steps" "note"}
 .platform>.platform-visual{margin:0 0 30px}
 .platform>.step-list{margin-top:0}
}
@media(max-width:680px){
 .page-install .page-hero{min-height:0;display:block}
 .walk-scene{padding:10px 0 28px}
 .walk-scene:before{width:100%}.walk-scene:after{width:84%}
 .handset{width:232px;--screen-h:440px;border-radius:40px}
 .walk-screen{border-radius:31px}
 .laptop{width:100%;max-width:340px}.laptop .walk-screen{--screen-h:206px}.laptop-base{height:104px}
 .desk-pop{width:168px;top:60px}
 .desk-app{inset:10px 16px 10px 20px}
 .walk-controls{max-width:none}
}
@media(max-width:380px){.handset{width:220px;--screen-h:420px}}

/* ---------- Still motion ---------- */
.motion-paused .walk-device{transform:none}
.motion-paused .walk-floor{transform:none}
.motion-paused .ws-layer,.motion-paused .walk-lift,.motion-paused .walk-tap,.motion-paused .walk-screen:after,.motion-paused .ws-scrim,.motion-paused .sheet-list,
.motion-paused .ios-menu,.motion-paused .ios-sheet,.motion-paused .ios-add,.motion-paused .chrome-menu,.motion-paused .chrome-dialog,.motion-paused .ws-home,.motion-paused .desk-pop,.motion-paused .desk-app{transition:none}
.motion-paused .walk-tap:after{animation:none}
@media(prefers-reduced-motion:reduce){.walk-device,.walk-floor{transform:none!important}}