/* Home page. Concept: the alarm rings and the sun comes up.
   The hero is a live dawn sky; the rest of the page is the bright morning
   after it. One signature motion per section, all of it paused off screen
   (.live is toggled by scene.js) and none of it under reduced motion. */

.home{
  --night:#130D33; --dusk:#33206A; --plum:#86357F; --coral:#FF6B5B;
  --amber:#FFB547; --blush:#FF84AC; --day:#FFF8F2; --ink:#211D33;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --text:"Figtree",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  font-family:var(--text);
  background:var(--day);
}
.home h1,.home h2,.home h3{font-family:var(--display);font-optical-sizing:auto}
.home h2{font-size:clamp(32px,4.6vw,56px);line-height:1.04;font-weight:800;letter-spacing:-.025em;max-width:18ch;text-wrap:balance}
.home h2.small{font-size:22px;letter-spacing:-.01em}
.home .lede{max-width:54ch}
.home section{border-top:none;padding:clamp(80px,10vw,136px) 0}
.home section.tight{padding:40px 0 48px}
.home .fine{margin-top:18px;color:var(--faint);font-size:14px;max-width:56ch}

/* buttons on dark and on the sunrise band */
.btn.glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px)}
.btn.glass:hover{background:rgba(255,255,255,.2)}
.day .btn.glass{box-shadow:none}
.btn.dark{background:var(--night);color:#fff;box-shadow:0 14px 34px rgba(19,13,51,.35)}
.home .btn{transition:transform .15s,box-shadow .2s}
.home .btn:hover{transform:translateY(-2px)}

/* nav over the dawn sky until it scrolls onto the day page */
.home #nav nav{background:rgba(19,13,51,.55);border-bottom-color:rgba(255,255,255,.08);color:#fff;transition:background .3s,color .3s}
.home #nav nav .navlink{color:rgba(255,255,255,.75)}
.home #nav nav .navlink:hover{color:#fff}
.home.scrolled #nav nav{background:rgba(255,248,242,.88);border-bottom-color:var(--line);color:var(--ink)}
.home.scrolled #nav nav .navlink{color:var(--dim)}
.home.scrolled #nav nav .navlink:hover{color:var(--ink)}

/* ───────────── hero: dawn ───────────── */
.dawn{position:relative;overflow:hidden;color:#fff;margin-top:-66px;padding:calc(66px + clamp(40px,7vw,96px)) 0 0;
  background:
    linear-gradient(180deg,var(--night) 0%,var(--dusk) 34%,var(--plum) 58%,var(--coral) 80%,var(--amber) 100%)}
.stars{position:absolute;inset:0;width:100%;height:70%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;mix-blend-mode:screen}
.glow.g1{width:46vw;height:46vw;left:-12vw;top:30%;background:#FF5C93;animation:drift1 18s ease-in-out infinite alternate}
.glow.g2{width:40vw;height:40vw;right:-10vw;top:12%;background:#7A5CFF;animation:drift2 22s ease-in-out infinite alternate}
.glow.g3{width:50vw;height:30vw;left:25%;bottom:-8vw;background:#FFB547;opacity:.7;animation:drift3 16s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(8vw,-6vh) scale(1.1)}}
@keyframes drift2{to{transform:translate(-6vw,8vh) scale(.92)}}
@keyframes drift3{to{transform:translate(-6vw,-2vh) scale(1.08)}}

.dawnGrid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;min-height:min(78vh,720px)}
.dawnCopy{max-width:600px;padding-bottom:clamp(40px,8vw,120px)}
.dawn .hl span{display:block;white-space:nowrap}
.dawn .hl .l2{color:#FFE2B8}
.dawn .hl{font-size:clamp(46px,6.6vw,92px);line-height:.94;font-weight:800;letter-spacing:-.035em;max-width:none;
  text-shadow:0 4px 40px rgba(19,13,51,.35)}
.dawn .hl{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.2,.8,.2,1) .15s forwards}
.dawnSub{margin-top:24px;font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:rgba(255,255,255,.86);max-width:46ch;
  opacity:0;animation:rise .9s cubic-bezier(.2,.8,.2,1) .35s forwards}
.dawnCta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;opacity:0;animation:rise .9s cubic-bezier(.2,.8,.2,1) .55s forwards}
.dawnCta.center{justify-content:center}
.dawnFine{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.7);opacity:0;animation:rise .9s ease .7s forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* the stage: sun, sound rings, orbit, phone */
.stage{position:relative;width:100%;height:clamp(520px,58vw,640px);display:grid;place-items:center}
.sun{position:absolute;left:50%;top:56%;width:clamp(260px,30vw,380px);aspect-ratio:1;border-radius:50%;
  translate:-50% -50%;
  background:radial-gradient(circle at 50% 40%,#FFE7A8 0%,#FFB547 38%,#FF7A4F 72%,#FF5C6E 100%);
  box-shadow:0 0 120px 30px rgba(255,181,71,.45),0 0 240px 80px rgba(255,107,91,.25);
  animation:sunrise 2.4s cubic-bezier(.2,.75,.2,1) both}
@keyframes sunrise{from{transform:translateY(55%) scale(.9);opacity:.2}to{transform:none;opacity:1}}
.sun .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,231,168,.7);
  animation:pulse 3.2s cubic-bezier(.2,.6,.3,1) infinite}
.sun .r2{animation-delay:1.06s}.sun .r3{animation-delay:2.13s}
@keyframes pulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.3);opacity:0}}

