/* echo-one.health home page. Tokens and chrome come from site.css. */

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}

/* Three visual modes: human (paper), product (bright), intelligence (night). */
section{position:relative}
.m-human{background:var(--paper);color:var(--ink)}
.m-product{background:var(--white);color:var(--ink)}
.m-intel{background:var(--night);color:var(--night-ink)}
.m-intel .eyebrow{color:var(--mint)}


/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,9vh,110px) 0}
.hero .kicker{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:clamp(20px,4vh,40px);color:var(--muted)}
.hero h1{font-size:clamp(2.5rem,8.2vw,7.5rem);font-weight:700;letter-spacing:-.055em;line-height:.98}
.hero h1 span{display:block}
.hero h1 .c{color:var(--green)}
.hero h1 span{animation:rise .9s var(--ease) both}
.hero h1 span:nth-child(2){animation-delay:.12s}.hero h1 span:nth-child(3){animation-delay:.24s}
@keyframes rise{from{opacity:.001;transform:translateY(.25em)}to{opacity:1;transform:none}}
.hero .lede{display:flex;flex-wrap:wrap;gap:24px 56px;align-items:end;justify-content:space-between;margin-top:clamp(28px,5vh,56px)}
.hero .lede p{font-size:clamp(1.1rem,1.6vw,1.45rem);max-width:34ch;line-height:1.4;color:var(--ink-2)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}

