:root{--night:#0B172D;--deep:#132758;--navy:#1E3A8A;--per:#FF6F3C;--per-t:#FFE9DF;--per-ink:#A8461C;--mint:#5EE0B8;--mint-t:#E2F7EF;--mint-ink:#0B6B55;--white:#fff;--mist:#F4F6FB;--ink:#121521;--slate:#6B7280;--line:#E3E7EF;--soft:#E8EEFB;
--h1:clamp(44px,7.4vw,112px);--h2:clamp(36px,5.6vw,84px);--h3:clamp(22px,2.4vw,34px)}
*{box-sizing:border-box}html{scroll-behavior:auto}
body{margin:0;font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:var(--night);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}button{font:inherit;cursor:pointer}a{color:inherit}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.scene{position:relative;min-height:100vh;overflow:hidden;overflow:clip;padding:80px 0}
.wrap{max-width:1280px;margin:0 auto;padding:0 48px}
.chap{display:inline-flex;gap:10px;align-items:center;opacity:.75}
.chap b{color:var(--per);font-weight:700}
.h2{font-size:var(--h2);font-weight:800;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:44ch;text-wrap:pretty}
/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;background:#0B172D;display:flex;justify-content:space-between;align-items:center;padding:16px 28px;pointer-events:none;mix-blend-mode:normal}
.bar>*{pointer-events:auto}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.035em;color:#fff;text-decoration:none;background:none;border:0;padding:0}
.logo .mk{flex:none;display:block}
.who{display:flex;align-items:center;gap:4px;background:rgba(11,23,45,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:4px;color:#fff;font-size:13px}
.who span{padding:0 8px 0 10px;opacity:.7;font-weight:600}
.who button{border:0;background:transparent;color:#fff;padding:7px 13px;border-radius:99px;font-weight:700;font-size:13px;transition:background .3s,color .3s}
.who button small{font-weight:500;opacity:.7;margin-left:4px}
.who button[aria-pressed=true]{background:#fff;color:var(--night)}
.who-or{font-size:11px;font-weight:500;opacity:.5;padding:0 2px}
.prog{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:10px}
.prog a{width:8px;height:8px;border-radius:50%;background:rgba(140,150,170,.45);display:block;transition:all .3s}
.prog a.on{background:var(--per);height:22px;border-radius:5px}
/* ---------- hero ---------- */
[data-scene=hero]{background:var(--night);color:#fff;display:flex;align-items:center;min-height:100vh;padding:120px 0 80px}
.hero-grid{display:grid;grid-template-columns:1fr auto;align-items:center;width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(24px,6vw,120px);gap:clamp(60px,5vw,80px)}
.hero{position:relative;z-index:2;text-align:left}
h1{font-size:clamp(36px,6.5vw,84px);font-weight:800;letter-spacing:-.04em;line-height:1.06;margin:0}
h1 .line1{display:block;color:#fff;white-space:nowrap}
h1 .line2{display:block;color:var(--per);white-space:nowrap}
.hero .lede{margin:clamp(24px,4vh,40px) 0 0;color:rgba(255,255,255,.75);text-align:left;max-width:52ch;font-size:clamp(18px,1.6vw,22px);line-height:1.55}
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--per);color:var(--night);font-weight:800;text-decoration:none;border-radius:99px;padding:18px 30px;font-size:18px;margin-top:clamp(28px,4vh,44px);box-shadow:0 10px 40px rgba(255,111,60,.35);transition:transform .25s,box-shadow .25s}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(255,111,60,.5)}
.cta svg{transition:transform .25s}.cta:hover svg{transform:translateX(4px)}
/* ---------- hero phone mockup ---------- */
.hero-phone{display:flex;justify-content:center;align-items:center;padding-left:0;padding-right:90px}
.hero-phone-frame{position:relative;height:560px;aspect-ratio:9/19.5;background:linear-gradient(145deg,#8E8E93 0%,#B8B8BC 15%,#636366 50%,#A1A1A6 85%,#78787C 100%);border-radius:34px;padding:3px;transform:rotate(-4deg);box-shadow:0 40px 80px rgba(0,0,0,.4),0 20px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.25)}
.hero-phone-bezel{position:relative;width:100%;height:100%;background:#000;border-radius:25px;overflow:hidden;display:flex;flex-direction:column}
.hero-phone-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:56px;height:16px;background:#000;border-radius:10px;z-index:10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hero-phone-island::before{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:4px;height:4px;background:radial-gradient(circle,#1a1a2e 40%,#0a0a12 100%);border-radius:50%;box-shadow:inset 0 0 2px rgba(0,0,0,.8)}
.hero-phone-screen{position:relative;flex:1;margin:4px;border-radius:21px;overflow:hidden;background:linear-gradient(180deg,var(--night) 0%,#132758 100%)}
/* hero phone beats */
.hp-beat{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:32px 12px 16px;opacity:0;transform:translateY(8px)}
.hp-beat-1{animation:hpBeat1 12s ease-in-out infinite}
.hp-beat-2{animation:hpBeat2 12s ease-in-out infinite}
.hp-beat-3{animation:hpBeat3 12s ease-in-out infinite}
@keyframes hpBeat1{0%,4%{opacity:0;transform:translateY(8px)}8%,29%{opacity:1;transform:translateY(0)}33%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes hpBeat2{0%,29%{opacity:0;transform:translateY(8px)}33%,62%{opacity:1;transform:translateY(0)}66%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes hpBeat3{0%,62%{opacity:0;transform:translateY(8px)}66%,96%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes hpWave{0%,100%{height:20%}50%{height:100%}}
.hp-time{position:absolute;top:9px;left:12px;font-size:10px;color:rgba(255,255,255,.5);font-family:"JetBrains Mono",monospace;z-index:11}
/* ===== Beat 1: Incoming call ===== */
.hp-b1-top{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:8px}
.hp-status{font-size:11px;font-weight:600;color:var(--mint);letter-spacing:.03em;margin-bottom:16px}
.hp-b1-caller{display:flex;flex-direction:column;align-items:center;gap:8px}
.hp-avatar-lg{width:56px;height:56px;border-radius:50%;background:var(--per);color:var(--night);display:grid;place-items:center;font-weight:800;font-size:22px}
.hp-b1-name{font-size:18px;font-weight:700;color:#fff}
.hp-b1-role{font-size:12px;color:rgba(255,255,255,.6)}
.hp-b1-wave{flex:1;display:flex;align-items:center;justify-content:center;min-height:80px}
.hp-wave-bars{display:flex;gap:4px;align-items:center;height:48px}
.hp-wave-bars i{width:3px;border-radius:3px;background:var(--per);height:30%;animation:hpWave 1.2s ease-in-out infinite}
.hp-wave-bars i:nth-child(1){animation-delay:0s}
.hp-wave-bars i:nth-child(2){animation-delay:.1s}
.hp-wave-bars i:nth-child(3){animation-delay:.2s}
.hp-wave-bars i:nth-child(4){animation-delay:.3s}
.hp-wave-bars i:nth-child(5){animation-delay:.15s}
.hp-wave-bars i:nth-child(6){animation-delay:.25s}
.hp-wave-bars i:nth-child(7){animation-delay:.35s}
.hp-wave-bars i:nth-child(8){animation-delay:.05s}
.hp-wave-bars i:nth-child(9){animation-delay:.2s}
.hp-wave-bars i:nth-child(10){animation-delay:.3s}
.hp-wave-bars i:nth-child(11){animation-delay:.1s}
.hp-wave-bars i:nth-child(12){animation-delay:.25s}
.hp-b1-bottom{display:flex;flex-direction:column;align-items:center;gap:14px}
.hp-b1-timer{font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--mint);font-weight:600}
.hp-b1-controls{display:flex;gap:16px}
.hp-ctrl{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);position:relative}
.hp-ctrl::before{content:'';position:absolute;inset:30%;border-radius:2px}
.hp-ctrl-mute::before{background:rgba(255,255,255,.5)}
.hp-ctrl-end{background:#E53935}.hp-ctrl-end::before{background:#fff;border-radius:8px;inset:38% 25%}
.hp-ctrl-speaker::before{background:rgba(255,255,255,.5)}
/* ===== Beat 2: Live transcript ===== */
.hp-b2-header{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}
.hp-b2-avatar{width:32px;height:32px;border-radius:50%;background:var(--per);color:var(--night);display:grid;place-items:center;font-weight:800;font-size:13px}
.hp-b2-info{flex:1}
.hp-b2-name{font-size:14px;font-weight:700;color:#fff}
.hp-b2-role{font-size:10px;color:rgba(255,255,255,.6)}
.hp-b2-timer{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mint);font-weight:600}
.hp-b2-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.08em;text-transform:uppercase;margin:12px 0 10px}
.hp-b2-messages{display:flex;flex-direction:column;gap:10px;flex:1}
.hp-b2-msg{background:rgba(255,255,255,.07);border-radius:12px;padding:12px 14px}
.hp-b2-msg-asta{background:rgba(255,255,255,.12);margin-left:16px}
.hp-b2-msgname{display:block;font-size:10px;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:4px}
.hp-b2-msgtext{font-size:14px;color:#fff;line-height:1.4}
.hp-b2-strip{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.06);border-radius:10px;padding:10px 14px}
.hp-b2-strip-wave{display:flex;gap:3px;align-items:center;height:18px}
.hp-b2-strip-wave i{width:3px;border-radius:2px;background:var(--per);height:30%;animation:hpWave 1.2s ease-in-out infinite}
.hp-b2-strip-wave i:nth-child(odd){animation-delay:.1s}
.hp-b2-strip-timer{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mint);font-weight:600}
/* ===== Beat 3: Decision card ===== */
.hp-beat-3{justify-content:space-between}
.hp-b3-header{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);margin-bottom:0}
.hp-b3-role{font-weight:500;color:rgba(255,255,255,.5)}
.hp-b3-card{background:#fff;border-radius:14px;padding:18px;display:flex;flex-direction:column}
.hp-b3-title{font-size:17px;font-weight:700;color:var(--night);margin-bottom:4px}
.hp-b3-sub{font-size:13px;color:var(--slate);margin-bottom:16px}
.hp-b3-details{display:flex;flex-direction:column;gap:0;margin-bottom:18px}
.hp-b3-row{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
.hp-b3-row:last-child{border-bottom:0}
.hp-b3-label{font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em}
.hp-b3-value{font-size:15px;font-weight:700;color:var(--night)}
.hp-b3-approve{display:block;width:100%;background:var(--per);color:var(--night);font-weight:800;font-size:15px;padding:14px;border:0;border-radius:10px;cursor:default}
.hp-b3-handled{font-size:12px;color:var(--mint);font-weight:600;text-align:center}
/* sr-only for accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ---------- talks ---------- */
[data-scene=talks]{background:#05080F;color:#fff}
.s1in{min-height:100vh;display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:center;padding:110px 64px 120px;max-width:1440px;margin:0 auto}
.s1copy{max-width:500px}
.s1copy .h2{margin:0 0 22px}
.s1copy .lede{color:rgba(255,255,255,.7)}
.s1roles{display:flex;flex-direction:column;gap:30px}
.roles{display:flex;flex-direction:column;gap:12px}
.role{background:rgba(255,255,255,.04);border-radius:14px;padding:16px 18px}
.role .rn{display:block;font-weight:700;font-size:16px;margin-bottom:4px}
.role .rd{color:rgba(255,255,255,.65);font-size:14px;line-height:1.45}
.phones{position:relative;height:720px;perspective:1400px}
.phone{position:absolute;width:340px;height:680px;border-radius:44px;background:#0d1426;border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 100px rgba(0,0,0,.6),inset 0 0 0 7px #000;padding:18px 14px;overflow:hidden;transform-style:preserve-3d;display:flex;flex-direction:column}
.phone.a{left:0;top:0;transform:rotateY(14deg) rotateZ(-2deg)}
.phone.b{right:0;top:40px;transform:rotateY(-14deg) rotateZ(2deg);background:#F4F6FB;color:var(--ink)}
.notch{width:90px;height:24px;border-radius:99px;background:#000;margin:0 auto 10px;flex:none}
.live{background:linear-gradient(180deg,#0A1628,#1E3A8A);border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:11px;flex:none;margin-top:8px}
.live .ldot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(94,224,184,.2)}
.wave{display:flex;gap:3px;align-items:center;height:22px;flex:1;justify-content:center}
.wave i{width:3px;border-radius:2px;background:#9FB4FF;height:30%;animation:wv 1.1s ease-in-out infinite}
@keyframes wv{50%{height:100%}}
/* Phone message area - scrollable */
.pmessages{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 0;scroll-behavior:smooth}
.pmessages::-webkit-scrollbar{width:0;background:transparent}
.ln{margin-top:10px;font-size:13px;line-height:1.45}
.ln .k{color:rgba(255,255,255,.5);margin:0 0 3px;font-size:10px;font-weight:600}
.phone.b .ln .k{color:var(--slate)}
.ln.asta{background:rgba(255,255,255,.07);border-radius:12px;padding:10px 12px}
.ln.them{background:rgba(255,255,255,.04);border-radius:12px;padding:10px 12px}
.phone.b .ln.asta{background:#fff;box-shadow:0 2px 10px rgba(11,23,45,.06)}
.ln.me{background:var(--navy);color:#fff;border-radius:12px 12px 4px 12px;padding:10px 12px;margin-left:20px}
.phone.b .ln.me .k{color:rgba(255,255,255,.6)}
/* Typing dots animation */
.typing-dots{display:none;padding:10px 14px;background:rgba(255,255,255,.07);border-radius:12px;margin-top:10px;gap:5px;width:fit-content;align-self:flex-start}
.typing-dots.show{display:flex}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);animation:typingBounce 1.4s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
.phone.b .typing-dots{background:rgba(30,58,138,.1)}
.phone.b .typing-dots span{background:var(--slate)}
/* Confirmation check */
.chk{margin-top:10px;background:rgba(94,224,184,.12);color:var(--mint);border-radius:10px;padding:10px 12px;font-size:12px;font-weight:700;flex:none}
.phone.b .chk{background:var(--mint-t);color:var(--mint-ink)}
.ptitle{font-weight:800;font-size:14px;margin:2px 0 4px;flex:none;position:relative;z-index:2;background:#0d1426}
.psub{font-size:11px;opacity:.6;flex:none;position:relative;z-index:2;background:#0d1426;padding-bottom:8px;margin-bottom:-4px}
.phone.b .ptitle,.phone.b .psub{background:#F4F6FB}
/* Hide messages until revealed by scroll */
.pmessages .ln[data-turn]{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
.pmessages .ln[data-turn].revealed{opacity:1;transform:translateY(0)}
.chk[data-turn="done"]{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.chk[data-turn="done"].revealed{opacity:1;transform:translateY(0)}
/* Mobile: collapse unrevealed messages to eliminate empty band */
@media (max-width:639px){
  .pmessages .ln[data-turn]:not(.revealed){max-height:0;margin:0;padding:0;overflow:hidden}
  .pmessages .ln[data-turn].revealed{max-height:200px}
  .chk[data-turn="done"]:not(.revealed){max-height:0;margin:0;padding:0;overflow:hidden}
}
/* Reduced motion: show all */
.static .pmessages .ln[data-turn],.static .chk[data-turn="done"]{opacity:1;transform:none}
.static .typing-dots{display:none!important}
.av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--soft);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:12px}
.av.o{background:var(--per);color:var(--night)}.av.m{background:var(--mint);color:var(--night)}.av.g{background:#fff;box-shadow:inset 0 0 0 1.5px #9AA3B2;color:#2B3445}
/* ---------- tuesday ---------- */
[data-scene=tuesday]{background:linear-gradient(180deg,#FFF7F2 0%,#fff 40%);color:var(--ink);min-height:100vh}
.s2in{height:100vh;display:grid;grid-template-columns:1fr minmax(260px,330px) 1fr;gap:0;padding:120px 48px 40px;position:relative;align-content:start}
.side{position:relative;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 28px}
.side h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:700;display:flex;gap:10px;align-items:center;margin-bottom:6px}
.side h3 .av{width:34px;height:34px}
.side.r{text-align:left}
.mid{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.day{font-weight:700;color:var(--slate)}
.clock{font-size:clamp(72px,9vw,140px);font-weight:800;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums;color:var(--night)}
.clock span{color:var(--per)}
.mid .cap{margin-top:16px;font-weight:600;color:var(--slate);max-width:22ch;min-height:3em}
.ev{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 8px 24px rgba(11,23,45,.06)}
.ev .t{font-family:"JetBrains Mono";font-size:11px;color:var(--slate);min-width:40px;padding-top:3px}
.ev b{display:block;font-size:15px;color:var(--night);font-weight:700}
.ev small{color:var(--slate);font-size:13px}
.ev .src{margin-left:auto;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--mist);color:var(--slate);white-space:nowrap;align-self:center}
.ev.hot .src{background:var(--per-t);color:var(--per-ink)}
.incident{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);background:#fff;border-radius:14px;padding:14px 18px;box-shadow:0 10px 30px rgba(11,23,45,.12);max-width:360px;text-align:center}
/* ---------- oneplace ---------- */
[data-scene=oneplace]{background:radial-gradient(80% 70% at 50% 50%,#132758 0%,#0B172D 70%);color:#fff;height:100vh}
.s3head{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:5;pointer-events:none}
.s3head .h2{max-width:13ch}
.s3head p{color:rgba(255,255,255,.7);margin-top:18px}
.shards{position:absolute;inset:0}
.shard{position:absolute;color:var(--ink);background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.35);padding:12px 14px;font-size:13px;width:250px;will-change:transform}
.shard b{display:block;color:var(--night);font-size:13.5px}
.shard small{color:var(--slate);font-size:12px}
.shard .row{display:flex;gap:10px;align-items:center}
.shard.call{background:#1b2a4a;color:#fff;width:220px}.shard.call b{color:#fff}.shard.call small{color:rgba(255,255,255,.65)}
.shard.text{background:#E9ECF2;border-radius:18px 18px 18px 4px;width:230px}
.shard.note{background:#FFE9A8;transform:rotate(-4deg);width:160px;font-weight:700;color:#5a4300;font-size:15px;border-radius:4px}
.shard.file{width:150px;display:flex;flex-direction:column;gap:7px}
.shard.file i{display:block;height:5px;border-radius:3px;background:var(--line)}
.ext{font:800 10px Manrope;color:var(--navy);background:var(--soft);border-radius:5px;padding:3px 6px;align-self:flex-start}
.shard .lab{position:absolute;top:-22px;left:2px;color:rgba(255,255,255,.55);font-family:"JetBrains Mono";font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.d1{filter:blur(3px);opacity:.45}.d2{opacity:.85}.d3{}
/* Shard default positioning (desktop fallback) */
.shard-inbox{left:10%;top:18%}
.shard-phone{left:72%;top:14%}
.shard-text{left:14%;top:60%}
.shard-file{left:74%;top:56%}
/* Ensure shards don't overlap headline and stay in bounds
   Constraints: >=30px left/right, >=84px top (nav 60+24), not overlapping centered headline
   Right-side shards must also clear prog dots (~50px from right edge) */
@media (min-width:900px) and (max-width:1199px){
  /* At 1024-1199: cards must stay inside narrow viewport
     Inbox: 250px wide -> max left% = (1024-250-80)/1024 = 67.8%
     Phone: 220px wide -> max left = (1024-220-80)/1024 = 70.7%
     Text: 230px wide
     File: 150px wide -> max left = (1024-150-80)/1024 = 77.5% */
  .shard-inbox{left:30px;top:110px}
  .shard-phone{right:80px;left:auto;top:110px}
  .shard-text{left:30px;bottom:60px;top:auto}
  .shard-file{right:80px;left:auto;bottom:60px;top:auto}
}
@media (min-width:1200px) and (max-width:1439px){
  /* At 1200-1439: a bit more room */
  .shard-inbox{left:32px;top:112px}
  .shard-phone{right:90px;left:auto;top:110px}
  .shard-text{left:32px;bottom:70px;top:auto}
  .shard-file{right:90px;left:auto;bottom:70px;top:auto}
}
@media (min-width:1440px){
  /* At 1440+: comfortable room, percentage-based */
  .shard-inbox{left:5%;top:14%}
  .shard-phone{left:auto;right:6%;top:12%}
  .shard-text{left:5%;top:auto;bottom:12%}
  .shard-file{left:auto;right:6%;top:auto;bottom:10%}
}
/* ---------- onepage ---------- */
[data-scene=onepage]{background:var(--mist);color:var(--ink);height:100vh}
.s4in{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:84px 28px 28px;perspective:1600px}
.s4in .h2{font-size:clamp(32px,4.4vw,64px);text-align:center;color:var(--night);margin-bottom:28px}
.s4in .lede{text-align:center;margin-bottom:24px;color:var(--slate)}
.app{width:min(1080px,100%);border-radius:22px;background:#fff;box-shadow:0 40px 120px rgba(11,23,45,.22),0 0 0 1px rgba(11,23,45,.06);overflow:hidden;transform-origin:50% 0}
.appsky{background:linear-gradient(180deg,#0A1628,#1E3A8A);color:#fff;padding:16px 26px 26px}
.apptop{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.apptop .brand{font-weight:800;letter-spacing:-.03em;font-size:15px;display:flex;gap:8px;align-items:center}
.apptop .brand i{width:18px;height:18px;border-radius:6px;background:linear-gradient(160deg,var(--per),#ff9a6b)}
.pill{border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:5px 12px;font-weight:600}
.awho{display:flex;gap:14px;align-items:center;margin-top:18px}
.awho .av{width:50px;height:50px;font-size:16px;box-shadow:0 0 0 3px rgba(255,255,255,.2)}
.awho h4{margin:0;font-size:22px;font-weight:800;letter-spacing:-.03em}
.awho p{font-size:13px;color:rgba(255,255,255,.75)}
.asay{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:14px;max-width:40ch;line-height:1.3}
.appbody{display:grid;grid-template-columns:1fr 300px;gap:18px;padding:20px 22px 22px}
.k{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:0 0 6px}
.trow{display:flex;align-items:center;gap:12px;padding:12px 0}
.trow .tx{flex:1;min-width:0}
.trow b{font-size:14px;color:var(--night)}.trow small{display:block;color:var(--slate);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-weight:700;font-size:11px;padding:3px 9px;border-radius:99px;white-space:nowrap;background:var(--mist);color:var(--slate)}
.tag.need{background:var(--per-t);color:var(--per-ink)}.tag.ok{background:var(--mint-t);color:var(--mint-ink)}
.files{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.fc{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:#fff}
.fc b{font-size:13px;color:var(--night)}.fc small{color:var(--slate);font-size:12px}
.chat{background:#fff;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px}
.bub{background:var(--mist);border-radius:16px;padding:13px 15px;font-size:15px;line-height:1.45;color:var(--night);font-weight:500;min-height:110px}
.bub .caret{display:inline-block;width:2px;height:1em;background:var(--per);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.btn{display:inline-block;font-weight:700;font-size:13px;padding:8px 15px;border-radius:99px;background:var(--night);color:#fff;border:0}
.btn.gh{background:#fff;color:var(--night);box-shadow:inset 0 0 0 1px #D5DAE3}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.inp{border-radius:14px;padding:12px 14px;color:#9AA3B2;font-size:13px;display:flex;justify-content:space-between;align-items:center;background:var(--mist)}
.inp i{width:26px;height:26px;border-radius:50%;background:var(--navy)}
.flyer{position:absolute;z-index:4;background:#fff;border-radius:12px;box-shadow:0 14px 34px rgba(11,23,45,.18);padding:9px 12px;font-size:12.5px;font-weight:700;color:var(--night);display:flex;gap:8px;align-items:center;pointer-events:none;opacity:0}
.swap{transition:opacity .35s}.swapping .swap{opacity:0}
/* ---------- who ---------- */
[data-scene=who]{background:linear-gradient(180deg,#132758,#0B172D);color:#fff;min-height:100vh;display:flex;align-items:center}
.s5in{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;padding:100px 64px 60px}
.s5head{text-align:center;max-width:700px}
.s5head .h2{margin:0 0 12px;font-size:clamp(32px,5vw,76px);white-space:nowrap}
.s5head p{color:rgba(255,255,255,.7);margin:0 auto}
.lanes{display:flex;flex-direction:column;gap:28px;width:100%;max-width:1100px;padding:0}
.project{margin-top:32px;padding:0 20px;max-width:440px}
.phead{margin-bottom:10px}
.pname{font-weight:700;font-size:15px;color:rgba(255,255,255,.8)}
.tasks{display:flex;flex-direction:column;gap:6px}
.task{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.65)}
.task.sub{padding-left:24px}
.tcheck{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);flex:none}
.tcheck.done{background:var(--mint);border-color:var(--mint)}
.tname{flex:1}
.twho{color:rgba(255,255,255,.45);font-size:12px}
.lane{display:flex;flex-direction:column;gap:0;position:relative}
.lane .who4{flex:none;width:180px;display:flex;gap:12px;align-items:center;margin-bottom:12px}
.lane .who4 b{display:block;font-size:15px}.lane .who4 small{color:rgba(255,255,255,.55);font-size:12px}
.track{display:flex;gap:16px;position:relative;align-items:stretch;flex:1;padding-bottom:32px}
.track:before{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:rgba(255,255,255,.12);z-index:0}
.track .fill{position:absolute;left:0;bottom:6px;height:2px;background:var(--per);width:0;box-shadow:0 0 12px var(--per);z-index:0}
.step{position:relative;flex:1;padding:0;z-index:1;display:flex;flex-direction:column}
.step .dot{width:12px;height:12px;border-radius:50%;background:#0B172D;border:2px solid rgba(255,255,255,.3);position:absolute;left:12px;bottom:1px;transform:translateY(32px);transition:background .3s,border-color .3s,box-shadow .3s;z-index:2}
.step .card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px 16px;transition:all .4s;position:relative;z-index:1;flex:1}
.step .card .k{color:rgba(255,255,255,.5);margin:0 0 4px;font-size:10px}
.step .card b{font-size:16px;letter-spacing:-.02em;display:block;line-height:1.25}
.step .card small{color:rgba(255,255,255,.55);display:block;margin-top:4px;font-size:12px}
.step.on .dot{background:var(--per);border-color:var(--per);box-shadow:0 0 0 5px rgba(255,111,60,.2)}
.step.on .card{background:#fff;color:var(--night);border-color:#fff;box-shadow:0 16px 44px rgba(0,0,0,.28)}
.step.on .card .k{color:var(--per-ink)}.step.on .card small{color:var(--slate)}
.step.done .dot{background:var(--mint);border-color:var(--mint)}
.step.done .card{background:rgba(255,255,255,.08)}
.step.done .card .k:after{content:" · done";color:var(--mint)}
/* ---------- approve ---------- */
[data-scene=approve]{background:#fff;color:var(--ink);height:100vh}
.s6in{height:100vh;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:90px 64px 40px;max-width:1440px;margin:0 auto}
.s6copy .h2{color:var(--night);margin:0 0 26px;font-size:clamp(36px,4.6vw,72px)}
.trust{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.trust div{display:flex;gap:14px;align-items:flex-start;font-weight:600;font-size:16px;color:#2B3445;line-height:1.5}
.trust div:before{content:"";flex:none;width:18px;height:18px;border-radius:50%;margin-top:2px;background:var(--mint-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230B6B55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.stage{position:relative;height:min(640px,78vh);display:grid;place-items:center}
.today{position:relative;z-index:3;width:min(600px,100%);background:#fff;border-radius:22px;box-shadow:0 40px 100px rgba(11,23,45,.18),0 0 0 1px rgba(11,23,45,.06);overflow:hidden;transform-origin:88% 30%}
.today .appsky{padding:14px 22px 18px}
.today .tb{padding:14px 22px 18px}
.need{position:relative}
.need .trow .btn{font-size:12px;padding:6px 13px}
.need .trow.first{background:linear-gradient(90deg,rgba(255,111,60,.07),transparent);margin:0 -22px;padding:12px 22px;border-left:3px solid var(--per)}
.stamp{display:none;align-items:center;gap:10px;background:var(--mint-t);color:var(--mint-ink);font-weight:700;font-size:12.5px;border-radius:12px;padding:9px 12px;margin:8px 0 2px}
.stamp code{font-family:"JetBrains Mono";font-size:11px;opacity:.8}
.approved .stamp{display:flex}.approved .first .btn{background:var(--mint);color:var(--night)}
.approved .first .tag{background:var(--mint-t);color:var(--mint-ink)}
.cursor{position:absolute;width:26px;height:26px;z-index:6;pointer-events:none;opacity:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.handled .trow{opacity:.9}
.undo{font-size:12px;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
/* ---------- future ---------- */
[data-scene=future]{background:radial-gradient(70% 60% at 70% 40%,#132758 0%,#05080F 70%);color:#fff}
.s7in{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:120px 64px;max-width:1440px;margin:0 auto}
.planned{display:inline-flex;align-items:center;gap:6px;font-family:"JetBrains Mono";font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#C9D3EA;border:1px dashed rgba(201,211,234,.5);border-radius:99px;padding:4px 10px}
.flist{display:flex;flex-direction:column;margin-top:36px;gap:12px}
.flist div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-size:18px;font-weight:600;letter-spacing:-.01em;background:rgba(255,255,255,.04);border-radius:14px}
.flist small{display:block;font-size:13.5px;color:rgba(255,255,255,.55);font-weight:500;margin-top:3px}
/* future cards */
.future-cards{position:relative;height:480px;perspective:1600px}
.fcard{position:absolute;border-radius:16px;background:rgba(244,246,251,.96);color:var(--ink);box-shadow:0 40px 100px rgba(0,0,0,.5);overflow:hidden;transform-style:preserve-3d;will-change:transform}
.fcard-bar{height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#E3E7EF;font-size:11px;font-weight:700;color:var(--slate)}
.fcard-bar i{width:10px;height:10px;border-radius:50%;background:#B9C1D0}
.fcard-bar-minimal{height:28px;display:flex;align-items:center;padding:0 12px;background:var(--mist);font-size:10px;color:var(--slate)}
.fcard.mac{width:360px;left:0;top:0;transform:rotateY(16deg) rotateX(5deg)}
.fcard.win{width:340px;right:0;top:180px;transform:rotateY(-14deg) rotateX(4deg)}
.fcard.win .fcard-bar{justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}
.fcard.win .win-ctrl{letter-spacing:8px;color:#9AA3B2;font-size:10px}
.fcard.contact{width:280px;left:40px;top:260px;transform:rotateY(10deg) rotateX(3deg)}
.fcard.auto{width:320px;right:20px;top:360px;transform:rotateY(-8deg) rotateX(2deg)}
.fcard-body{padding:14px;display:flex;flex-direction:column;gap:8px}
.fcard-label{position:absolute;top:42px;right:12px}
.fcard-ghost{height:8px;border-radius:4px;background:#D9DFEA}.fcard-ghost.s{width:55%}.fcard-ghost.t{height:36px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.fcard-asta{display:flex;gap:8px;align-items:center;background:var(--night);color:#fff;border-radius:10px;padding:10px 12px;font-size:11px;font-weight:600;line-height:1.35;margin-top:4px}
.fcard-asta i{width:14px;height:14px;border-radius:4px;background:linear-gradient(160deg,var(--per),#ff9a6b);flex:none}
.contact-body{min-height:90px;justify-content:center}
.fcard-widget{display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:12px;box-shadow:0 4px 20px rgba(0,0,0,.1)}
.fcard-widget-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,var(--per),#ff9a6b);display:grid;place-items:center}
.fcard-widget-avatar i{width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230B172D'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9v7c0 1.1.9 2 2 2h4v-8H5v-1c0-3.87 3.13-7 7-7s7 3.13 7 7v1h-4v8h4c1.1 0 2-.9 2-2v-7c0-4.97-4.03-9-9-9z'/%3E%3C/svg%3E") center/contain no-repeat}
.fcard-widget-text b{display:block;font-size:13px;font-weight:700;color:var(--night)}
.fcard-widget-text small{font-size:11px;color:var(--slate)}
.auto-body{min-height:80px;justify-content:center}
.fcard-suggest{display:flex;gap:10px;align-items:center;background:linear-gradient(90deg,rgba(94,224,184,.15),transparent);border:1px solid rgba(94,224,184,.3);border-radius:10px;padding:10px 12px}
.fcard-suggest-icon{width:28px;height:28px;border-radius:8px;background:var(--mint);display:grid;place-items:center;flex:none}
.fcard-suggest-icon svg{stroke:var(--night)}
.fcard-suggest-text{flex:1}
.fcard-suggest-text b{display:block;font-size:12px;font-weight:700;color:var(--night)}
.fcard-suggest-text small{font-size:10px;color:var(--slate)}
.fcard-suggest-btn{font-size:10px;font-weight:700;padding:6px 10px;border-radius:6px;background:var(--mint);color:var(--night);border:0;cursor:default}
/* ---------- cta ---------- */
[data-scene=cta]{background:radial-gradient(60% 70% at 50% 60%,rgba(255,111,60,.28) 0%,rgba(255,111,60,0) 60%),var(--night);color:#fff;display:grid;place-items:center;text-align:center}
[data-scene=cta] .h2{font-size:clamp(44px,8vw,128px);max-width:11ch;margin:20px auto 0}
[data-scene=cta] .lede{margin:24px auto 0;color:rgba(255,255,255,.72)}
.bigcta{display:inline-flex;align-items:center;gap:16px;margin-top:44px;background:var(--per);color:var(--night);font-weight:800;font-size:clamp(20px,2vw,26px);padding:24px 38px;border-radius:99px;text-decoration:none;box-shadow:0 20px 80px rgba(255,111,60,.45);transition:box-shadow .3s}
.bigcta:hover{box-shadow:0 26px 100px rgba(255,111,60,.65)}
/* ---------- hero phone responsive (tablet: larger phone for readable text) ---------- */
@media (max-width:1199px){
 h1{font-size:clamp(32px,5.5vw,58px)}
 .hero-grid{gap:clamp(40px,4vw,60px)}
 .hero-phone{padding-right:40px}
 .hero-phone-frame{height:480px;aspect-ratio:9/19.5;border-radius:30px}
 .hero-phone-bezel{border-radius:24px}
 .hero-phone-screen{margin:3px;border-radius:20px}
 .hero-phone-island{width:52px;height:15px;top:7px;border-radius:9px}
 .hero-phone-island::before{width:4px;height:4px;right:11px}
 /* Beat scaling for tablet */
 .hp-beat{padding:26px 10px 14px;justify-content:space-between}
 .hp-status{font-size:9px;margin-bottom:12px}
 .hp-avatar-lg{width:44px;height:44px;font-size:17px}
 .hp-b1-name{font-size:14px}
 .hp-b1-role{font-size:10px}
 .hp-wave-bars{height:36px;gap:3px}
 .hp-wave-bars i{width:2px}
 .hp-b1-timer{font-size:11px}
 .hp-b1-controls{gap:12px}
 .hp-ctrl{width:28px;height:28px}
 .hp-b2-header{gap:8px;padding-bottom:8px}
 .hp-b2-avatar{width:26px;height:26px;font-size:10px}
 .hp-b2-name{font-size:11px}
 .hp-b2-role{font-size:8px}
 .hp-b2-timer{font-size:9px}
 .hp-b2-label{font-size:8px;margin:10px 0 8px}
 .hp-b2-messages{gap:8px}
 .hp-b2-msg{padding:9px 10px;border-radius:10px}
 .hp-b2-msg-asta{margin-left:12px}
 .hp-b2-msgname{font-size:8px;margin-bottom:3px}
 .hp-b2-msgtext{font-size:11px}
 .hp-b2-strip{padding:8px 10px;border-radius:8px}
 .hp-b2-strip-wave{height:14px;gap:2px}
 .hp-b2-strip-wave i{width:2px}
 .hp-b2-strip-timer{font-size:9px}
 .hp-b3-header{font-size:10px}
 .hp-b3-card{padding:14px;border-radius:12px}
 .hp-b3-title{font-size:14px;margin-bottom:3px}
 .hp-b3-sub{font-size:10px;margin-bottom:12px}
 .hp-b3-details{gap:0;margin-bottom:14px}
 .hp-b3-row{padding:8px 0;gap:1px}
 .hp-b3-label{font-size:9px}
 .hp-b3-value{font-size:12px}
 .hp-b3-approve{font-size:12px;padding:10px;border-radius:8px}
 .hp-b3-handled{font-size:9px}
 .hp-time{font-size:8px;top:7px;left:8px}
}
/* ---------- static / reduced motion ---------- */
.static .wave i,.static .marq div,.static .bub .caret,.static .hp-wave-bars i,.static .hp-b2-strip-wave i{animation:none}
.static .hp-beat{opacity:0}.static .hp-beat-3{opacity:1;transform:translateY(0)}
.static .flyer,.static .cursor{display:none}
.static [data-scene=tuesday],.static [data-scene=oneplace],.static [data-scene=onepage],.static [data-scene=approve]{height:auto}
.static .s4in,.static .s6in,.static .s5in{height:auto;min-height:100vh}
.static .step .card{opacity:1}
/* who scene: single-lane display per persona */
body[data-who=peter] .lane:nth-child(2),body[data-who=catherine] .lane:nth-child(1){display:none}
.static .lane .track{transform:none!important}
/* ---------- mobile ---------- */
@media (max-width:899px){
 .wrap{padding:0 20px}
 .bar{padding:10px 12px}.logo{font-size:16px}.who>span:first-child{display:none}.who button{padding:6px 10px;font-size:12px}.who button small{display:none}
 .prog{display:none}
 .apptop .pill,.appsky .asay{display:none}
 [data-scene=talks]{height:auto;min-height:auto;padding:0}
 .s1in{height:auto;display:flex;flex-direction:column;padding:64px 20px 48px;gap:30px}
 [data-scene=tuesday]{min-height:auto;padding:0}
 .s2in{height:auto;display:flex;flex-direction:column;padding:64px 18px 40px}
 .mid{order:-1}
 .mid{position:sticky;top:54px;z-index:3;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:0;border-bottom:1px solid var(--line);padding:10px 0 8px;margin:0 -18px 18px}
 .clock{font-size:64px}.mid .cap{margin-top:4px;min-height:0;font-size:14px}
 .side{padding:0;margin-bottom:26px}
 .shard{width:180px;font-size:12px;padding:9px 11px}.shard.call{width:170px}.shard.text{width:170px}.shard.file{width:110px}.shard.note{width:120px;font-size:13px}
 .s4in{padding:80px 12px 16px}.s4in .h2{font-size:30px;margin-bottom:16px}
 .appsky{padding:12px 16px 16px}.awho h4{font-size:18px}.awho .av{width:40px;height:40px}.asay{font-size:16px}
 .appbody{grid-template-columns:1fr;padding:12px 14px;gap:12px}
 .files{grid-template-columns:repeat(2,1fr)}.files .fc:nth-child(n+3){display:none}
 .trow{padding:8px 0}.trow:nth-child(n+4){display:none}
 .bub{min-height:84px;font-size:13.5px}.chat .inp{display:none}
 [data-scene=who]{min-height:auto}
 .s5in{padding:100px 20px 48px;gap:32px}
 .s5head{text-align:center}
 .lanes{padding:0}
 .lane{flex-direction:column;align-items:stretch;gap:14px}
 .lane .who4{width:auto;margin-bottom:0}
 .track{flex-direction:column;align-items:stretch;gap:12px;padding-bottom:0;padding-left:24px}
 .track:before{left:6px;right:auto;top:0;bottom:0;width:2px;height:100%}.track .fill{left:6px;right:auto;top:0;bottom:auto;width:2px;height:0}
 .step{padding:0}.step .dot{left:-18px;bottom:auto;top:50%;margin-top:-6px;transform:none}.step .card{margin-left:0}
 .project{margin-top:24px;padding:0;max-width:100%;text-align:left}
 .phones{height:auto;display:flex;flex-direction:column;gap:24px;align-items:center}
 .phone{position:relative;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:min(340px,100%);height:auto;min-height:0;padding-bottom:22px;overflow:visible}
 .pmessages{max-height:none;overflow:visible}
 [data-scene=approve]{height:auto;min-height:auto}
 .s6in{height:auto;grid-template-columns:1fr;padding:56px 16px 20px;gap:18px;align-content:center}
 .s6copy .h2{font-size:34px;margin:10px 0 12px}.trust{gap:8px}.trust div{font-size:13.5px}.trust div:nth-child(n+3){display:none}
 .stage{height:auto}.today .trow:nth-child(3){display:none}
 .s7in{grid-template-columns:1fr;padding:90px 20px;gap:20px}
 .future-cards{height:360px;order:-1;margin-bottom:20px}
 .fcard{width:200px!important}.fcard.mac{left:0;top:0}.fcard.win{right:0;top:100px}.fcard.contact{display:none}.fcard.auto{display:none}
 .flist div{font-size:16px}
}
@media (min-width:640px){.phone .mob{display:none}}
@media (max-width:639px){
 .need .trow .av{display:none}
 .bar{background:#0B172D;padding:10px 14px}
 .logo{font-size:16px;gap:8px}.logo .mk{width:24px;height:24px}
 .flyer,.marq,.future-cards{display:none!important}
 .lede{font-size:17px}
 .hero .lede{max-width:30ch}
 /* talks */
 .s1in{padding-top:32px}
 /* Show both phones on mobile with full conversations */
 .phone{display:flex!important}
 .phone .ln.tl,.phone .pmessages,.chk.tl{display:block}
 /* Messages anchor at bottom like a real chat - revealed messages stack from bottom up */
 .phone .pmessages{display:flex;flex-direction:column;justify-content:flex-end}
 /* Compact typing dots on mobile - small left-aligned bubble, collapsed when hidden */
 .phone .typing-dots{padding:8px 12px;margin-top:8px;gap:5px;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s,opacity .25s,margin .25s,padding .25s;width:fit-content;align-self:flex-start}
 .phone .typing-dots.show{max-height:32px;opacity:1;display:inline-flex}
 .phone .typing-dots span{width:6px;height:6px}
 .phone .mob,.phone .chk.mob{display:none}
 .phone .mob{margin-top:14px;font-size:16px}.phone .mob .k{display:block;font-size:12px;color:rgba(255,255,255,.5);margin-bottom:4px}.phone.b .mob .k{color:var(--slate)}.wave{height:18px}.phone{padding-bottom:24px}
 .phone .psub{display:none}
 .s1copy .lede{display:none}.s1copy .h2{font-size:40px;margin:0}
 /* tuesday */
 body[data-who=peter] #cathSide,body[data-who=catherine] #peterSide{display:none}
 .s2in{padding-top:48px}.mid{top:56px}
 .ev small,.ev .src{display:none}.ev[data-at="4"],.ev[data-at="5"]{display:none}
 .ev{padding:14px 16px}.ev b{font-size:17px}.side{gap:14px}
 /* oneplace - mobile: 2x2 grid of cards below headline */
 [data-scene=oneplace]{height:auto;min-height:auto;padding:80px 0 48px;display:flex;flex-direction:column}
 .s3head{position:static;display:block;text-align:center;z-index:5;padding:0 20px;margin-bottom:32px;order:1}
 .s3head>div{opacity:1!important;transform:none!important}
 .s3head .h2{font-size:36px;padding:0;max-width:none;text-align:center}.s3head p{padding:0}
 #shards{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px;order:2}
 #shards .shard{position:static!important;left:auto!important;top:auto!important;width:100%;opacity:1!important;transform:none!important;filter:none!important}
 #shards .shard .lab{position:static;display:block;color:rgba(255,255,255,.7);margin-bottom:6px}
 #shards .shard.call,#shards .shard.text,#shards .shard.file{width:100%}
 /* onepage */
 .s4in{padding:84px 16px 16px}.files,.appbody .k:nth-of-type(2),.trow small,.awho p,#tbtns .btn.gh{display:none!important}
 .trow:nth-child(n+4){display:none}.trow b{font-size:15px}
 /* who */
 [data-scene=who]{padding:0}
 .s5in{padding:100px 20px 48px;gap:24px}.s5head .h2{font-size:36px}
 body[data-who=peter] .lane:nth-child(2),body[data-who=catherine] .lane:nth-child(1){display:none}
 .lane .who4{display:flex;margin-bottom:8px}
 .track{gap:14px;padding-left:26px}
 .track:before{display:block!important;left:6px}
 .step .dot{display:block!important;left:-20px;top:50%;bottom:auto;margin-top:-6px;transform:none}
 .step .card{margin-left:0;padding:16px 18px}.step .card b{font-size:17px}.step .card small{display:none}
 .project{display:block}
 /* approve */
 [data-scene=approve]{padding:0}
 .s6in{padding:48px 18px 20px}.trust div{display:none!important}.trust div:nth-child(3){display:flex!important;font-size:16px}
 .today .awho .av,.today .pill,.need .trow small,.stamp code,.today .awho p{display:none!important}
 .need .trow:nth-child(n+2),.handled .trow:nth-child(n+2){display:none}
 .need .trow b{font-size:15px}
 .handled .trow:first-child{opacity:1!important;transform:none!important}
 /* future */
 .s7in{padding:100px 20px 60px}.flist small{display:none}.flist div:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Phone Variant Switching ===== */
/* C is default: hp-default (loop) only shows with ?phone=loop */
.hp-default{display:none}
.hp-variant{display:none;position:absolute;inset:0;flex-direction:column;padding:28px 12px 16px}
/* Default state (phone=c): show variant C */
html[data-phone=c] .hp-variant-c{display:flex}
/* Explicit param overrides */
html[data-phone=a] .hp-variant-a{display:flex}
html[data-phone=b] .hp-variant-b{display:flex}
html[data-phone=loop] .hp-default{display:block}

/* ===== Variant A: Today decision feed ===== */
.hp-variant-a{justify-content:flex-start;gap:6px}
.hp-a-header{text-align:center;margin-bottom:2px}
.hp-a-title{font-size:17px;font-weight:800;color:#fff}
.hp-a-sub{font-size:10px;color:rgba(255,255,255,.6);margin-top:1px}
.hp-a-section{margin-top:4px}
.hp-a-label{font-size:8px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.hp-a-card{background:#fff;border-radius:10px;padding:10px}
.hp-a-decision{border-left:3px solid var(--per)}
.hp-a-card-top{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.hp-a-avatar{width:28px;height:28px;border-radius:50%;background:var(--per);color:var(--night);display:grid;place-items:center;font-weight:800;font-size:11px;flex:none}
.hp-a-card-info{flex:1;min-width:0}
.hp-a-card-title{font-size:12px;font-weight:700;color:var(--night)}
.hp-a-card-meta{font-size:9px;color:var(--slate)}
.hp-a-approve{display:block;width:100%;background:var(--per);color:var(--night);font-weight:800;font-size:11px;padding:8px;border:0;border-radius:6px;cursor:default}
.hp-a-row{display:flex;gap:6px;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.hp-a-row:last-child{border-bottom:0}
.hp-a-chip{font-size:8px;font-weight:700;padding:2px 5px;border-radius:4px;flex:none}
.hp-a-chip-call{background:var(--mint);color:var(--night)}
.hp-a-chip-mail{background:var(--navy);color:#fff}
.hp-a-chip-file{background:var(--per);color:var(--night)}
.hp-a-row-text{font-size:10px;color:rgba(255,255,255,.8);flex:1}

/* ===== Variant B: Live call + decision ===== */
.hp-variant-b{justify-content:flex-start;gap:8px}
.hp-b-call{background:linear-gradient(180deg,rgba(94,224,184,.15),rgba(94,224,184,.05));border:1px solid rgba(94,224,184,.3);border-radius:12px;padding:10px}
.hp-b-call-status{font-size:9px;font-weight:700;color:var(--mint);text-align:center;margin-bottom:8px}
.hp-b-call-row{display:flex;gap:8px;align-items:center}
.hp-b-call-avatar{width:32px;height:32px;border-radius:50%;background:var(--per);color:var(--night);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.hp-b-call-info{flex:1;min-width:0}
.hp-b-call-name{font-size:13px;font-weight:700;color:#fff}
.hp-b-call-role{font-size:9px;color:rgba(255,255,255,.6)}
.hp-b-call-timer{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mint);font-weight:600;flex:none}
.hp-b-decision{flex:1;display:flex;flex-direction:column}
.hp-b-decision-for{font-size:10px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:6px}
.hp-b-decision-card{background:#fff;border-radius:12px;padding:12px;flex:1;display:flex;flex-direction:column}
.hp-b-decision-title{font-size:13px;font-weight:700;color:var(--night);margin-bottom:3px}
.hp-b-decision-amount{font-size:16px;font-weight:800;color:var(--night);margin-bottom:8px}
.hp-b-decision-sources{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:auto;padding-bottom:10px}
.hp-b-chip{font-size:8px;font-weight:600;padding:3px 6px;border-radius:5px;background:var(--mist);color:var(--slate)}
.hp-b-approve{display:block;width:100%;background:var(--per);color:var(--night);font-weight:800;font-size:12px;padding:10px;border:0;border-radius:8px;cursor:default;margin-top:auto}

/* ===== Variant C: Lock-screen notification stack ===== */
.hp-variant-c{display:flex;flex-direction:column;justify-content:space-between;padding:28px 10px 14px;gap:0;background:linear-gradient(180deg,#0A1628 0%,#1E3A8A 100%)}
.hp-c-lock{text-align:center;padding:2px 0 6px;flex-shrink:0}
.hp-c-time{font-size:42px;font-weight:300;color:#fff;letter-spacing:-2px;line-height:1}
.hp-c-date{font-size:11px;color:rgba(255,255,255,.7);margin-top:2px}
.hp-c-stack{display:flex;flex-direction:column;flex:1;justify-content:space-evenly;padding:4px 0}
.hp-c-notif{display:flex;gap:6px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:10px;padding:7px 8px;align-items:flex-start}
.hp-c-icon{width:22px;height:22px;border-radius:5px;flex:none;display:grid;place-items:center}
.hp-c-icon::after{content:'';width:11px;height:11px;background-size:contain;background-repeat:no-repeat;background-position:center}
.hp-c-icon-call{background:var(--mint)}
.hp-c-icon-call::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230B172D'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.58.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.01l-2.21 2.2z'/%3E%3C/svg%3E")}
.hp-c-icon-mail{background:var(--navy)}
.hp-c-icon-mail::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E")}
.hp-c-icon-cal{background:var(--per)}
.hp-c-icon-cal::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230B172D'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E")}
.hp-c-icon-process{background:#A78BFA}
.hp-c-icon-process::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230B172D'%3E%3Cpath d='M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0020 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 004 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z'/%3E%3C/svg%3E")}
.hp-c-icon-file{background:#9FB4FF}
.hp-c-icon-file::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230B172D'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm4 18H6V4h7v5h5v11z'/%3E%3C/svg%3E")}
.hp-c-notif-body{flex:1;min-width:0}
.hp-c-notif-title{font-size:13px;font-weight:700;color:#fff;line-height:1.25}
.hp-c-notif-role{display:block;font-size:11px;font-weight:500;color:rgba(255,255,255,.6);margin-top:1px;line-height:1.3}
.hp-c-notif-text{font-size:11px;color:rgba(255,255,255,.65);line-height:1.2;margin-top:1px}
.hp-c-badge{display:inline-block;background:rgba(255,255,255,.2);font-size:8px;font-weight:700;padding:2px 4px;border-radius:3px;margin-right:3px;vertical-align:middle}
/* Decision card at bottom */
.hp-c-decision{background:#fff;border-radius:10px;padding:10px;flex-shrink:0}
.hp-c-decision-for{font-size:9px;font-weight:600;color:var(--slate);margin-bottom:2px}
.hp-c-decision-title{font-size:12px;font-weight:700;color:var(--night);line-height:1.25}
.hp-c-decision-meta{font-size:10px;color:var(--slate);margin-top:2px}
.hp-c-decision-btn{display:block;width:100%;background:var(--per);color:var(--night);font-weight:800;font-size:11px;padding:8px;border:0;border-radius:6px;margin-top:6px;cursor:default}

/* ===== Variant responsive: tablet (1024-1199) ===== */
@media (max-width:1199px){
  .hp-variant{padding:20px 8px 10px}
  /* Variant A */
  .hp-variant-a{gap:4px}
  .hp-a-header{margin-bottom:1px}
  .hp-a-title{font-size:14px}
  .hp-a-sub{font-size:8px}
  .hp-a-section{margin-top:3px}
  .hp-a-label{font-size:7px;margin-bottom:3px}
  .hp-a-card{padding:8px;border-radius:8px}
  .hp-a-decision{border-left-width:2px}
  .hp-a-card-top{gap:6px;margin-bottom:6px}
  .hp-a-avatar{width:22px;height:22px;font-size:9px}
  .hp-a-card-title{font-size:10px}
  .hp-a-card-meta{font-size:7px}
  .hp-a-approve{font-size:9px;padding:6px;border-radius:5px}
  .hp-a-row{gap:5px;padding:4px 0}
  .hp-a-chip{font-size:7px;padding:2px 4px;border-radius:3px}
  .hp-a-row-text{font-size:8px}
  /* Variant B */
  .hp-variant-b{gap:6px}
  .hp-b-call{padding:8px;border-radius:10px}
  .hp-b-call-status{font-size:8px;margin-bottom:6px}
  .hp-b-call-row{gap:6px}
  .hp-b-call-avatar{width:26px;height:26px;font-size:10px}
  .hp-b-call-name{font-size:11px}
  .hp-b-call-role{font-size:7px}
  .hp-b-call-timer{font-size:9px}
  .hp-b-decision-for{font-size:8px;margin-bottom:4px}
  .hp-b-decision-card{padding:10px;border-radius:10px}
  .hp-b-decision-title{font-size:11px}
  .hp-b-decision-amount{font-size:14px;margin-bottom:6px}
  .hp-b-decision-sources{gap:3px;padding-bottom:8px}
  .hp-b-chip{font-size:7px;padding:2px 5px}
  .hp-b-approve{font-size:10px;padding:8px;border-radius:7px}
  /* Variant C - tablet (480px phone height, readable text) */
  .hp-variant-c{padding:26px 8px 12px}
  .hp-c-lock{padding:2px 0 4px}
  .hp-c-time{font-size:36px;letter-spacing:-1.5px}
  .hp-c-date{font-size:10px}
  .hp-c-stack{padding:2px 0}
  .hp-c-notif{gap:5px;padding:6px 7px;border-radius:8px}
  .hp-c-icon{width:18px;height:18px;border-radius:4px}
  .hp-c-icon::after{width:9px;height:9px}
  .hp-c-notif-title{font-size:12px}
  .hp-c-notif-role{font-size:11px}
  .hp-c-notif-text{font-size:10px}
  .hp-c-badge{font-size:7px;padding:1px 3px}
  .hp-c-decision{padding:8px;border-radius:8px}
  .hp-c-decision-for{font-size:8px;margin-bottom:1px}
  .hp-c-decision-title{font-size:11px}
  .hp-c-decision-meta{font-size:9px}
  .hp-c-decision-btn{font-size:10px;padding:6px;border-radius:5px;margin-top:4px}
}

/* ===== Variant responsive: mobile (max-width:639px) ===== */
@media (max-width:639px){
  .hp-variant{padding:24px 10px 12px}
  /* Variant A - compact to fit all content */
  .hp-variant-a{gap:8px}
  .hp-a-header{margin-bottom:4px}
  .hp-a-title{font-size:20px}
  .hp-a-sub{font-size:11px;margin-top:2px}
  .hp-a-section{margin-top:6px}
  .hp-a-label{font-size:9px;margin-bottom:5px}
  .hp-a-card{padding:12px;border-radius:12px}
  .hp-a-card-top{gap:10px;margin-bottom:10px}
  .hp-a-avatar{width:34px;height:34px;font-size:14px}
  .hp-a-card-title{font-size:14px}
  .hp-a-card-meta{font-size:10px}
  .hp-a-approve{font-size:13px;padding:10px;border-radius:8px}
  .hp-a-row{gap:8px;padding:7px 0}
  .hp-a-chip{font-size:9px;padding:3px 6px;border-radius:5px}
  .hp-a-row-text{font-size:12px}
  /* Variant B */
  .hp-variant-b{gap:10px}
  .hp-b-call{padding:12px;border-radius:14px}
  .hp-b-call-status{font-size:11px;margin-bottom:10px}
  .hp-b-call-row{gap:10px}
  .hp-b-call-avatar{width:40px;height:40px;font-size:16px}
  .hp-b-call-name{font-size:16px}
  .hp-b-call-role{font-size:10px}
  .hp-b-call-timer{font-size:13px}
  .hp-b-decision-for{font-size:12px;margin-bottom:8px}
  .hp-b-decision-card{padding:14px;border-radius:14px}
  .hp-b-decision-title{font-size:15px;margin-bottom:4px}
  .hp-b-decision-amount{font-size:20px;margin-bottom:12px}
  .hp-b-decision-sources{gap:6px;padding-bottom:12px}
  .hp-b-chip{font-size:9px;padding:4px 8px;border-radius:6px}
  .hp-b-approve{font-size:14px;padding:12px;border-radius:10px}
  /* Variant C - mobile (466px phone height, readable text) */
  .hp-variant-c{padding:24px 8px 12px}
  .hp-c-lock{padding:2px 0 6px}
  .hp-c-time{font-size:38px;letter-spacing:-2px}
  .hp-c-date{font-size:10px;margin-top:2px}
  .hp-c-stack{gap:4px;padding:2px 0}
  .hp-c-notif{gap:6px;padding:6px 8px;border-radius:9px}
  .hp-c-icon{width:20px;height:20px;border-radius:5px}
  .hp-c-icon::after{width:10px;height:10px}
  .hp-c-notif-title{font-size:12px}
  .hp-c-notif-role{font-size:11px}
  .hp-c-notif-text{font-size:10px}
  .hp-c-badge{font-size:7px;padding:2px 3px;border-radius:2px}
  .hp-c-decision{padding:9px;border-radius:9px}
  .hp-c-decision-for{font-size:8px;margin-bottom:2px}
  .hp-c-decision-title{font-size:11px}
  .hp-c-decision-meta{font-size:9px;margin-top:1px}
  .hp-c-decision-btn{font-size:11px;padding:8px;border-radius:6px;margin-top:5px}
}

/* site-2.0: shared header sits at the top; footer is static */
.who{background:#1A2B55;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#2C3F6E}
@media (max-width:1100px){.sitebar .sitenav{display:none}}
@media (max-width:899px){.sitebar .menubtn{display:block}}
@media (max-width:420px){.sitebar .navcta{display:none}.who button{padding:6px 8px}}
/* hero mobile */
@media (max-width:639px){
 [data-scene=hero]{padding:76px 0 64px;min-height:auto}
 .hero .cta{margin-top:20px;padding:16px 26px;font-size:17px}
 .hero .lede{margin-top:16px}
 .hero-grid{grid-template-columns:1fr;padding:0 20px;gap:64px}
 .hero{padding:0}
 .hero-phone{order:2;padding:0;display:flex;justify-content:center;margin-bottom:64px}
 h1{font-size:clamp(32px,9vw,48px)}
 .hero .lede{font-size:16px;max-width:100%}
 /* Phone centred at ~60% of viewport width (240px at 390px) for readable text */
 .hero-phone-frame{width:240px;height:auto;aspect-ratio:9/19.5;transform:rotate(0);border-radius:22px;margin-inline:auto}
 .hero-phone-bezel{border-radius:17px}
 .hero-phone-screen{margin:3px;border-radius:14px}
 .hero-phone-island{width:40px;height:11px;top:5px;border-radius:7px}
 .hero-phone-island::before{width:3px;height:3px;right:9px}
 /* Beat scaling for mobile - full-screen composition
    Mobile phone is ~466px tall (similar to desktop's 420px), so use comparable sizes */
 .hp-beat{padding:28px 10px 18px;justify-content:space-between}
 .hp-time{font-size:9px;top:8px;left:9px}
 /* ===== Beat 1 mobile: caller at top, waveform centre, controls bottom ===== */
 .hp-b1-top{padding-top:16px}
 .hp-status{font-size:11px;margin-bottom:20px}
 .hp-avatar-lg{width:56px;height:56px;font-size:22px}
 .hp-b1-name{font-size:18px}
 .hp-b1-role{font-size:11px}
 .hp-b1-caller{gap:10px}
 .hp-b1-wave{flex:1;min-height:100px}
 .hp-wave-bars{height:56px;gap:4px}
 .hp-wave-bars i{width:3px}
 .hp-b1-bottom{gap:16px}
 .hp-b1-timer{font-size:14px}
 .hp-b1-controls{gap:14px}
 .hp-ctrl{width:38px;height:38px}
 /* ===== Beat 2 mobile: header top, bubbles fill middle, strip bottom ===== */
 .hp-b2-header{gap:10px;padding-bottom:10px}
 .hp-b2-avatar{width:32px;height:32px;font-size:13px}
 .hp-b2-name{font-size:14px}
 .hp-b2-role{font-size:10px}
 .hp-b2-timer{font-size:11px}
 .hp-b2-label{font-size:10px;margin:14px 0 12px}
 .hp-b2-messages{gap:12px;flex:1}
 .hp-b2-msg{padding:14px 14px;border-radius:12px}
 .hp-b2-msg-asta{margin-left:14px}
 .hp-b2-msgname{font-size:10px;margin-bottom:4px}
 .hp-b2-msgtext{font-size:14px;line-height:1.45}
 .hp-b2-strip{padding:12px 14px;border-radius:10px}
 .hp-b2-strip-wave{height:20px;gap:3px}
 .hp-b2-strip-wave i{width:3px}
 .hp-b2-strip-timer{font-size:11px}
 /* ===== Beat 3 mobile: header at top, card fills middle, note bottom ===== */
 .hp-b3-header{font-size:13px;margin-bottom:10px}
 .hp-b3-card{padding:18px;border-radius:14px;flex:1;display:flex;flex-direction:column}
 .hp-b3-title{font-size:17px;margin-bottom:4px}
 .hp-b3-sub{font-size:13px;margin-bottom:18px}
 .hp-b3-details{gap:0;margin-bottom:auto;flex:1}
 .hp-b3-row{padding:12px 0;gap:2px}
 .hp-b3-label{font-size:11px}
 .hp-b3-value{font-size:16px}
 .hp-b3-approve{font-size:15px;padding:14px;border-radius:10px;margin-top:auto}
 .hp-b3-handled{font-size:12px;margin-top:14px}
}
/* gliding persona pill (update-6b, 19 Oct 18:43): CSS anchor positioning */
.who button[aria-pressed=true]{background:#fff;color:var(--night)}
.who button:focus-visible{outline:2px solid var(--per);outline-offset:2px}
@supports (anchor-name:--a){
 .who{position:relative}
 .who button{position:relative;z-index:1}
 .who button[aria-pressed=true]{anchor-name:--whopill;background:transparent;color:var(--night)}
 .who::before{content:"";position:absolute;z-index:0;position-anchor:--whopill;top:anchor(top);bottom:anchor(bottom);left:anchor(left);right:anchor(right);border-radius:99px;background:#fff;pointer-events:none;transition:top .25s ease-out,bottom .25s ease-out,left .25s ease-out,right .25s ease-out}
}
@media (prefers-reduced-motion:reduce){.who::before{transition:none}}