.orbit{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;gap:8px;
  padding:10px 15px 10px 11px;border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap;
  color:var(--ink);background:#fff;box-shadow:0 14px 34px rgba(19,13,51,.28);will-change:transform}
.chip svg{width:22px;height:22px;padding:3px;border-radius:50%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;color:#fff}
.c-speak svg{background:#F59E0B}.c-solve svg{background:#F05252}.c-shake svg{background:#8B5CF6}
.c-type svg{background:#3E7BE8}.c-memory svg{background:#10B981}.c-walk svg{background:#EC4899}.c-scan svg{background:#06B6D4}
/* before scene.js positions them (and with reduced motion) chips sit on a fixed ring */
.c-speak{transform:translate(-160%,-260%)}.c-solve{transform:translate(70%,-240%)}.c-shake{transform:translate(110%,-80%)}
.c-type{transform:translate(95%,110%)}.c-memory{transform:translate(-30%,250%)}.c-walk{transform:translate(-190%,120%)}.c-scan{transform:translate(-210%,-60%)}

.phone{position:relative;z-index:3;width:clamp(230px,23vw,280px);aspect-ratio:9/19;border-radius:42px;padding:10px;
  background:linear-gradient(160deg,#2A2550,#0E0B22);box-shadow:0 40px 90px rgba(19,13,51,.55),inset 0 0 0 1.5px rgba(255,255,255,.12)}
.phone.ringing{animation:buzz 4s ease-in-out infinite}
@keyframes buzz{0%,70%,100%{transform:rotate(0)}72%{transform:rotate(-2.2deg)}74%{transform:rotate(2.2deg)}76%{transform:rotate(-1.8deg)}78%{transform:rotate(1.6deg)}80%{transform:rotate(-.8deg)}82%{transform:rotate(0)}}
.screen{height:100%;border-radius:33px;overflow:hidden;background:#0A1020;color:#F3F6FC;position:relative;font-family:var(--text)}
.scr{position:absolute;inset:0;padding:16px 16px 14px;display:flex;flex-direction:column;
  opacity:0;transform:translateX(18px) scale(.985);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.scr.on{opacity:1;transform:none}
.scr.out{opacity:0;transform:translateX(-18px) scale(.985)}
.pStatus{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:#B3BCD2}
.pIcons{display:flex;gap:3px;align-items:flex-end}.pIcons i{width:4px;background:#B3BCD2;border-radius:1px}
.pIcons i:nth-child(1){height:5px}.pIcons i:nth-child(2){height:8px}.pIcons i:nth-child(3){height:11px}
.pPill{margin-top:16px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
  color:#FFDDB0;background:#3B2A12;padding:6px 10px;border-radius:99px}
.pPill svg{width:13px;height:13px;fill:none;stroke:#FFB547;stroke-width:2;stroke-linecap:round}
.pTime{margin-top:14px;font-family:var(--display);font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:1}
.pTime small{font-size:16px;font-weight:700;color:#B3BCD2;margin-left:5px;letter-spacing:0}
.pDate{color:#B3BCD2;font-size:12px;margin-top:4px}
.pWhy{margin-top:16px;background:#1B2640;border-radius:16px;padding:11px 12px;font-size:13.5px;font-weight:700;line-height:1.3}
.pWhy span{display:block;font-size:10px;font-weight:600;color:#B3BCD2;margin-bottom:4px}
.pBell{flex:1;display:grid;place-items:center;position:relative;min-height:70px}
.pBell svg{width:34px;height:34px;fill:none;stroke:#FFB547;stroke-width:1.8;stroke-linecap:round;position:relative;z-index:1;
  animation:ringbell 1.6s ease-in-out infinite;transform-origin:50% 20%}
.pBell i{position:absolute;width:56px;height:56px;border-radius:50%;background:rgba(255,181,71,.18);animation:pulse 2.4s ease-out infinite}
.pBell i+i{animation-delay:1.2s}
.pTask{font-size:11px;color:#B3BCD2}
.pBtn{margin-top:9px;text-align:center;font-weight:800;font-size:13px;color:#2B1800;padding:11px;border-radius:14px;
  background:linear-gradient(90deg,#FFB547,#FF7A59)}
.pGhost,.pHold{margin-top:7px;text-align:center;font-size:11.5px;font-weight:700;padding:9px;border-radius:14px;background:#141D30;border:1px solid #3D4C6B;position:relative;overflow:hidden}
.pHold i{position:absolute;inset:0;width:0;background:#44182A;animation:hold 6s ease-in-out infinite}
.pHold{isolation:isolate}.pHold i{z-index:-1}
@keyframes hold{0%,55%{width:0}80%{width:62%}86%,100%{width:0}}

.hills{position:relative;z-index:2;display:block;width:100%;height:clamp(90px,12vw,190px);margin-top:-6px}
.hills .h1{fill:#FF9466;opacity:.55}.hills .h2{fill:#FFC9A3;opacity:.8}.hills .h3{fill:var(--day)}

/* ───────────── proof ───────────── */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.fact b{display:block;font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.01em}
.fact span{display:block;color:var(--dim);font-size:14.5px;margin-top:6px}
a.fact b{color:#D9480F}
a.fact:hover b{text-decoration:underline}

/* ───────────── a morning: numbered steps ───────────── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:10%;right:10%;top:62px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#F59E0B,#F05252,#8B5CF6,#10B981);transform-origin:left;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.steps.live::before,.steps.seen::before{transform:scaleX(1)}
.step{position:relative;text-align:center;counter-increment:s}
.step .art{width:124px;height:124px;margin:0 auto;border-radius:36px;background:#fff;display:grid;place-items:center;
  box-shadow:0 18px 44px rgba(46,30,90,.12);position:relative;z-index:1}
.step .art::after{content:counter(s);position:absolute;top:-8px;right:-8px;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:#fff;font:800 13px/30px var(--text)}
.step .art svg{width:96px;height:96px;fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.step b{display:block;margin-top:22px;font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.01em}
.step p{margin:8px auto 0;color:var(--dim);font-size:15px;max-width:26ch}

.art-ring .bell{stroke:#F59E0B;transform-origin:60px 34px}
.art-ring .wave{stroke:#F59E0B;stroke-width:3;opacity:0}
.live .art-ring .bell{animation:ringbell 1.6s ease-in-out infinite}
.live .art-ring .wave{animation:wave 1.6s ease-out infinite}.live .art-ring .w2{animation-delay:.8s}
@keyframes ringbell{0%,50%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(9deg)}40%{transform:rotate(-5deg)}}
@keyframes wave{0%{transform:scale(.9);opacity:.6;transform-origin:60px 60px}100%{transform:scale(1.9);opacity:0;transform-origin:60px 60px}}

.art-start .btnArt{fill:#FFE4E0;stroke:#F05252}
.art-start .tap{fill:#F05252;stroke:none;opacity:.25;transform-origin:74px 61px}
.art-start .vol{stroke:#F05252;stroke-width:5;stroke-dasharray:60;stroke-dashoffset:0}
.live .art-start .tap{animation:tap 2.4s ease-in-out infinite}
.live .art-start .vol{animation:vol 2.4s ease-in-out infinite}
@keyframes tap{0%,20%{transform:scale(.4);opacity:0}30%{transform:scale(1);opacity:.9}60%{transform:scale(2.2);opacity:0}100%{opacity:0}}
@keyframes vol{0%,30%{stroke-dashoffset:0}60%,85%{stroke-dashoffset:52}100%{stroke-dashoffset:0}}

.art-task .card{fill:#EFE6FF;stroke:#8B5CF6;stroke-width:4}
.art-task text{font-family:var(--display);font-weight:800;stroke:none}
.art-task .sum{fill:#4C1D95;font-size:17px}
.art-task .ans{fill:#8B5CF6;font-size:16px;opacity:0}
.live .art-task .ans{animation:answer 3s ease-in-out infinite}
@keyframes answer{0%,30%{opacity:0;transform:translateY(6px)}45%,85%{opacity:1;transform:none}100%{opacity:0}}

.art-up .sunArt{fill:#FFD27A;stroke:#F59E0B;transform-origin:60px 94px}
.art-up .ray{stroke:#F59E0B;stroke-width:4;opacity:.8}
.art-up .hor{stroke:#10B981;stroke-width:5}
.art-up .tick{stroke:#065F46;stroke-width:5;stroke-dasharray:40;stroke-dashoffset:40}
.live .art-up .sunArt{animation:bob 3s ease-in-out infinite}
.live .art-up .tick{animation:tick 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(4px)}50%{transform:translateY(-3px)}}
@keyframes tick{0%,30%{stroke-dashoffset:40}55%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}

/* ───────────── tasks ───────────── */
.taskGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px}
.task{border-radius:28px;padding:24px 22px 26px;background:var(--tbg);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.task:hover{transform:translateY(-4px) rotate(-.6deg)}
.task:first-child{grid-column:span 2}
.task b{display:block;margin-top:18px;font-family:var(--display);font-size:22px;font-weight:700;color:var(--tink)}
.task p{color:var(--tink);opacity:.8;font-size:14.5px;margin-top:4px}
.tArt{height:92px;border-radius:20px;background:rgba(255,255,255,.6);display:grid;place-items:center;overflow:hidden}
.t-speak{--tbg:#FFF0D6;--tink:#92400E;--tc:#F59E0B}
.t-solve{--tbg:#FFE4E0;--tink:#991B1B;--tc:#F05252}
.t-shake{--tbg:#EFE6FF;--tink:#5B21B6;--tc:#8B5CF6}
.t-type{--tbg:#E0EAFF;--tink:#1E40AF;--tc:#3E7BE8}
.t-memory{--tbg:#DBF7EC;--tink:#065F46;--tc:#10B981}
.t-walk{--tbg:#FFE3F0;--tink:#9D174D;--tc:#EC4899}
.t-scan{--tbg:#DDF6FB;--tink:#155E75;--tc:#06B6D4}

.eq{display:flex;gap:6px;align-items:center;height:52px}
.eq i{width:9px;height:18px;border-radius:5px;background:var(--tc)}
.live .eq i{animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.2s}.eq i:nth-child(3){animation-delay:-.45s}.eq i:nth-child(4){animation-delay:-.1s}.eq i:nth-child(5){animation-delay:-.65s}
@keyframes eq{0%,100%{height:14px}50%{height:50px}}

.flip{position:relative;height:40px;overflow:hidden;font-family:var(--display);font-weight:800;font-size:30px;color:var(--tink)}
.flip em{display:block;font-style:normal;line-height:40px;text-align:center}
.live .flip em{animation:flip 3.2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes flip{0%,40%{transform:translateY(0)}50%,90%{transform:translateY(-40px)}100%{transform:translateY(0)}}

.mini{width:30px;height:52px;border-radius:8px;border:4px solid var(--tc);position:relative}
.mini::after{content:"";position:absolute;left:50%;bottom:4px;width:8px;height:3px;margin-left:-4px;border-radius:2px;background:var(--tc)}
.live .mini{animation:shake 2.6s ease-in-out infinite}
@keyframes shake{0%,8%,30%,38%,100%{transform:rotate(0)}2%,32%{transform:rotate(-18deg) translateX(-6px)}5%,35%{transform:rotate(18deg) translateX(6px)}}

.typed{font-family:var(--display);font-weight:700;font-size:24px;color:var(--tink);white-space:nowrap;overflow:hidden;
  display:inline-flex;align-items:center;max-width:0;border-right:0}
.typed i{width:3px;height:26px;background:var(--tc);margin-left:3px;animation:caret 1s steps(1) infinite}
.live .typed{animation:typing 4s steps(8) infinite}
.typed{max-width:5.2em}
@keyframes typing{0%{max-width:.7em}50%,85%{max-width:5.2em}100%{max-width:.7em}}
@keyframes caret{50%{opacity:0}}

.grid9{display:grid;grid-template-columns:repeat(3,18px);gap:6px}
.grid9 i{width:18px;height:18px;border-radius:5px;background:color-mix(in srgb,var(--tc) 25%,#fff)}
.live .grid9 i:nth-child(1){animation:lit 3s infinite 0s}.live .grid9 i:nth-child(5){animation:lit 3s infinite .4s}
.live .grid9 i:nth-child(9){animation:lit 3s infinite .8s}.live .grid9 i:nth-child(3){animation:lit 3s infinite 1.2s}
@keyframes lit{0%,8%{background:var(--tc);transform:scale(1.15)}20%,100%{background:color-mix(in srgb,var(--tc) 25%,#fff);transform:none}}

.feet{position:relative;width:70px;height:56px}
.feet i{position:absolute;width:16px;height:26px;border-radius:9px 9px 7px 7px;background:var(--tc);opacity:.3}
.feet i:nth-child(1){left:14px;top:22px}.feet i:nth-child(2){left:40px;top:4px}
.live .feet i:nth-child(1){animation:step 1.2s infinite}.live .feet i:nth-child(2){animation:step 1.2s infinite .6s}
@keyframes step{0%,40%{opacity:1;transform:translateY(-3px)}60%,100%{opacity:.3;transform:none}}

.qr{position:relative;width:56px;height:56px;border-radius:8px;
  background:conic-gradient(from 90deg at 30% 30%,var(--tc) 25%,transparent 0) 0 0/14px 14px,#fff;
  box-shadow:inset 0 0 0 4px var(--tc)}
.qr i{position:absolute;left:-8px;right:-8px;height:3px;top:0;background:#F05252;box-shadow:0 0 12px #F05252}
.live .qr i{animation:scan 2s ease-in-out infinite alternate}
@keyframes scan{to{top:53px}}

/* ───────────── ready (night) ───────────── */
.home .night{background:radial-gradient(80% 60% at 20% 30%,#2A1C63 0%,transparent 60%),radial-gradient(60% 50% at 90% 80%,#4A1F5C 0%,transparent 60%),#0E0A26}
.readyGrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.lockArt{display:grid;place-items:center}
.lock{width:240px;aspect-ratio:9/18;border-radius:38px;padding:30px 20px;text-align:center;position:relative;
  background:linear-gradient(170deg,#1B1446,#0A0820);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1.5px rgba(255,255,255,.1)}
.lTime{font-family:var(--display);font-size:58px;font-weight:800;letter-spacing:-.04em;color:#fff;opacity:.35;transition:opacity .4s}
.lDate{color:#B3BCD2;font-size:13px;opacity:.5}
.lAlarm{margin-top:30px;border-radius:18px;padding:14px;background:rgba(255,181,71,.16);border:1px solid rgba(255,181,71,.5);color:#fff;
  opacity:0;transform:translateY(12px) scale(.96)}
.lAlarm b{display:block;font-size:14px}.lAlarm span{font-size:12px;color:#FFDDB0}
.lRing{position:absolute;left:50%;bottom:34px;translate:-50% 0;width:62px;height:62px}
.lRing svg{width:100%;height:100%;transform:rotate(-90deg)}
.lRing circle{fill:none;stroke:rgba(255,255,255,.12);stroke-width:4}
.lRing .count{stroke:#FFB547;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:0}
.lRing span{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:#fff;font-size:18px}
.live .lock .count{animation:countdown 6s linear infinite}
.live .lock .lAlarm{animation:alarmIn 6s ease-in-out infinite}
.live .lock .lTime{animation:wake 6s ease-in-out infinite}
@keyframes countdown{0%{stroke-dashoffset:0}55%{stroke-dashoffset:113}100%{stroke-dashoffset:113}}
@keyframes alarmIn{0%,55%{opacity:0;transform:translateY(12px) scale(.96)}62%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes wake{0%,55%{opacity:.35}60%,95%{opacity:1}100%{opacity:.35}}

.checks{list-style:none;margin-top:30px;display:grid;gap:14px}
.checks li{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:center;color:#D7DCEC;font-size:16px}
.checks b{color:#fff}
.checks li i{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);position:relative;transition:background .35s,border-color .35s}
.checks li i::after{content:"";position:absolute;left:9px;top:5px;width:7px;height:13px;border:solid #07251A;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.checks li.on i{background:#4ADE9B;border-color:#4ADE9B}
.checks li.on i::after{transform:rotate(45deg) scale(1)}
.home .night .fine{color:#9AA4C2}

/* ───────────── progress ───────────── */
.progGrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.progArt{display:grid;gap:16px}
.weekCard,.pathCard{background:#141D30;color:#F3F6FC;border-radius:26px;padding:22px 22px 24px;box-shadow:0 26px 60px rgba(20,29,48,.25)}
.wcHead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wcHead b{font-family:var(--display);font-size:18px}.wcHead span{color:#B3BCD2;font-size:13px}
.weekRings{display:flex;justify-content:space-between;margin-top:18px}
.wr{display:grid;justify-items:center;gap:8px;font-size:12px;color:#8C98B4}
.wr i{width:38px;height:38px;border-radius:50%;border:4px solid #24324F;position:relative}
.wr.today i{border-color:#FFB547}
.wr.rest i{border-style:dashed;border-color:#8FA3FF}
.wr.done i{transition:background .35s,border-color .35s}
.wr.done i::after{content:"";position:absolute;left:11px;top:6px;width:7px;height:13px;border:solid #07251A;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.wr.done.on i{background:#4ADE9B;border-color:#4ADE9B}
.wr.done.on i::after{transform:rotate(45deg) scale(1)}
.path{display:flex;align-items:center;margin-top:20px}
.path .n{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;background:#24324F;color:#8C98B4;transition:background .4s,color .4s,transform .4s}
.path .n.on{background:#4ADE9B;color:#07251A}
.path .n.cur{background:#FFB547;color:#2B1800}
.path .seg{flex:1;height:4px;background:#24324F;border-radius:4px;position:relative;overflow:hidden}
.path .seg::after{content:"";position:absolute;inset:0;background:#4ADE9B;transform:scaleX(0);transform-origin:left;transition:transform .8s ease}
.path .seg.half::after{background:linear-gradient(90deg,#4ADE9B,#FFB547)}
.progArt.seen .path .seg.on::after{transform:scaleX(1)}
.progArt.seen .path .seg.half::after{transform:scaleX(.5)}
.progArt.live .path .n.cur{animation:beat 1.8s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,181,71,.5)}50%{transform:scale(1.12);box-shadow:0 0 0 10px rgba(255,181,71,0)}}

/* ───────────── squad ───────────── */
.squadGrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.squadArt{position:relative;height:340px;border-radius:32px;overflow:hidden;
  background:radial-gradient(70% 70% at 30% 20%,#FFE3D1,transparent 60%),radial-gradient(60% 60% at 80% 80%,#E8DDFF,transparent 60%),#FFF1E6}
.av{position:absolute;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:24px;color:#fff;box-shadow:0 14px 30px rgba(46,30,90,.2);border:4px solid #fff}
.a1{left:14%;top:18%;background:linear-gradient(135deg,#FFB547,#FF6B5B)}
.a2{right:16%;top:12%;background:linear-gradient(135deg,#8B5CF6,#EC4899)}
.a3{left:22%;bottom:16%;background:linear-gradient(135deg,#06B6D4,#3E7BE8)}
.a4{right:20%;bottom:22%;background:linear-gradient(135deg,#10B981,#06B6D4)}
.live .av{animation:float 5s ease-in-out infinite}.live .a2{animation-delay:-1.2s}.live .a3{animation-delay:-2.5s}.live .a4{animation-delay:-3.6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cheer{position:absolute;left:50%;padding:9px 14px;border-radius:16px 16px 16px 4px;background:#fff;color:var(--ink);font-weight:700;font-size:14px;
  box-shadow:0 12px 26px rgba(46,30,90,.14);white-space:nowrap;opacity:0;translate:-50% 0}
.ch1{top:40%}.ch2{top:56%}.ch3{top:24%}
.live .cheer{animation:cheer 7.5s ease-in-out infinite}.live .ch2{animation-delay:2.5s}.live .ch3{animation-delay:5s}
@keyframes cheer{0%{opacity:0;transform:translateY(20px) scale(.9)}8%,26%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-24px)}}

/* ───────────── get ───────────── */
.getBand{text-align:center;border-radius:40px;padding:clamp(48px,7vw,88px) 28px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#33206A 0%,#86357F 35%,#FF6B5B 70%,#FFB547 100%);background-size:200% 200%;animation:band 14s ease-in-out infinite alternate}
@keyframes band{to{background-position:100% 50%}}
.getBand h2{margin:0 auto;color:#fff}
.getBand p{margin:16px auto 0;max-width:46ch;font-size:18px;color:rgba(255,255,255,.88)}
.getBand .dawnCta{opacity:1;animation:none;margin-top:30px}
.getFine{font-size:14px!important}
.getFine a{color:#fff;font-weight:700;text-decoration:underline}

/* faq + guides on the home page */
.home .faqs{max-width:820px}
.home .faq summary::after{color:#D9480F}

/* ───────────── responsive ───────────── */
@media(max-width:960px){
  .dawnGrid{grid-template-columns:1fr;text-align:center;min-height:0}
  .dawnCopy{margin:0 auto;padding-bottom:0}
  .dawnSub{margin-left:auto;margin-right:auto}
  .dawnCta{justify-content:center}
  .stage{height:560px;margin-top:10px}
  .steps{grid-template-columns:1fr 1fr;row-gap:44px}
  .steps::before{display:none}
  .taskGrid{grid-template-columns:1fr 1fr}
  .readyGrid,.progGrid,.squadGrid{grid-template-columns:1fr;gap:40px}
  .squadGrid .squadArt{order:2}
  .facts{grid-template-columns:1fr;gap:18px}
}
@media(max-width:560px){
  .stage{height:500px}
  .chip{font-size:12px;padding:7px 11px 7px 8px}
  .chip svg{width:18px;height:18px}
  .taskGrid{grid-template-columns:1fr}
  .task:first-child{grid-column:auto}
  .steps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .dawn .hl,.dawnSub,.dawnCta,.dawnFine{opacity:1;transform:none;animation:none}
  .sun{animation:none}.sun .ring{display:none}
  .steps::before{transform:scaleX(1)}
  .checks li i{background:#4ADE9B;border-color:#4ADE9B}.checks li i::after{transform:rotate(45deg) scale(1)}
  .art-task .ans,.lAlarm{opacity:1;transform:none}.lTime{opacity:1}
  .art-up .tick{stroke-dashoffset:0}
  .wr.done i{background:#4ADE9B;border-color:#4ADE9B}.wr.done i::after{transform:rotate(45deg) scale(1)}
  .progArt .path .seg.on::after{transform:scaleX(1)}
}

/* ───────── hero showcase: the other six screens ───────── */
.stageCol{display:flex;flex-direction:column;align-items:center}
/* Alarms */
.hGreet{margin-top:12px;font-size:11px;color:#B3BCD2}.hName{font-family:var(--display);font-size:20px;font-weight:800}
.hHero{margin-top:10px;background:#1B2640;border-radius:18px;padding:12px}
.hNext{font-size:10px;font-weight:700;color:#FFB547}
.hTime{font-family:var(--display);font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:4px}
.hTime small,.hOther small{font-size:13px;color:#B3BCD2;margin-left:4px;letter-spacing:0;font-weight:700}
.hDays{display:flex;gap:4px;margin-top:8px}
.hDays i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:8px;font-weight:800;background:#24324F;color:#8C98B4}
.hDays i.on{background:#3B2A12;color:#FFB547}
.hRow{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;color:#B3BCD2}
.hRow b{background:#24324F;color:#F3F6FC;border-radius:99px;padding:5px 10px;font-size:10.5px}
.hReady{margin-top:10px;padding-top:9px;border-top:1px solid #26324A;font-size:10.5px;display:flex;align-items:center;gap:6px}
.hReady em{width:7px;height:7px;border-radius:50%;background:#4ADE9B}
.hOther{margin-top:6px;background:#141D30;border-radius:14px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:700;font-size:20px}
.hSec{margin-top:10px;font-size:10px;font-weight:700;color:#B3BCD2}
.hOther em{display:block;font-family:var(--text);font-style:normal;font-size:9.5px;font-weight:600;color:#B3BCD2;letter-spacing:0}
.hOther.off span{font-weight:500}
.hOther.off .hTog{background:#24324F}.hOther.off .hTog::after{right:auto;left:3px;background:#8C98B4}
.hFab{align-self:flex-end;margin-top:auto;margin-bottom:8px;background:#FFB547;color:#2B1800;font-weight:800;font-size:11px;padding:8px 12px;border-radius:12px}
.hTog{width:30px;height:18px;border-radius:99px;background:#FFB547;position:relative}
.hTog::after{content:"";position:absolute;right:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#2B1800}
.pTabs{display:flex;justify-content:space-around;font-size:9.5px;color:#8C98B4;font-weight:700;padding-top:8px;border-top:1px solid #1B2640}
.pTabs .on{color:#FFB547}
/* Wake task */
.tStep{margin-top:12px;font-size:11px;color:#B3BCD2}
.tDots{display:flex;align-items:center;gap:0;margin-top:8px}
.tDots i{width:16px;height:16px;border-radius:50%;background:#24324F;flex:none}.tDots i.on{background:transparent;border:2px solid #FFB547}
.tDots b{flex:1;height:2px;background:#26324A}
.tHead{margin-top:0;font-family:var(--display);font-weight:800;font-size:16px}
.tSum{margin-top:8px;font-family:var(--display);font-weight:800;font-size:32px;text-align:center}
.tAns{margin:8px auto 0;width:120px;height:38px;border-radius:12px;border:1.5px solid #FFB547;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:22px;gap:1px}
.tAns span{opacity:0}.tAns i{width:2px;height:20px;background:#FFB547;animation:caret 1s steps(1) infinite}
.s-task.on .tk.on .d1{animation:digit .01s 1s forwards}.s-task.on .tk.on .d2{animation:digit .01s 1.7s forwards}
@keyframes digit{to{opacity:1}}
.tPad{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.tPad i{font-style:normal;text-align:center;padding:7px 0;border-radius:9px;background:#141D30;font-weight:700;font-size:13px}
.tPad i.ok{background:#3B2A12;color:#FFB547}
.s-task.on .tk.on .tPad .hit{animation:press .35s ease 1s}.s-task.on .tk.on .tPad .hit2{animation:press .35s ease 1.7s}.s-task.on .tk.on .tPad .ok{animation:press .35s ease 2.4s}
@keyframes press{50%{background:#FFB547;color:#2B1800;transform:scale(.92)}}
/* You're up */
.dTick{margin:22px auto 0;width:64px;height:64px;border-radius:50%;background:#113528;display:grid;place-items:center}
.dTick svg{width:34px;height:34px;fill:none;stroke:#4ADE9B;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.s-done.on .dTick svg{animation:draw .6s ease .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.s-done.on .dTick{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.5)}}
.dHead{margin-top:14px;text-align:center;font-family:var(--display);font-weight:800;font-size:22px}
.dMeta{text-align:center;color:#B3BCD2;font-size:11px;margin-top:4px}
.dTiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px}
.dTiles span{background:#141D30;border-radius:12px;padding:8px 6px;font-size:9.5px;color:#B3BCD2;text-align:center}
.dTiles b{display:block;font-family:var(--display);font-size:20px;color:#F3F6FC}.dTiles b.fl{color:#FFB547}
.dNext{margin-top:12px;background:#141D30;border-radius:12px;padding:9px 11px;font-size:11px;color:#B3BCD2}
.s-done .pBtn{margin-top:auto}
/* Progress */
.gTitle{margin-top:12px;font-family:var(--display);font-weight:800;font-size:20px}
.gLine{margin-top:6px;font-size:12px;line-height:1.35}.gLine b{color:#FFB547;font-weight:700}
.gCard{margin-top:10px;background:#1B2640;border-radius:14px;padding:10px 10px 12px}
.gHead{display:flex;justify-content:space-between;font-size:10.5px}.gHead span{color:#B3BCD2}
.gRings{display:flex;justify-content:space-between;margin-top:9px}
.gRings i{width:22px;height:22px;border-radius:50%;border:3px solid #24324F}
.gRings i.d{border-color:#4ADE9B;background:#113528}.gRings i.t{border-color:#FFB547}.gRings i.r{border-style:dashed;border-color:#8FA3FF}
.s-prog.on .gRings i.d{animation:pop .45s cubic-bezier(.3,1.6,.5,1) backwards}
.s-prog.on .gRings i:nth-child(2){animation-delay:.12s}.s-prog.on .gRings i:nth-child(3){animation-delay:.24s}.s-prog.on .gRings i:nth-child(4){animation-delay:.36s}
.gPath{display:flex;align-items:center;margin-top:10px}
.gPath i{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;font-size:8.5px;font-weight:800;background:#24324F;color:#8C98B4}
.gPath i.d{background:#4ADE9B;color:#07251A}.gPath i.c{background:#FFB547;color:#2B1800}
.gPath s{flex:1;height:3px;background:#24324F;text-decoration:none}.gPath s.d{background:#4ADE9B}.gPath s.h{background:linear-gradient(90deg,#4ADE9B 50%,#24324F 50%)}
.gHabit{margin-top:10px;background:#141D30;border-radius:12px;padding:9px 11px;font-size:11.5px;display:flex;align-items:center;gap:8px}
.gHabit em{width:15px;height:15px;border-radius:5px;background:#4ADE9B}
/* Squad */
.qSub{margin-top:4px;font-size:11px;color:#B3BCD2}
.qRow{margin-top:8px;display:flex;align-items:center;gap:9px;background:#141D30;border-radius:12px;padding:8px 9px}
.qRow i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11px;color:#fff;flex:none}
.qRow .a1{background:linear-gradient(135deg,#FFB547,#FF6B5B)}.qRow .a2{background:linear-gradient(135deg,#8B5CF6,#EC4899)}
.qRow .a3{background:linear-gradient(135deg,#06B6D4,#3E7BE8)}.qRow .a4{background:linear-gradient(135deg,#10B981,#06B6D4)}
.qRow span{flex:1;font-size:11.5px;font-weight:700;line-height:1.2}.qRow small{display:block;font-weight:500;color:#B3BCD2;font-size:9.5px}
.qRow em{font-style:normal;font-size:9.5px;font-weight:800;padding:4px 8px;border-radius:99px;background:#24324F;color:#B3BCD2}
.qRow em.up{background:#113528;color:#4ADE9B}
.s-squad.on .qRow{animation:slidein .45s ease backwards}
.s-squad.on .qRow:nth-of-type(2){animation-delay:.1s}.s-squad.on .qRow:nth-of-type(3){animation-delay:.2s}.s-squad.on .qRow:nth-of-type(4){animation-delay:.3s}
@keyframes slidein{from{opacity:0;transform:translateY(10px)}}
.qCheer{text-align:center;font-size:11px;color:#FFDDB0;background:#3B2A12;border-radius:12px;padding:9px}
/* Phone setup */
.rTop{margin-top:12px;background:#1B2640;border-radius:14px;padding:11px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:9px}
.rOk{width:26px;height:26px;border-radius:8px;background:#113528;display:grid;place-items:center;flex:none}
.rOk svg{width:16px;height:16px;fill:none;stroke:#4ADE9B;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rItem{margin-top:7px;display:flex;align-items:center;gap:9px;background:#141D30;border-radius:12px;padding:9px 10px;font-size:11.5px}
.rItem b{margin-left:auto;font-size:10px;color:#B3BCD2}
.rItem em{width:16px;height:16px;border-radius:50%;border:2px solid #3D4C6B;flex:none;position:relative}
.s-ready.on .rItem em{animation:check .3s ease forwards}
.s-ready.on .rItem:nth-of-type(4) em{animation-delay:.25s}.s-ready.on .rItem:nth-of-type(5) em{animation-delay:.5s}.s-ready.on .rItem:nth-of-type(6) em{animation-delay:.75s}.s-ready.on .rItem:nth-of-type(7) em{animation-delay:1s}.s-ready.on .rItem:nth-of-type(8) em{animation-delay:1.25s}.s-ready.on .rItem:nth-of-type(9) em{animation-delay:1.5s}
@keyframes check{to{background:#4ADE9B;border-color:#4ADE9B}}
.rTest{margin-top:auto;text-align:center;font-weight:800;font-size:12px;padding:10px;border-radius:14px;background:#3B2A12;color:#FFDDB0}

/* feature switcher under the phone */
.feats{position:relative;z-index:4;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:-6px;max-width:560px}
.feats button{position:relative;overflow:hidden;font:inherit;cursor:pointer;border:1px solid rgba(255,255,255,.22);
  background:rgba(19,13,51,.35);backdrop-filter:blur(10px);color:rgba(255,255,255,.82);border-radius:99px;padding:8px 14px;
  font-size:13px;font-weight:700;transition:background .25s,color .25s,border-color .25s}
.feats button span{display:none}
.feats button:hover{background:rgba(255,255,255,.16);color:#fff}
.feats button[aria-selected="true"]{background:#fff;color:var(--night);border-color:#fff}
.feats button i{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#FFB547,#FF6B5B)}
.feats button[aria-selected="true"] i{animation:featbar var(--dwell,4.2s) linear forwards}
.feats.paused button i{animation-play-state:paused}
@keyframes featbar{to{width:100%}}
.featNow{margin-top:12px;font-size:14px;color:rgba(255,255,255,.85);text-align:center;min-height:21px}
@media(max-width:560px){.feats{gap:6px}.feats button{font-size:12px;padding:7px 11px}}
@media(prefers-reduced-motion:reduce){.feats button i{display:none}.scr{transition:none}.tAns span,.rItem em{opacity:1}
  .dTick svg{stroke-dashoffset:0}.rItem em{background:#4ADE9B;border-color:#4ADE9B}}

.dNext{background:none;padding:0;margin-top:14px;font-weight:700;color:#B3BCD2}
.gHabit em.no{background:transparent;border:2px solid #3D4C6B}
.s-done .gHabit{margin-top:6px}
.gTiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.gTiles span{background:#141D30;border-radius:10px;padding:6px;font-size:9px;color:#B3BCD2;text-align:center}
.gTiles b{display:block;font-family:var(--display);font-size:16px;color:#F3F6FC}.gTiles b.fl{color:#FFB547}
.s-prog .gHabit{margin-top:6px}
.qPost{margin-top:12px;display:flex;gap:9px;align-items:flex-start;background:#1B2640;border-radius:12px;padding:9px}
.qPost i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:10px;color:#fff;flex:none;background:linear-gradient(135deg,#FFB547,#FF6B5B)}
.qPost span{font-size:11px;line-height:1.3}.qPost small{display:block;color:#B3BCD2;font-size:9.5px}
.qCheer{margin-top:8px}
.rLast{margin-top:12px;font-size:11px;color:#B3BCD2;display:flex;justify-content:space-between;padding:0 2px}
.rLast b{color:#4ADE9B;font-weight:700}
.dSquad{margin-top:12px;display:flex;align-items:center;font-size:11px;color:#B3BCD2;white-space:nowrap}
.dSquad i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:9px;color:#fff;margin-right:-6px;border:2px solid #0E1626;background:linear-gradient(135deg,#FFB547,#FF6B5B)}
.dSquad i:nth-child(2){background:linear-gradient(135deg,#8B5CF6,#EC4899)}.dSquad i:nth-child(3){background:linear-gradient(135deg,#06B6D4,#3E7BE8);margin-right:8px}

/* wake task stage: one panel per orbit chip */
.tStage{position:relative;flex:1;margin-top:12px}
.tk{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.tk.on{opacity:1;transform:none}
.kHint{text-align:center;font-size:11px;color:#B3BCD2;margin-top:10px}
.kTop{margin-top:6px;text-align:left}
/* speak */
.kQuote{margin-top:14px;background:#1B2640;border-radius:14px;padding:14px 12px;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.3;color:#5E6B88}
.s-task.on .tk.on .kQuote span{animation:said .25s ease forwards}
.kQuote span:nth-child(2){animation-delay:.55s!important}.kQuote span:nth-child(3){animation-delay:.9s!important}.kQuote span:nth-child(4){animation-delay:1.25s!important}.kQuote span:nth-child(5){animation-delay:1.6s!important}.kQuote span:nth-child(6){animation-delay:1.95s!important}
.kQuote span:nth-child(1){animation-delay:.2s!important}
@keyframes said{to{color:#F3F6FC}}
.kWave{margin-top:auto;display:flex;justify-content:center;align-items:center;gap:4px;height:40px}
.kWave i{width:4px;height:8px;border-radius:2px;background:#FFB547}
.s-task.on .tk.on .kWave i{animation:wave .7s ease-in-out infinite alternate}
.kWave i:nth-child(3n){animation-delay:-.2s!important}.kWave i:nth-child(3n+1){animation-delay:-.45s!important}.kWave i:nth-child(4n){animation-duration:.5s!important}
@keyframes wave{to{height:34px}}
.kMic{margin:10px auto 0;width:52px;height:52px;border-radius:50%;background:#FFB547;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(255,181,71,.5)}
.kMic svg{width:24px;height:24px;fill:none;stroke:#2B1800;stroke-width:2.2;stroke-linecap:round}
.s-task.on .tk.on .kMic{animation:mic 1.4s ease-out infinite}
@keyframes mic{to{box-shadow:0 0 0 16px rgba(255,181,71,0)}}
/* shake */
.kPhone{margin:20px auto 0;width:46px;height:80px;border-radius:10px;border:3px solid #8FA3FF;position:relative}
.kPhone i{position:absolute;left:50%;bottom:6px;width:12px;height:3px;margin-left:-6px;border-radius:2px;background:#8FA3FF}
.s-task.on .tk.on .kPhone{animation:shk 2.6s ease-in-out}
@keyframes shk{0%,6%{transform:rotate(0)}8%,16%,24%,32%{transform:rotate(-14deg) translateX(-4px)}12%,20%,28%,36%{transform:rotate(14deg) translateX(4px)}40%,62%{transform:rotate(0)}64%,72%,80%,88%{transform:rotate(-14deg) translateX(-4px)}68%,76%,84%,92%{transform:rotate(14deg) translateX(4px)}96%,100%{transform:rotate(0)}}
.kMeter{margin-top:22px;height:12px;border-radius:99px;background:#24324F;overflow:hidden}
.kMeter i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#8B5CF6,#FFB547)}
.s-task.on .tk.on .kMeter i{animation:meter 2.6s linear forwards}
@keyframes meter{0%{width:4%}38%{width:55%}62%{width:55%}100%{width:100%}}
.kPhase{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;font-weight:800;color:#5E6B88}
.s-task.on .tk.on .kPhase .p1{animation:ph 1s steps(1) 0s 1 both}
.s-task.on .tk.on .kPhase .p2{animation:ph .65s steps(1) 1s 1 both;}
.s-task.on .tk.on .kPhase .p3{animation:ph 1s steps(1) 1.65s 1 both}
@keyframes ph{0%{color:#FFB547}100%{color:#5E6B88}}
.tk-shake .kHint{margin-top:auto}
/* type */
.kTarget{margin-top:14px;font-size:12px;color:#B3BCD2}
.kField{margin-top:8px;min-height:40px;border-radius:12px;border:1.5px solid #FFB547;padding:10px 11px;font-weight:700;font-size:14px;display:flex;align-items:center;flex-wrap:wrap}
.kField span{opacity:0;white-space:pre}
.s-task.on .tk.on .kField span{animation:digit .01s forwards}
.kField::after{content:'';width:2px;height:16px;background:#FFB547;animation:caret 1s steps(1) infinite}
.kKeys{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.kKeys div{display:flex;justify-content:center;gap:3px}
.kKeys i{flex:1;max-width:19px;height:24px;border-radius:5px;background:#1B2640}
.kKeys b{width:60%;height:22px;border-radius:5px;background:#1B2640}
.kKeys i.hit{animation:press .18s ease}
/* memory */
.kGrid{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kGrid i{aspect-ratio:1;border-radius:9px;background:#1B2640}
.s-task.on .tk.on .kGrid .m1{animation:flash .35s ease .3s,tap .3s ease 1.75s forwards}
.s-task.on .tk.on .kGrid .m2{animation:flash .35s ease .65s,tap .3s ease 2.0s forwards}
.s-task.on .tk.on .kGrid .m3{animation:flash .35s ease 1.0s,tap .3s ease 2.25s forwards}
.s-task.on .tk.on .kGrid .m4{animation:flash .35s ease 1.35s,tap .3s ease 2.5s forwards}
@keyframes flash{50%{background:#FFB547;transform:scale(1.06)}}
@keyframes tap{from{transform:scale(.9)}to{background:#4ADE9B}}
/* walk */
.kRing{margin:16px auto 0;width:150px;height:150px;position:relative}
.kRing svg{width:100%;height:100%;transform:rotate(-90deg)}
.kRing circle{fill:none;stroke:#24324F;stroke-width:9}
.kRing circle.f{stroke:#EC4899;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264}
.s-task.on .tk.on .kRing circle.f{animation:ring 2.4s ease-out forwards}
@keyframes ring{to{stroke-dashoffset:0}}
.kRing div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.kRing b{font-family:var(--display);font-weight:800;font-size:34px;line-height:1}
.kRing span{font-size:10.5px;color:#B3BCD2;margin-top:4px}
.tk-walk .kHint{margin-top:auto}
/* scan */
.kSteps{margin-top:10px;align-self:flex-start;font-size:10.5px;font-weight:800;padding:5px 10px;border-radius:99px;background:#113528;color:#4ADE9B}
.kView{margin:14px auto 0;width:150px;height:150px;position:relative;border-radius:16px;background:#141D30;overflow:hidden}
.kView::before{content:'';position:absolute;inset:10px;border-radius:10px;
  background:linear-gradient(#06B6D4,#06B6D4) 0 0/22px 3px,linear-gradient(#06B6D4,#06B6D4) 0 0/3px 22px,
  linear-gradient(#06B6D4,#06B6D4) 100% 0/22px 3px,linear-gradient(#06B6D4,#06B6D4) 100% 0/3px 22px,
  linear-gradient(#06B6D4,#06B6D4) 0 100%/22px 3px,linear-gradient(#06B6D4,#06B6D4) 0 100%/3px 22px,
  linear-gradient(#06B6D4,#06B6D4) 100% 100%/22px 3px,linear-gradient(#06B6D4,#06B6D4) 100% 100%/3px 22px;background-repeat:no-repeat}
.kView .qr{position:absolute;inset:38px;border-radius:4px;
  background:conic-gradient(#C9D3E6 25%,#141D30 0 50%,#C9D3E6 0 75%,#141D30 0) 0 0/12px 12px;opacity:.85}
.kView .line{position:absolute;left:14px;right:14px;top:14px;height:2px;background:#06B6D4;box-shadow:0 0 12px 3px rgba(6,182,212,.6)}
.s-task.on .tk.on .kView .line{animation:scanl 1.1s ease-in-out 2 alternate}
@keyframes scanl{to{top:calc(100% - 16px)}}
.kView b{position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 3px #4ADE9B;opacity:0}
.s-task.on .tk.on .kView b{animation:digit .01s 2.25s forwards}
.kMatch{margin-top:auto;text-align:center;font-size:11.5px;font-weight:800;padding:9px;border-radius:12px;background:#113528;color:#4ADE9B;opacity:0}
.s-task.on .tk.on .kMatch{animation:appear .35s ease 2.3s forwards}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* orbit chip linked to the phone: the docked one opens into a callout card */
.chip{pointer-events:auto;cursor:pointer;transition:padding .45s cubic-bezier(.2,.8,.2,1),font-size .45s,box-shadow .45s,filter .45s}
.chip:focus-visible{outline:3px solid #fff;outline-offset:3px}
.chip .cTxt{display:flex;flex-direction:column;line-height:1.15}
.chip small{display:block;max-height:0;max-width:0;overflow:hidden;opacity:0;font-size:12.5px;font-weight:500;color:#4A4466;
  transition:max-height .45s,max-width .45s,opacity .3s .15s}
.chip svg{transition:width .45s,height .45s,padding .45s}
.chip.dock{padding:13px 22px 13px 13px;gap:13px;font-size:21px;
  box-shadow:0 0 0 3px var(--tc),0 0 0 9px color-mix(in srgb,var(--tc) 28%,transparent),0 22px 50px rgba(19,13,51,.45)}
.chip.dock svg{width:40px;height:40px;padding:7px}
.chip.dock small{max-height:44px;max-width:170px;opacity:1;margin-top:3px;font-size:13px;line-height:1.25;white-space:normal}
.orbit.focus .chip:not(.dock){opacity:.32!important;filter:blur(1.5px) saturate(.6)}
/* tether: a glowing beam in the task colour, pulses streaming into the phone */
.cBeam{position:absolute;right:100%;top:50%;width:var(--tether,0px);height:5px;margin-top:-2.5px;border-radius:3px;pointer-events:none;display:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 35%,#fff),color-mix(in srgb,var(--tc) 20%,#fff));
  box-shadow:0 0 6px 2px var(--tc),0 0 18px 5px color-mix(in srgb,var(--tc) 75%,transparent),0 0 40px 10px color-mix(in srgb,var(--tc) 35%,transparent);
  animation:hum 1.2s ease-in-out infinite}
@keyframes hum{50%{box-shadow:0 0 8px 3px var(--tc),0 0 26px 8px color-mix(in srgb,var(--tc) 85%,transparent),0 0 56px 16px color-mix(in srgb,var(--tc) 45%,transparent)}}
.chip.dock .cBeam{display:block}
.cBeam::after{content:'';position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(90deg,transparent 0 30%,rgba(255,255,255,.75) 45%,transparent 60%) 0 0/200% 100%;animation:shimmer 1.2s linear infinite reverse}
@keyframes shimmer{to{background-position:200% 0}}
/* landing ripple on the phone's edge */
.cBeam::before{content:'';position:absolute;left:-2px;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  border:2.5px solid #fff;box-shadow:0 0 14px 3px var(--tc),inset 0 0 8px var(--tc);animation:land .4s ease-out infinite}
@keyframes land{from{transform:scale(.3);opacity:1}to{transform:scale(3);opacity:0}}
/* comets: white-hot head, coloured tail */
.cBeam b{position:absolute;right:0;top:50%;width:36px;height:11px;margin-top:-5.5px;border-radius:99px;opacity:0;
  background:linear-gradient(90deg,#fff 0 30%,color-mix(in srgb,var(--tc) 40%,#fff) 55%,transparent);box-shadow:0 0 16px 5px var(--tc),0 0 4px 1px #fff;
  animation:comet 1.2s cubic-bezier(.45,0,.75,1) infinite}
.cBeam b:nth-child(2){animation-delay:.4s}.cBeam b:nth-child(3){animation-delay:.8s}
@keyframes comet{0%{transform:translateX(0) scaleX(.4);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateX(calc(14px - var(--tether,0px))) scaleX(1);opacity:0}}
/* the card's icon beats in time with the beam */
.chip.dock svg{animation:beat 1.2s ease-out infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tc) 85%,transparent),0 0 0 0 color-mix(in srgb,var(--tc) 50%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent,0 0 0 26px transparent}}
.phone{transition:box-shadow .5s}
.phone.tasking{box-shadow:0 40px 90px rgba(19,13,51,.55),inset 0 0 0 1.5px rgba(255,255,255,.12),0 0 0 3px var(--tc),0 0 80px -6px var(--tc)}
.phone.tasking .tk.on .tHead{color:color-mix(in srgb,var(--tc) 45%,#fff)}
@media(max-width:560px){.chip.dock{font-size:15px;padding:9px 14px 9px 9px;gap:8px}.chip.dock svg{width:30px;height:30px;padding:5px}.chip.dock small{display:none}}
@media(prefers-reduced-motion:reduce){.tk{transition:none}.kQuote span{color:#F3F6FC}.kMeter i{width:100%}.kRing circle.f{stroke-dashoffset:0}.kField span,.kMatch,.kView b{opacity:1}.chip.dock .cBeam b,.cBeam::before,.cBeam::after{display:none}.chip.dock svg,.cBeam{animation:none}}