.stage{position:relative;border-radius:22px;background:var(--white);border:1px solid var(--rule);overflow:hidden;aspect-ratio:16/8.4;max-width:100%}
.stage .constellation,.stage .resolve{position:absolute;inset:0;transition:opacity 1.2s var(--ease),transform 1.6s var(--ease)}
.stage .constellation svg{width:100%;height:100%;display:block}
.stage .resolve{opacity:0;transform:scale(.965);padding:clamp(10px,2vw,26px);background:var(--white)}
.stage .resolve img{width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:10px;border:1px solid var(--rule)}
.stage.resolved .constellation{opacity:0;transform:scale(1.35)}
.stage.resolved .resolve{opacity:1;transform:none}
.stage .ticker{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;padding:14px 16px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9aa6a1;transition:opacity .8s}
.stage.resolved .ticker{opacity:0}
.ticker b{font-weight:500;transition:color .4s}
.ticker b.done{color:var(--green)}
.ticker b.on{color:var(--ink)}
.ticker i{font-style:normal;opacity:.5}
.cn-line{stroke:var(--ink);stroke-opacity:.14;stroke-width:1.2}
.cn-line.hot{stroke:var(--green);stroke-opacity:.8;transition:stroke-opacity .5s}
.cn-ring{fill:none;stroke:var(--rule);stroke-dasharray:3 7}
.cn-node circle{fill:var(--white);stroke:var(--ink);stroke-opacity:.35;stroke-width:1.2;transition:fill .4s,stroke .4s}
.cn-node.hot circle{fill:var(--mint);stroke:var(--green);stroke-opacity:1}
.cn-node text{font:500 19px var(--sans);fill:var(--ink);letter-spacing:-.01em}
.cn-core rect{fill:var(--ink)}
.cn-core .n{font:700 26px var(--sans);fill:#fff;letter-spacing:-.02em}
.cn-core .s{font:400 13px var(--mono);fill:var(--mint);letter-spacing:.06em}
.pulse{fill:var(--green)}
.pulse-halo{fill:var(--green);opacity:.18}
.stage .resolve-cap{position:absolute;left:clamp(18px,3vw,40px);bottom:clamp(18px,3vw,36px);background:var(--ink);color:#fff;border-radius:999px;padding:9px 16px;font:500 13px var(--sans)}

/* ---------- generic chapter heads ---------- */
.chapter{padding-block:clamp(90px,14vh,170px)}
.head{display:grid;gap:18px;max-width:900px}
.head h2{font-size:clamp(2.3rem,5.6vw,5.4rem);letter-spacing:-.045em}
.head p{font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--muted);max-width:52ch}
.m-intel .head p{color:var(--night-muted)}

/* ---------- scroll scenes ---------- */
.scene{position:relative}
.scene .pin{position:sticky;top:68px;height:calc(100vh - 68px);height:calc(100dvh - 68px);overflow:hidden}

/* stack → one platform */
#stack{height:240vh}
#stack .pin{display:flex;flex-direction:column;padding-top:clamp(28px,6vh,64px)}
#stack .heads{position:relative;min-height:clamp(150px,25vh,250px)}
#stack .heads .h{position:absolute;inset:0 auto auto 0;transition:opacity .5s var(--ease),transform .5s var(--ease)}
#stack .heads h2{font-size:clamp(2rem,4.2vw,4rem);max-width:22ch;letter-spacing:-.045em}
#stack .heads p{margin-top:14px;color:var(--muted);font-size:1.1rem}
#stack .field{position:relative;flex:1;margin-block:10px 34px}
#stack svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wire{stroke:var(--ink);stroke-opacity:.2;stroke-width:1;stroke-dasharray:2 6;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-16}}
.tool{position:absolute;transform:translate(-50%,-50%);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 16px 11px;font-weight:600;font-size:15px;white-space:nowrap;box-shadow:0 1px 0 rgba(15,30,46,.04),0 12px 30px -18px rgba(15,30,46,.35);will-change:left,top,transform,opacity}
.tool small{display:block;font:400 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8b958f;margin-top:3px}
.tool .lock{display:inline-block;margin-left:8px;font:500 10px var(--mono);letter-spacing:.06em;color:var(--caution);border:1px solid color-mix(in srgb,var(--caution) 40%,transparent);border-radius:999px;padding:2px 6px;vertical-align:2px}
.core{position:absolute;left:50%;top:50%;width:min(780px,62%);transform:translate(-50%,-50%) scale(var(--cs,.9));opacity:var(--co,0);background:var(--ink);color:#fff;border-radius:20px;padding:20px 20px 16px;box-shadow:0 40px 80px -40px rgba(15,30,46,.55)}
.core .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.core .top img{height:22px;width:auto}
.core .top span{font:500 11px var(--mono);letter-spacing:.1em;color:var(--mint)}
.core .shot{border-radius:10px;overflow:hidden;background:#fff}
.core .shot img{width:100%;aspect-ratio:16/8.2;object-fit:cover;object-position:top left}
.sat{position:absolute;transform:translate(-50%,-50%);opacity:var(--so,0);font-weight:600;font-size:15px;background:var(--paper);border:1px solid var(--green);color:var(--green-2);border-radius:999px;padding:9px 16px;white-space:nowrap}
.sat-wire{stroke:var(--green);stroke-width:1.2;stroke-dasharray:3 5;animation:flow 1.4s linear infinite}

/* product reveal */
#reveal{height:400vh}
#reveal .pin{display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3vh,30px)}
#reveal .top{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;width:min(92vw,1640px);margin-inline:auto}
#reveal h2{font-size:clamp(2rem,4.2vw,4rem);letter-spacing:-.045em}
.tabs{display:flex;gap:4px;background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:4px;flex-wrap:wrap}
.tabs button{font:600 13.5px var(--sans);border:0;background:transparent;color:var(--muted);padding:9px 15px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.screen{position:relative;width:min(88vw,1640px);margin-inline:auto;aspect-ratio:16/10;max-height:calc(100dvh - 68px - 150px);border-radius:16px;background:#fff;border:1px solid var(--rule);box-shadow:0 60px 120px -60px rgba(15,30,46,.45),0 2px 0 rgba(15,30,46,.03);overflow:hidden;transform:translateY(calc((0.5 - var(--p,0)) * 26px))}
.screen .layer{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.screen .layer.on{opacity:1}
.screen .layer img{width:100%;height:100%;object-fit:cover;object-position:top left;transform:none}
.note{position:absolute;left:var(--x);top:var(--y);opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease) .25s,transform .5s var(--ease) .25s;pointer-events:none}
.layer.on .note{opacity:1;transform:none}
.note .dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px color-mix(in srgb,var(--green) 18%,transparent)}
.note .stem{position:absolute;left:0;width:1px;background:var(--green)}
.note .lab{position:absolute;white-space:nowrap;background:var(--ink);color:#fff;font:600 13px var(--sans);padding:8px 12px;border-radius:8px}
.note.up .stem{bottom:6px;height:44px}.note.up .lab{bottom:50px;left:-12px}
.note.down .stem{top:6px;height:44px}.note.down .lab{top:50px;left:-12px}
.note.l .lab{left:auto;right:-12px}

/* Margaret */
#margaret{height:220vh}
#margaret .pin{display:grid;grid-template-columns:45% 1fr;align-items:center;gap:clamp(24px,5vw,80px)}
.portrait{height:min(78vh,760px);border-radius:24px;background:linear-gradient(180deg,var(--paper-2),var(--sage));position:relative;overflow:hidden;display:grid;place-items:center}
.portrait .ph{text-align:center;color:var(--green-2)}
.portrait .ph .cameo{display:block;width:186px;height:186px;margin:0 auto 22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px var(--paper-2),0 18px 40px rgba(15,30,46,.18)}
.portrait .ph .big{font-weight:800;font-size:clamp(3rem,6vw,5.5rem);letter-spacing:-.06em;line-height:.9;color:var(--ink);opacity:.9}
.portrait .ph .tag{margin-top:18px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;border:1px dashed var(--green);border-radius:999px;padding:7px 12px;display:inline-block}
.portrait svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.mg h2{font-size:clamp(2.1rem,4.4vw,4.3rem);letter-spacing:-.045em;max-width:15ch}
.ctx{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;max-width:640px}
.ctx span{font-weight:600;font-size:15px;border-radius:999px;padding:9px 15px;background:var(--white);border:1px solid var(--rule);opacity:.001;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ctx span.core-f{background:var(--ink);color:#fff;border-color:var(--ink)}
.ctx span.on{opacity:1;transform:none}
.coda{margin-top:44px;display:grid;gap:6px}
.coda p{font-size:clamp(1.8rem,3.2vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1.05;opacity:.001;transition:opacity .7s var(--ease)}
.coda p.on{opacity:1}
.coda p:last-child{color:var(--green)}

/* Intelligence */
.reason{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,90px);margin-top:clamp(50px,8vh,90px);align-items:start}
.chain{display:grid;gap:0}
.inputs{display:flex;flex-wrap:wrap;gap:8px}
.inputs span{font:500 14px var(--sans);border:1px solid var(--night-line);background:var(--night-2);border-radius:10px;padding:10px 13px;color:var(--night-ink);position:relative;overflow:hidden}
.inputs span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(185,231,216,.18),transparent);transform:translateX(-100%);animation:scan 3.6s var(--ease) infinite;animation-delay:calc(var(--i) * .35s)}
@keyframes scan{0%,55%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
.conn{height:54px;margin-left:32px;width:1px;background:var(--night-line);position:relative;overflow:hidden}
.conn::after{content:"";position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;background:var(--mint);top:-6px;animation:drop 1.6s linear infinite}
.conn.held::after{animation:none;opacity:0}
.chain.approved .conn.held::after{animation:drop 1.2s linear infinite;opacity:1}
@keyframes drop{to{top:60px}}
.box{border:1px solid var(--night-line);border-radius:16px;padding:18px 20px;background:var(--night-2)}
.box .k{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night-muted)}
.box.layer{background:linear-gradient(180deg,var(--night-3),var(--night-2));border-color:rgba(185,231,216,.34)}
.box.layer .t{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-top:6px}
.box.layer .t small{display:block;font:400 14px var(--sans);color:var(--night-muted);letter-spacing:0;margin-top:6px}
.box.sugg .t{font-size:1.2rem;font-weight:600;margin-top:8px;line-height:1.35}
.box.sugg input{width:100%;font:600 1.1rem var(--sans);color:var(--night-ink);background:var(--night);border:1px solid var(--mint);border-radius:8px;padding:10px 12px;margin-top:8px}
.box.sugg .src{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.box.sugg .src span{font:500 11px var(--mono);letter-spacing:.04em;color:var(--mint);border:1px solid var(--night-line);border-radius:6px;padding:4px 7px}
.gate{border:1px solid var(--mint);background:rgba(185,231,216,.06)}
.gate .row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gate .who{font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.gate .acts{display:flex;gap:8px;flex-wrap:wrap}
.gate button{font:600 14px var(--sans);border-radius:999px;padding:10px 16px;cursor:pointer;border:1px solid var(--night-line);background:transparent;color:var(--night-ink);transition:background .25s,color .25s,border-color .25s}
.gate button.primary{background:var(--mint);color:var(--night);border-color:var(--mint)}
.gate button:hover{border-color:var(--mint)}
.box.done{opacity:.35;transition:opacity .6s var(--ease),border-color .6s}
.chain.approved .box.done{opacity:1;border-color:var(--mint)}
.box.done .t{font-weight:600;margin-top:6px}
.chain.approved .gate{animation:settle .6s var(--ease)}
@keyframes settle{50%{box-shadow:0 0 0 8px rgba(185,231,216,.12)}}
.sarah{position:sticky;top:110px}
.sarah .ill{background:#fff;border-radius:24px;overflow:hidden;aspect-ratio:1/1;display:grid;place-items:center}
.sarah .ill img{width:92%}
.sarah p{margin-top:18px;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.15;max-width:18ch}
.sarah p em{font-style:normal;color:var(--mint)}
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(70px,10vh,120px)}
.proof figure{margin:0}
.proof .im{border-radius:12px;overflow:hidden;background:#fff;aspect-ratio:16/10;border:1px solid var(--night-line);transition:transform .4s var(--ease)}
.proof figure:hover .im{transform:translateY(-4px)}
.proof img{width:100%;height:100%;object-fit:cover;object-position:top left}
.proof figcaption{margin-top:12px;font-size:14.5px;color:var(--night-muted)}
.proof figcaption b{display:block;color:var(--night-ink);font-weight:600;font-size:15.5px;margin-bottom:2px}

.shot{border-radius:14px;overflow:hidden;border:1px solid var(--rule);background:#fff}
.shot img{width:100%;aspect-ratio:16/9.4;object-fit:cover;object-position:top left}
.cap{margin-top:12px;font-size:14.5px;color:var(--muted)}
.cap b{color:var(--ink);font-weight:600}

/* platform settings */
#settings{height:340vh}
#settings .pin{display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3vh,30px)}
#settings .top{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;width:min(88vw,1500px);margin-inline:auto}
#settings h2{font-size:clamp(2rem,4.2vw,4rem);letter-spacing:-.045em}
.setting-name{font:700 clamp(1.4rem,2.4vw,2.2rem) var(--sans);letter-spacing:-.03em;color:var(--green)}
.set-stage{position:relative;width:min(88vw,1500px);margin-inline:auto;aspect-ratio:16/9;max-height:calc(100dvh - 68px - 170px)}
.set-one,.set-all{position:absolute;inset:0;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.set-one .layer{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease);border-radius:16px;overflow:hidden;border:1px solid var(--rule);background:#fff;box-shadow:0 50px 100px -60px rgba(15,30,46,.45)}
.set-one .layer.on{opacity:1}
.set-one img{width:100%;height:100%;object-fit:cover;object-position:top left}
.set-all{opacity:0;transform:scale(1.06);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-content:center;pointer-events:none}
.set-stage.all .set-one{opacity:0;transform:scale(.9)}
.set-stage.all .set-all{opacity:1;transform:none;pointer-events:auto}
.set-all figure{margin:0;position:relative}
.set-all .im{border-radius:10px;overflow:hidden;border:1px solid var(--rule);background:#fff;aspect-ratio:4/5}
.set-all img{width:100%;height:100%;object-fit:cover;object-position:top left}
.set-all figcaption{margin-top:10px;font-weight:600;font-size:14.5px}
.set-all .spine{grid-column:1/-1;position:relative;height:60px;margin-top:6px}
.set-all .spine::before{content:"";position:absolute;left:10%;right:10%;top:0;height:28px;border:1px solid var(--green);border-top:0;border-radius:0 0 12px 12px}
.set-all .spine span{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:var(--white);padding:4px 14px;font:600 14px var(--sans);color:var(--green-2);white-space:nowrap}

/* architecture */
.arch{margin-top:clamp(50px,8vh,90px);border:1px solid var(--night-line);border-radius:22px;background:radial-gradient(120% 90% at 50% 0%,#12283b 0%,var(--night) 60%);padding:clamp(12px,2vw,28px)}
.arch svg{width:100%;height:auto;display:block}
.ar-t{font:700 16px var(--sans);fill:var(--night-ink);letter-spacing:.06em}
.ar-h{font:500 12.5px var(--mono);fill:var(--mint);letter-spacing:.14em}
.ar-i{font:500 15px var(--sans);fill:#b9c7c6}
.ar-box{fill:var(--night-2);stroke:rgba(185,231,216,.28)}
.ar-core{fill:var(--mint)}
.ar-core-t{font:800 17px var(--sans);fill:var(--night);letter-spacing:.08em}
.ar-p{fill:none;stroke:rgba(185,231,216,.22);stroke-width:1.3}
.ar-f{fill:none;stroke:var(--mint);stroke-width:1.6;stroke-dasharray:4 10;opacity:.0;transition:opacity .4s;animation:flow 1.2s linear infinite}
.arch .grp{cursor:pointer}
.arch .grp .ar-box{transition:stroke .3s,fill .3s}
.arch .grp:hover .ar-box,.arch .grp.on .ar-box{stroke:var(--mint);fill:#173149}
.arch[data-hot] .ar-f{opacity:.15}
.arch[data-hot="before"] .f-before,.arch[data-hot="during"] .f-during,.arch[data-hot="after"] .f-after,.arch[data-hot="clinical"] .f-clinical,.arch[data-hot="practice"] .f-practice,.arch[data-hot="patient"] .f-patient{opacity:1}
.arch:not([data-hot]) .ar-f{opacity:.55}
.arch-cap{min-height:3em;margin-top:18px;color:var(--night-muted);font-size:15.5px;text-align:center}
.arch-cap b{color:var(--night-ink)}
.arch-list{display:none}

/* trust */
.trust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);margin-top:clamp(50px,8vh,90px);align-items:start}
.slabs{display:grid;gap:0;perspective:1200px}
.slab{border:1px solid var(--line);border-bottom:0;background:var(--white);padding:0;text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;transition:background .3s}
.slab:last-child{border-bottom:1px solid var(--line)}
.slab:first-child{border-radius:14px 14px 0 0}.slab:last-child{border-radius:0 0 14px 14px}
.slab .row{display:flex;align-items:center;gap:16px;padding:17px 20px}
.slab .n{font:500 11px var(--mono);color:var(--muted);width:22px}
.slab .t{font-weight:700;font-size:17px;letter-spacing:-.01em;flex:1}
.slab .pl{font:400 20px var(--sans);color:var(--green);transition:transform .3s var(--ease)}
.slab .d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.slab .d > div{overflow:hidden}
.slab .d p{padding:0 20px 18px 58px;color:var(--muted);font-size:15px;max-width:60ch}
.slab[aria-expanded="true"]{background:var(--paper)}
.slab[aria-expanded="true"] .d{grid-template-rows:1fr}
.slab[aria-expanded="true"] .pl{transform:rotate(45deg)}
.slab:hover{background:var(--paper)}
.tr-side .shot img{aspect-ratio:16/10}
.tr-note{margin-top:22px;padding:18px 20px;border-radius:14px;background:var(--sage);color:var(--green-2);font-size:15px}

/* film + end */
.film{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;background:#000;margin-top:clamp(40px,6vh,70px);box-shadow:0 60px 120px -60px rgba(0,0,0,.6)}
.film video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.film-cover{position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer;color:#fff;font:inherit}
.film-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,26,39,0) 55%,rgba(12,26,39,.92) 84%,#0c1a27 100%)}
.film .play{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;font-weight:600;font-size:1.15rem;white-space:nowrap}
.film .play i{width:72px;height:72px;border-radius:50%;background:rgba(247,246,240,.95);display:grid;place-items:center;transition:transform .35s var(--ease)}
.film-cover:hover .play i,.film-cover:focus-visible .play i{transform:scale(1.07)}
.film .play i::after{content:"";margin-left:6px;border-left:18px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent}
.film.playing .film-cover{display:none}
.film-more{margin-top:18px}
.end{text-align:left}
.end h2{font-size:clamp(2.6rem,7vw,7rem);letter-spacing:-.055em;line-height:.95;max-width:14ch}
.end .row{display:flex;gap:40px;align-items:end;justify-content:space-between;flex-wrap:wrap;margin-top:44px}
.end .sign{font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:700;letter-spacing:-.03em;color:var(--green)}

/* ---------- narrow screens & reduced motion: scenes become static ---------- */
@media (max-width:860px), (max-height:700px), (prefers-reduced-motion:reduce){
  #stack,#reveal,#larry,#margaret,#settings,#practice{height:auto}
  .scene .pin{position:relative;top:0;height:auto;overflow:visible;padding-block:70px}
  #stack .heads{min-height:0}
  #stack .heads .h{position:relative}
  #stack .heads .h + .h{margin-top:28px}
  #stack .field{height:420px;flex:none}
  .tool{font-size:12.5px;padding:8px 10px}
  .tool small,.tool .lock{display:none}
  .screen{width:100%;max-height:none;transform:none}
  #reveal .top{width:100%}
  .note .lab{font-size:11.5px;padding:6px 9px}
  #margaret .pin{grid-template-columns:1fr}
  .portrait{height:360px}
  .portrait .ph .cameo{width:140px;height:140px}
  .ctx span,.coda p{opacity:1;transform:none}
  .reason,.trust{grid-template-columns:1fr}
  .sarah{position:relative;top:0}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .set-stage{width:100%;aspect-ratio:auto;max-height:none}
  #settings .top{width:100%}
  .set-one{display:none}
  .set-all{position:relative;opacity:1;transform:none;grid-template-columns:repeat(2,minmax(0,1fr));pointer-events:auto}
  .arch svg{display:none}
  .arch-list{display:grid;gap:14px;padding:8px}
  .arch-cap{display:none}
  .stage{aspect-ratio:4/3.6}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* Hero as a pinned scene: the headline fills the first screen, then the
   constellation rises, Larry's journey advances with the scroll, and the view
   resolves into his record. Static below 861px and with reduced motion. */
#hero{height:240vh;padding:0}
#hero .hero-pin{padding:0}
.hero-copy{position:absolute;left:0;right:0;top:0;padding-top:clamp(28px,5vh,64px);transform-origin:20% 0;will-change:transform,opacity}
.stage-wrap{position:absolute;left:50%;top:50%;width:min(92vw,1500px,(100dvh - 190px) * 1.9);transform:translate(-50%,-50%);will-change:transform}
.stage{box-shadow:0 60px 120px -70px rgba(15,30,46,.5)}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);color:var(--muted);transition:opacity .4s}
.scroll-cue::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:linear-gradient(var(--muted),transparent);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:860px), (max-height:700px), (prefers-reduced-motion:reduce){
  #hero{height:auto}
  #hero .hero-pin{position:relative;height:auto;padding-block:48px 40px}
  .hero-copy,.stage-wrap{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important;width:auto}
  .stage-wrap{margin:36px var(--gutter) 0}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  #hero{height:auto}
  #hero .hero-pin{position:relative;height:auto}
  .hero-copy,.stage-wrap{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important}
  .stage-wrap{width:auto;margin:40px var(--gutter) 0}
  .scroll-cue{display:none}
}

.ctx .with-face{display:inline-flex;align-items:center;gap:6px}
.ctx .with-face img{width:20px;height:20px;border-radius:50%;object-fit:cover}

/* ---------- What it replaces ---------- */
.rp{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);margin-top:clamp(30px,5vh,56px);align-items:start}
.rp-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rp-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(12px,3vw,40px);padding:16px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.rp-list b{font-weight:600;font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:-.01em}
.rp-list b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:12px;vertical-align:.15em}
.rp-list span{color:var(--muted)}
.rp-not{border:1px solid var(--rule);border-radius:16px;padding:22px 24px;background:var(--white)}
.rp-not h3{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.rp-not ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rp-not li{display:grid;gap:3px}
.rp-not b{font-weight:600}
.rp-not span,.rp-mig{color:var(--muted);font-size:14.5px;line-height:1.45}
.rp-mig{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
@media (max-width:860px), (max-height:700px), (prefers-reduced-motion:reduce){.rp,.rp-list li{grid-template-columns:1fr}.rp-list li{gap:4px}}

/* ---------- Larry: the illustration hands over to the real product ---------- */
#larry{height:500vh}
#larry .pin{display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2.4vh,26px)}
#larry .head h2{font-size:clamp(1.8rem,3.4vw,3.2rem);max-width:24ch}
.lz{position:relative}
.lz-stage{position:relative;height:min(54vh,560px)}
/* Every actor sits on the stage at --x (percent) and fades in when its
   chapter needs it; the transitions carry the choreography. */
.actor,.dev{position:absolute;left:var(--x,50%);opacity:0;pointer-events:none;transition:left .9s var(--ease),opacity .6s var(--ease),transform .9s var(--ease),width .9s var(--ease)}
.actor.on,.dev.on{opacity:1}
.actor{bottom:0;height:min(40vh,300px);width:auto;border-radius:22px;transform:translateX(-50%) scale(var(--s,1));transform-origin:50% 100%;box-shadow:0 30px 60px -40px rgba(15,30,46,.5)}
.dev{top:50%;margin:0;transform:translate(-50%,-50%) scale(var(--s,.96))}
.dev img{display:block}
.dev.phone{border-radius:30px;background:var(--ink);padding:7px;box-shadow:0 40px 80px -50px rgba(15,30,46,.7)}
.dev.phone img{height:min(50vh,520px);width:auto;border-radius:24px}
.dev.kiosk{border-radius:22px;background:var(--ink);padding:10px;box-shadow:0 40px 80px -50px rgba(15,30,46,.7)}
.dev.kiosk img{height:min(50vh,520px);width:auto;border-radius:14px}
.dev.screen{width:min(60vw,calc(min(54vh,560px) * 1.45));border-radius:14px;overflow:hidden;border:1px solid var(--rule);background:#fff;box-shadow:0 50px 90px -60px rgba(15,30,46,.6)}
.dev.screen.full{width:min(88vw,calc(min(54vh,560px) * 1.6))}
.dev.screen img{width:100%;height:auto}
.lz-line{display:block;width:100%;height:40px;overflow:visible}
.lz-line path{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke}
.lz-track{stroke:var(--line)}
.lz-fill{stroke:var(--green);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--lp,0))}
.lz-line .node{fill:var(--paper);stroke:var(--line);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill .4s,stroke .4s}
.lz-line .node.on{fill:var(--green);stroke:var(--green)}
.lz-steps{list-style:none;margin:0;padding:0;position:relative;min-height:4.2em}
.lz-steps li{position:absolute;inset:0 0 auto;display:flex;gap:14px;align-items:baseline;justify-content:center;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.lz-steps li.on{opacity:1;transform:none}
.lz-steps b{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green);white-space:nowrap}
.lz-steps span{font-size:clamp(1rem,1.4vw,1.25rem);max-width:56ch;color:var(--ink-2)}
.lz-thumb{display:none}

/* ---------- Practice: the whole practice on one wall, then one view at a time ---------- */
#practice{height:320vh}
#practice .pin{display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.6vh,28px)}
.pr-head{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap}
.pr-head h2{font-size:clamp(1.8rem,3.6vw,3.4rem);letter-spacing:-.045em;margin-top:10px}
.pr-tabs button{color:var(--night-muted)}
.pr{position:relative;width:min(94vw,1520px);height:min(62vh,700px);margin:0 auto}
.pr .t{position:absolute;margin:0;left:var(--l);top:var(--t);width:var(--w);height:var(--h);border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--night-line);opacity:var(--o,1);transition:left .8s var(--ease),top .8s var(--ease),width .8s var(--ease),height .8s var(--ease),opacity .6s var(--ease),transform .6s var(--ease)}
.pr .t img{width:100%;height:100%;object-fit:cover;object-position:top left}
.pr .t figcaption{position:absolute;left:10px;bottom:10px;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:rgba(9,20,30,.86);color:var(--night-ink);padding:5px 8px;border-radius:6px}
.pr .t.focus{z-index:2;box-shadow:0 60px 120px -50px rgba(0,0,0,.8)}
.pr .t.focus figcaption{display:none}
.pr[data-state="wall"] .t{transform:scale(var(--in,1))}
.pr-obs{position:absolute;left:73%;right:0;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .5s var(--ease)}
.pr:not([data-state="wall"]) .pr-obs{opacity:1}
.pr-obs .k{color:var(--mint);margin-bottom:14px}
.pr-obs p{display:none;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.4;padding-left:16px;border-left:1px solid var(--mint)}
.pr-obs p.on{display:block}
.pr-foot{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--night-muted)}

/* ---------- The admin that disappears ---------- */
#admin{padding-top:0}
.ad-list{list-style:none;margin:clamp(30px,5vh,56px) 0 0;padding:0;border-top:1px solid var(--night-line)}
.ad-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(16px,4vw,60px);padding:clamp(14px,2.2vh,22px) 0;border-bottom:1px solid var(--night-line);align-items:baseline}
.ad-list s{color:var(--night-muted);text-decoration-color:rgba(185,231,216,.5);text-decoration-thickness:1px;font-size:clamp(1rem,1.4vw,1.2rem)}
.ad-list span{font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:-.01em}
.ad-note{margin-top:22px;font-size:14px;color:var(--night-muted)}
.ad-note a{color:var(--mint);white-space:nowrap}
@media (max-width:860px), (max-height:700px), (prefers-reduced-motion:reduce){.ad-list li{grid-template-columns:1fr;gap:6px}}

/* ---------- One frame, several views ---------- */
.comp{margin-top:clamp(30px,5vh,56px)}
.comp .tabs{margin-bottom:16px}
.comp-frame{border-radius:16px;overflow:hidden;border:1px solid var(--rule);background:#fff;width:min(100%,1100px)}
.comp-frame figure{margin:0}
.comp-frame img{width:100%;height:auto;display:block}
.comp-frame figcaption{padding:14px 18px;font-size:15px;color:var(--muted);border-top:1px solid var(--rule)}

/* ---------- Echo Patient: one phone, every state ---------- */
.ph{display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;margin-top:clamp(30px,5vh,56px)}
.ph-tabs{display:flex;flex-direction:column;align-items:stretch;border-radius:18px;padding:6px}
.ph-tabs button{text-align:left}
.ph-stage figure{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.ph-phone{border-radius:40px;background:var(--ink);padding:9px;box-shadow:0 50px 90px -55px rgba(15,30,46,.7)}
.ph-phone img{display:block;height:min(72vh,680px);width:auto;border-radius:32px}
.ph-stage figcaption{font-size:clamp(1.15rem,1.8vw,1.6rem);line-height:1.35;letter-spacing:-.01em;max-width:24ch}
.ph-stage figcaption b{display:block;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:12px}

/* ---------- Front door: kiosk states beside the waiting-room screen ---------- */
.fd{margin-top:clamp(30px,5vh,56px)}
.fd .tabs{margin-bottom:22px}
.fd-stage{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.fd-kiosk figure{margin:0}
.fd-kiosk img{display:block;width:100%;height:auto;border-radius:18px;border:10px solid var(--ink);box-shadow:0 40px 80px -50px rgba(15,30,46,.6)}
.fd-kiosk figcaption,.fd-tv figcaption{margin-top:14px;font-size:15px;color:var(--muted)}
.fd-tv figcaption b{color:var(--ink);font-weight:600}
.fd-tv{margin:0}
.fd-tv .tv{border-radius:14px;border:14px solid #111a22;border-bottom-width:22px;overflow:hidden;box-shadow:0 50px 90px -60px rgba(15,30,46,.7)}
.fd-tv .tv img{display:block;width:100%;height:auto}
.fd-phone{margin:clamp(34px,6vh,64px) 0 0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.fd-phone .shot-frame{border-radius:14px;overflow:hidden;border:1px solid var(--rule);background:#fff;box-shadow:0 40px 80px -60px rgba(15,30,46,.6)}
.fd-phone img{display:block;width:100%;height:auto}
.fd-phone figcaption{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.45;color:var(--muted)}
.fd-phone figcaption b{display:block;color:var(--ink);font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.02em;margin-bottom:10px}

/* ---------- Questions, folded at the foot of the page ---------- */
.faq-fold{background:var(--paper);padding:10px 0 70px}
.faq-fold > .wrap > details{border-top:1px solid var(--rule);padding-top:18px}
.faq-fold summary{display:flex;align-items:baseline;gap:16px;cursor:pointer;list-style:none}
.faq-fold summary::-webkit-details-marker{display:none}
.faq-fold summary .q{font-size:1.05rem;color:var(--muted)}
.faq-fold summary::after{content:"+";margin-left:auto;color:var(--green);font-size:1.3rem}
.faq-fold > .wrap > details[open] > summary::after{content:"–"}
.faq-fold .faq-list{max-width:820px;margin:18px 0 20px}

/* ---------- The journey thread: one fine line through the whole page ---------- */
.thread{position:fixed;left:clamp(10px,1.4vw,24px);top:96px;bottom:32px;width:1px;background:rgba(47,111,98,.18);z-index:5;pointer-events:none}
.thread i{position:absolute;left:0;top:0;width:1px;height:calc(var(--tp,0) * 100%);background:var(--green)}
.thread i::after{content:"";position:absolute;left:-2.5px;bottom:-3px;width:6px;height:6px;border-radius:50%;background:var(--green)}
@media (max-width:1100px){.thread{display:none}}

@media (max-width:860px), (max-height:700px), (prefers-reduced-motion:reduce){
  .lz-stage,.lz-line{display:none}
  .lz-steps{display:grid;gap:34px;min-height:0}
  .lz-steps li{position:relative;opacity:1;transform:none;display:grid;gap:8px;justify-items:start;text-align:left}
  .lz-thumb{display:block;max-height:420px;width:auto;max-width:100%;border-radius:14px;border:1px solid var(--rule)}
  .pr{height:auto;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 16px}
  .pr .t{position:relative;left:auto;top:auto;width:auto;height:auto;aspect-ratio:16/10;opacity:1;transform:none}
  .pr-obs{position:relative;left:auto;top:auto;transform:none;opacity:1;grid-column:1/-1;margin-top:18px}
  .pr-obs p{display:block;margin-bottom:12px}
  .pr-tabs{display:none}
  .fd-stage,.fd-phone{grid-template-columns:1fr}
  .ph{grid-template-columns:1fr}
  .ph-tabs{flex-direction:row;overflow-x:auto;flex-wrap:nowrap}
  .ph-stage figure{grid-template-columns:1fr}
  .ph-phone{justify-self:start}
  .ph-phone img{height:min(64vh,560px)}
  .fd-kiosk{max-width:360px}
}

/* Connected care: three cards (what changed, why, what next), then the film
   beside the consult-linking product preview. Static, no pinning. */
#connected .head h2{font-size:clamp(2.1rem,4.4vw,3.6rem)}
.cc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(36px,6vh,64px)}
.cc-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.cc-shot{height:220px;border-bottom:1px solid var(--rule);background:var(--white)}
.cc-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 38%}
.cc-top img{object-position:0 0}
.cc-stack{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:12px}
.cc-stack img{height:auto;object-position:0 0}
.cc-stack img:first-child{height:132px}
.cc-body{display:grid;gap:8px;padding:24px 28px 28px}
.cc-body h3{font-size:1.35rem;line-height:1.25}
.cc-body p{color:var(--muted)}
.cc-n,.cc-meta,.cc-tag{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.cc-n{color:var(--green)}
.cc-films{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;margin-top:24px;align-items:stretch}
.cc-main{display:grid;gap:12px;align-content:start}
.cc-meta{color:var(--muted)}
.cc-preview{display:flex;flex-direction:column;gap:16px;background:var(--night);color:var(--night-ink);border-radius:16px;padding:28px}
.cc-preview h3{font-size:1.5rem;line-height:1.25}
.cc-preview p{color:#c9d6d2}
.cc-preview .film-embed{margin-top:auto}
.cc-preview .film-embed video,.cc-preview .film-embed img{border-color:var(--night-line)}
.cc-preview .film-embed figcaption{color:var(--night-muted);font-size:13px}
.cc-tag{align-self:flex-start;color:var(--night);background:var(--mint);border-radius:999px;padding:4px 12px}
.cc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.cc-note{margin-left:auto;font-size:14px;color:var(--muted)}
@media (max-width:960px){
  .cc-cards,.cc-films{grid-template-columns:1fr}
  .cc-shot{height:200px}
  .cc-note{margin-left:0;flex-basis:100%}
}

/* A walkthrough film under an app's section (Echo Patient, the front door). */
.app-film { max-width: 880px; margin: clamp(28px, 5vh, 48px) auto 0; }

/* ---------- Phones: more of the product on screen ----------
   The pinned scenes carry the imagery on a wide screen; below 861px they go
   static, so the imagery is given back as a hero collage, swipeable screens
   for the practice views, the settings and the admin that disappears, and
   journey screens at full width. Desktop is unchanged. */
.hero-shots,.ad-shot{display:none}
@keyframes hs-rise{from{opacity:0;transform:translateY(24px) rotate(0deg)}}
@media (max-width:860px), (max-height:700px), (prefers-reduced-motion:reduce){
  /* These scenes declare their scroll height after the static rule above. */
  #larry,#practice{height:auto}

  .hero-shots{display:block;position:relative;margin:34px 0 0;padding-bottom:18%}
  .hs-screen{display:block;width:88%;height:auto;border-radius:12px;border:1px solid var(--rule);background:#fff;box-shadow:0 40px 80px -46px rgba(15,30,46,.55);animation:hs-rise .9s var(--ease) both}
  .hs-phone{position:absolute;right:2%;bottom:0;width:31%;height:auto;border-radius:18px;border:5px solid var(--ink);background:var(--ink);box-shadow:0 36px 70px -30px rgba(15,30,46,.7);transform:rotate(4deg);animation:hs-rise .9s .25s var(--ease) both}

  /* A row of screens the reader swipes through, bleeding to the screen edge. */
  .ad-list,.pr,.set-all{display:grid;grid-template-columns:none;grid-auto-flow:column;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .ad-list::-webkit-scrollbar,.pr::-webkit-scrollbar,.set-all::-webkit-scrollbar{display:none}

  .ad-list{grid-auto-columns:84%;gap:14px;border-top:0;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;scroll-padding-inline:var(--gutter)}
  .ad-list li{display:flex;flex-direction:column;gap:8px;scroll-snap-align:start;padding:0 0 18px;border:1px solid var(--night-line);border-radius:16px;background:var(--night-2);overflow:hidden}
  .ad-shot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:#fff;margin-bottom:8px}
  .ad-list s,.ad-list span{padding-inline:16px}

  .pr{grid-auto-columns:86%;gap:12px;padding:4px 16px 10px;scroll-padding-inline:16px}
  .pr .t{scroll-snap-align:start;border-radius:14px;box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
  .pr .t figcaption{font-size:11.5px;left:12px;bottom:12px}
  .pr-obs{padding-inline:16px}

  .set-all{grid-auto-columns:72%;gap:14px;align-content:start;padding:4px 16px 10px;scroll-padding-inline:16px}
  .set-all figure{scroll-snap-align:start}
  .set-all .im{border-radius:14px;box-shadow:0 30px 60px -44px rgba(15,30,46,.55)}
  .set-all figcaption{font-size:16px}
  .set-all .spine{display:none}

  /* Journey: screens at full width, the phone screens tall, people as portraits. */
  .lz-steps{grid-template-columns:minmax(0,1fr)}
  .lz-steps li{justify-items:stretch;min-width:0}
  .lz-thumb{width:100%;max-width:none;max-height:none;height:auto;box-shadow:0 30px 60px -44px rgba(15,30,46,.5)}
  .lz-thumb.lz-phone{justify-self:center;width:auto;height:min(70vh,560px);border-radius:26px;border:5px solid var(--ink)}
  .lz-thumb.lz-tablet{border-radius:22px;border:6px solid var(--ink)}
  .lz-thumb.lz-person{justify-self:center;width:auto;height:260px;border:0;box-shadow:none}

  .ph-phone{justify-self:center}
  #settings .top{padding-inline:var(--gutter)}
}

/* Keep static scene rules after the desktop scene definitions. Short windows
   and zoomed layouts need natural document flow rather than clipped pins. */
.stack-tools{display:none}
@media (max-width:860px), (max-height:700px), (prefers-reduced-motion:reduce){
  #hero,#stack,#reveal,#larry,#margaret,#settings,#practice{height:auto}
  #stack .heads .h{opacity:1!important;transform:none!important}
  #stack .field > .tool,#wires > .wire{display:none}
  .stack-tools{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 40px}
  .stack-tools .tool{position:static;transform:none;white-space:normal}
  .pr > .pr-obs{display:none}
  .pr-static-notes{width:min(100%,var(--wrap));padding-inline:var(--gutter);margin-inline:auto}
  .pr-static-notes p{display:block;margin-bottom:12px}
  .hero-copy{padding-top:0}
  .ph-phone{max-width:100%}
  .ph-phone img{max-width:100%;height:auto;max-height:560px}
}