/* ================= Sonaro public pages, residents, office, candles ================= */
:root{--violet-soft:#ECE8FF;--sticker:0 2px 0 rgba(20,24,58,.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--violet-soft:#2A2552}}
:root[data-theme="dark"]{--violet-soft:#2A2552}

/* header for guests */
body:not(.guest) .g-only{display:none}
body.guest #burger,body.guest #home-link,body.guest #crumb{display:none}
#drawer-foot{display:none}

/* mascots */
.mascot{display:block;width:100%;height:auto;overflow:visible}
.mascot .ms-blink{transform-origin:60px 56px;animation:msblink 5.5s infinite}
.mascot .ms-sweat{animation:mssweat 1.6s ease-in infinite}
.mascot .ms-z{animation:msz 2.4s ease-in-out infinite}
@keyframes msblink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes mssweat{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}
@keyframes msz{0%{transform:translate(0,0);opacity:0}30%{opacity:1}100%{transform:translate(6px,-12px);opacity:0}}

/* ---------- hero: live product demo ---------- */
.hero2 .hero-copy h1{font-size:clamp(38px,5.4vw,64px);letter-spacing:-.025em;line-height:1.02}
.hero2 .lead{max-width:34em}
.demo{position:relative;width:100%;max-width:560px;justify-self:end;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 80px -40px rgba(20,24,58,.45),0 0 0 8px color-mix(in srgb,var(--ultra) 6%,transparent);overflow:visible}
.demo-bar{display:flex;gap:6px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.demo-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.demo-bar i:nth-child(1){background:#FF6B5E}.demo-bar i:nth-child(2){background:#FFC23D}.demo-bar i:nth-child(3){background:#3DCB7A}
.demo-bar span{margin-left:12px;font-size:12px;color:var(--ink-soft);background:var(--paper);padding:3px 12px;border-radius:999px}
.demo-body{display:grid;grid-template-columns:44px minmax(0,1fr);min-height:380px}
.demo-side{background:var(--console);border-radius:0 0 0 22px;display:grid;align-content:start;justify-items:center;gap:12px;padding:14px 0}
.demo-side b{width:22px;height:22px;border-radius:50%;border:3px solid #7B85FF;margin-bottom:6px}
.demo-side i{width:18px;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.demo-side i.on{background:var(--signal)}
.demo-main{padding:14px 16px 16px;display:grid;gap:12px;align-content:start}
.demo-head{display:flex;justify-content:space-between;align-items:center}
.demo-head b{font-family:var(--display);font-size:17px}
.demo-live{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mint-ink);background:var(--mint-soft);padding:3px 10px;border-radius:999px}
.demo-live i{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:live 1.6s ease-in-out infinite}
@keyframes live{50%{opacity:.25}}
.demo-board{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
:is(.demo,.reel-stage) .col{background:var(--paper);border-radius:12px;padding:8px;display:grid;gap:6px;align-content:start}
:is(.demo,.reel-stage) .col>small{font-size:11px;font-weight:600;color:var(--ink-soft)}
:is(.demo,.reel-stage) .col .slot{height:52px;border-radius:9px;border:1.5px dashed transparent;transition:border-color .3s}
:is(.demo,.reel-stage) .tcard{display:grid;gap:1px;background:var(--card);border-radius:9px;padding:7px 9px 7px 11px;box-shadow:inset 3px 0 0 var(--tc),0 1px 2px rgba(20,24,58,.08);font-size:11.5px;line-height:1.3}
:is(.demo,.reel-stage) .tcard b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.demo,.reel-stage) .tcard small{color:var(--ink-soft);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.demo,.reel-stage) .tcard.mover{--tc:var(--coral);position:absolute;top:31px;left:8px;width:calc((100% - 16px)/3 - 16px);height:52px;align-content:center;--col:0;transform:translateX(calc(var(--col) * (100% + 24px))) scale(.6);opacity:0;transition:transform .7s cubic-bezier(.5,0,.2,1.15),opacity .3s,box-shadow .3s;z-index:2}
:is(.demo,.reel-stage) .tc-pm,:is(.demo,.reel-stage) .tc-ok{position:absolute;right:-6px;top:-8px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800;font-style:normal;color:#fff;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
:is(.demo,.reel-stage) .tc-pm{background:var(--ultra)}:is(.demo,.reel-stage) .tc-ok{background:var(--mint);font-size:11px}
.demo-report{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:10px;opacity:.45;transition:opacity .4s}
.dr-head{display:flex;justify-content:space-between;align-items:baseline}
.dr-head b{font-size:14px}.dr-head small{font-size:11.5px;color:var(--ink-soft)}
.dr-bars{display:flex;align-items:flex-end;gap:6px;height:54px}
.dr-bars i{flex:1;height:calc(var(--v) * 100%);border-radius:5px 5px 2px 2px;background:var(--ultra-soft);transform-origin:bottom;transform:scaleY(.15);transition:transform .7s cubic-bezier(.3,1.3,.5,1),background .4s}
.dr-bars i:last-child{background:color-mix(in srgb,var(--ultra) 35%,var(--ultra-soft))}
.dr-text{font-size:13px;min-height:2.7em;line-height:1.35}
.caret{display:inline-block;width:2px;height:1em;background:var(--ultra);vertical-align:-2px;margin-left:1px;animation:live 1s steps(1) infinite;opacity:0}
.demo-toast{position:absolute;right:-22px;top:64px;display:flex;gap:10px;align-items:center;background:var(--deep);color:var(--on-deep);border-radius:14px;padding:10px 14px;box-shadow:0 18px 30px -12px rgba(20,24,58,.5);font-size:13px;line-height:1.3;opacity:0;transform:translateY(-12px) scale(.95);transition:opacity .35s,transform .45s cubic-bezier(.3,1.4,.5,1);z-index:3}
.demo-toast b{display:block;font-size:12px;color:var(--on-deep-soft);font-weight:600}
.demo-toast .dot{width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(240,83,58,.25)}
/* steps */
.demo[data-step="1"] .demo-toast,.demo[data-step="2"] .demo-toast{opacity:1;transform:none}
.demo[data-step="1"] .col:first-child .slot{border-color:var(--line-strong)}
.demo[data-step="2"] .mover,.demo[data-step="3"] .mover,.demo[data-step="4"] .mover{opacity:1;transform:translateX(calc(var(--col) * (100% + 24px))) scale(1);box-shadow:inset 3px 0 0 var(--tc),0 10px 20px -8px rgba(20,24,58,.35)}
.demo[data-step="3"] .mover{--col:1}.demo[data-step="4"] .mover{--col:2;--tc:var(--mint)}
.demo[data-step="3"] .tc-pm{transform:scale(1)}
.demo[data-step="4"] .tc-ok{transform:scale(1)}
.demo[data-step="4"] .demo-report{opacity:1}
.demo[data-step="4"] .dr-bars i{transform:scaleY(1)}
.demo[data-step="4"] .dr-bars i:nth-child(2){transition-delay:.06s}.demo[data-step="4"] .dr-bars i:nth-child(3){transition-delay:.12s}.demo[data-step="4"] .dr-bars i:nth-child(4){transition-delay:.18s}.demo[data-step="4"] .dr-bars i:nth-child(5){transition-delay:.24s}.demo[data-step="4"] .dr-bars i:nth-child(6){transition-delay:.3s}.demo[data-step="4"] .dr-bars i:nth-child(7){transition-delay:.36s;background:var(--ultra)}
.demo[data-step="4"] .caret{opacity:1}
@media (prefers-reduced-motion:reduce){.demo *{transition:none!important;animation:none!important}}

/* pains reveal: one orchestrated entrance */
.pings .ping{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.pings.in .ping{opacity:1;transform:none}
.pings.in .ping:nth-child(2){transition-delay:.08s}.pings.in .ping:nth-child(3){transition-delay:.16s}.pings.in .ping:nth-child(4){transition-delay:.24s}.pings.in .ping:nth-child(5){transition-delay:.32s}.pings.in .ping:nth-child(6){transition-delay:.4s}

/* feature marquee */
.flow-card{background:var(--deep);color:var(--on-deep);border-radius:var(--r-lg);padding:40px 0 40px 40px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center;overflow:hidden}
.flow-copy h2{font-size:clamp(26px,3vw,36px);margin-bottom:12px}
.flow-copy p{color:var(--on-deep-soft);margin-bottom:22px;max-width:26em}
.marquee{display:grid;gap:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-row{overflow:hidden}
.mq-track{display:flex;gap:10px;width:max-content;animation:mq 38s linear infinite}
.mq-row.rev .mq-track{animation-direction:reverse;animation-duration:44s}
.mq-row:nth-child(3) .mq-track{animation-duration:50s}
.mq-track span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:9px 14px;border-radius:999px;font-size:15px}
.mq-track i{width:8px;height:8px;border-radius:50%}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(-50% - 5px))}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* ---------- pains ---------- */
.pings{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ping{background:var(--card);border-radius:20px;padding:20px 22px 22px;display:grid;gap:10px;align-content:start;border:1px solid var(--line)}
.ping-h{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-soft)}
.ping .from{font-weight:600;color:var(--ink)}
.ping .msg{background:var(--paper);border-radius:14px 14px 14px 4px;padding:9px 13px;font-size:15px;justify-self:start;max-width:100%}
.ping h3{font-size:19px;margin-top:6px}
.ping p{color:var(--ink-soft);font-size:15px}
.ping .fix{color:var(--ink);border-top:1px dashed var(--line-strong);padding-top:10px;margin-top:2px}
.ping .fix b{color:var(--ultra)}

/* ---------- why ---------- */
.why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.why-head{position:sticky;top:96px;display:grid;gap:14px}
.why-head h2{font-size:clamp(32px,4vw,46px)}
.why-head p{color:var(--ink-soft);max-width:26em}
.why-list{list-style:none;margin:0;padding:0;display:grid}
.why-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;padding:20px 0;border-top:1px solid var(--line)}
.why-list li:last-child{border-bottom:1px solid var(--line)}
.why-list b{font-family:var(--display);font-size:19px;font-weight:600;line-height:1.25}
.why-list span{color:var(--ink-soft)}

/* ---------- how ---------- */
.how-hero{text-align:center;padding:56px 0 24px;display:grid;justify-items:center;gap:14px}
.how-hero h1{font-size:clamp(36px,5vw,58px);letter-spacing:-.02em}
.how-hero p{color:var(--ink-soft);max-width:36em}
.seg{display:inline-flex;background:var(--col);border-radius:999px;padding:4px;gap:4px;justify-self:start}
.seg button{border:0;background:none;font:inherit;font-weight:600;font-size:15px;color:var(--ink-soft);padding:8px 18px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(20,24,58,.15)}
.seg button small{font-weight:500;color:var(--mint-ink);margin-left:4px}
.fx-link{border:0;background:none;padding:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.fx-link:hover{text-decoration-color:var(--ultra);color:var(--ultra)}
/* reel */
.reel{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;align-items:start;margin:8px 0 24px}
.reel-ch{list-style:none;margin:0;padding:0;display:grid;gap:4px;position:sticky;top:90px}
.reel-ch button{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:0;background:none;font:inherit;color:var(--ink);padding:10px 12px;border-radius:14px;cursor:pointer}
.reel-ch button:hover{background:var(--col)}
.reel-ch .rn{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--col);color:var(--ink-soft)}
.reel-ch b{display:block;font-size:15.5px;font-weight:600}
.reel-ch small{display:none;color:var(--ink-soft);font-size:13.5px;line-height:1.4;margin-top:2px}
.reel-ch [aria-current="true"]{background:var(--card);box-shadow:0 1px 3px rgba(20,24,58,.1)}
.reel-ch [aria-current="true"] .rn{background:var(--ultra);color:#fff}
.reel-ch [aria-current="true"] small{display:block}
.reel-win{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 40px 80px -46px rgba(20,24,58,.5);overflow:hidden}
.reel-bar{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.reel-prog{flex:1;display:flex;gap:5px}
.reel-prog span{flex:1;height:4px;border-radius:2px;background:var(--col);overflow:hidden}
.reel-prog span i{display:block;height:100%;width:0;background:var(--ultra)}
.reel-prog span.done i{width:100%}
.reel-prog span.now i{animation:rfill 5.2s linear forwards}
.reel-prog.paused span.now i{animation:none;width:100%;opacity:.5}
@keyframes rfill{to{width:100%}}
.reel-pp{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.reel-stage{position:relative;height:400px;background:linear-gradient(var(--paper),var(--card))}
.scene{position:absolute;inset:0;padding:22px 26px;display:grid;gap:14px;align-content:start;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s,transform .45s,visibility 0s .45s}
.scene.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .45s}
.reel-cap{display:grid;gap:4px;padding:16px 22px 20px;border-top:1px solid var(--line)}
.reel-cap b{font-family:var(--display);font-size:20px}
.reel-cap span{color:var(--ink-soft)}
.reel-cap .fx-link{justify-self:start;margin-top:4px;color:var(--ultra)}
/* scene parts */
.sc-head{display:flex;justify-content:space-between;align-items:center}
.sc-head b{font-family:var(--display);font-size:19px}
.pill-s{font-size:12.5px;color:var(--ink-soft);background:var(--col);padding:3px 10px;border-radius:999px}
.pill-s.ok{background:var(--mint-soft);color:var(--mint-ink)}
.sc-alert{display:flex;gap:10px;align-items:center;background:var(--deep);color:var(--on-deep);border-radius:12px;padding:10px 14px;font-size:14px}
.sc-alert i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(240,83,58,.25)}
.scene.on .sc-alert{animation:rpop .5s cubic-bezier(.3,1.4,.5,1) both}
.scene.on .a1{animation-delay:2.4s}.scene.on .a2{animation-delay:2.2s}.scene.on .a3{animation-delay:2.4s}
.sc-rows{display:grid;gap:8px}
.sc-row{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 14px;box-shadow:inset 3px 0 0 var(--c)}
.sc-row b{flex:1;font-weight:600;font-size:15px}.sc-row small{color:var(--ink-soft);font-size:12.5px}
.reel-stage .chk{width:18px;height:18px;border-radius:6px;border:2px solid var(--line-strong);position:relative;flex:none}
.scene.on .sc-row{animation:rin .45s ease-out both}
.scene.on .r1{animation-delay:.15s}.scene.on .r2{animation-delay:.3s}.scene.on .r3{animation-delay:.45s}
.scene.on .r0 .chk{animation:chk .3s 1.4s both}
.scene.on .r0 b{animation:strike .3s 1.5s both}
@keyframes chk{to{background:var(--mint);border-color:var(--mint)}}
@keyframes strike{to{text-decoration:line-through;color:var(--ink-soft)}}
.sc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.reel-stage .st{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.reel-stage .st small{display:block;color:var(--ink-soft);font-size:12.5px}.reel-stage .st b{font-family:var(--display);font-size:24px}
.scene.on .st{animation:rin .45s both}.scene.on .s1{animation-delay:.1s}.scene.on .s2{animation-delay:.2s}.scene.on .s3{animation-delay:.3s}
.sc-budget{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-size:13.5px;color:var(--ink-soft)}
.sc-budget .bar{height:10px;border-radius:5px;background:var(--col);overflow:hidden}
.sc-budget .bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--ultra),#7B85FF)}
.scene.on .sc-budget .bar i{animation:bud 1.4s .6s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes bud{to{width:68%}}
.sc-files{display:flex;gap:8px;flex-wrap:wrap}
.reel-stage .fl{background:var(--ultra-soft);color:var(--ultra);font-size:13px;font-weight:600;padding:6px 12px;border-radius:8px}
.scene.on .fl{animation:rpop .4s cubic-bezier(.3,1.4,.5,1) both}.scene.on .f0{animation-delay:1.6s}.scene.on .f1{animation-delay:1.75s}.scene.on .f2{animation-delay:1.9s}
.sc-board{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;height:120px}
.sc-board .col{background:var(--col);border-radius:12px;padding:8px}
:is(.demo,.reel-stage) .tcard.mv{position:absolute;top:32px;left:8px;width:calc((100% - 20px)/3 - 16px);--tc:var(--amber);animation:mv 3.6s .4s cubic-bezier(.6,0,.2,1) both;padding:10px 12px;font-size:13px}
.scene:not(.on) .tcard.mv{animation:none}
@keyframes mv{0%{transform:translateX(0)}30%,55%{transform:translateX(calc(100% + 26px))}85%,100%{transform:translateX(calc(200% + 52px));box-shadow:inset 3px 0 0 var(--mint),0 8px 16px -6px rgba(20,24,58,.3)}}
.sc-review{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.sc-review .av,.reel-stage .tm .av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:var(--amber)}
.sc-review div{flex:1}.sc-review b{font-size:14px}.sc-review p{font-size:14px;color:var(--ink-soft)}
.btn-acc{background:var(--mint);color:#fff;font-weight:600;font-size:13px;padding:7px 14px;border-radius:999px}
.scene.on .sc-review{animation:rin .45s 1.2s both}
.scene.on .btn-acc{animation:press .4s 2.3s both}
@keyframes press{50%{transform:scale(.88)}100%{transform:scale(1);box-shadow:0 0 0 6px var(--mint-soft)}}
.sc-bars{display:flex;align-items:flex-end;gap:10px;height:130px;padding:0 4px}
.sc-bars i{flex:1;height:calc(var(--v)*100%);border-radius:7px 7px 3px 3px;background:var(--ultra-soft);transform-origin:bottom;transform:scaleY(.1)}
.sc-bars i:last-child{background:var(--ultra)}
.scene.on .sc-bars i{animation:grow .7s cubic-bezier(.3,1.3,.5,1) forwards;animation-delay:calc(var(--i)*.07s)}
@keyframes grow{to{transform:scaleY(1)}}
.sc-type{font-size:16px;line-height:1.5;min-height:4.5em;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.sc-ads{display:flex;gap:12px}
.reel-stage .ad{position:relative;width:96px;height:150px;border-radius:14px;box-shadow:0 10px 20px -10px rgba(20,24,58,.5);overflow:hidden}
.reel-stage .ad i{position:absolute;left:10px;right:10px;height:8px;border-radius:4px;background:rgba(255,255,255,.75)}
.reel-stage .ad i:first-child{bottom:30px;right:30px}.reel-stage .ad i:last-child{bottom:14px}
.scene.on .ad{animation:rin2 .5s cubic-bezier(.3,1.3,.5,1) both}.scene.on .d1{animation-delay:.15s}.scene.on .d2{animation-delay:.3s}
.sc-lines{display:grid;gap:6px}
.reel-stage .ln{display:flex;gap:10px;align-items:center;font-size:14.5px}
.reel-stage .ln i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--ultra)}
.scene.on .ln{animation:rin .4s both}.scene.on .l0{animation-delay:1s}.scene.on .l1{animation-delay:1.3s}.scene.on .l2{animation-delay:1.6s}.scene.on .l3{animation-delay:1.9s}
.sc-chart{width:100%;height:170px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.sc-chart .grid{stroke:var(--line);stroke-width:1;fill:none}
.sc-chart .line{fill:none;stroke:var(--ultra);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.scene.on .sc-chart .line{animation:draw 1.8s .3s ease-out forwards}
.sc-chart .spike{fill:var(--coral);opacity:0;transform-origin:460px 44px}
.scene.on .sc-chart .spike{animation:spk 1.2s 1.7s ease-out both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spk{0%{opacity:0;transform:scale(0)}40%{opacity:1;transform:scale(1.6)}100%{opacity:1;transform:scale(1)}}
.sc-news{display:grid;gap:10px}
.reel-stage .nw{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:4px}
.reel-stage .nw b{font-size:15px;font-weight:600}.reel-stage .nw small{color:var(--mint-ink);font-size:13px;font-weight:600}
.reel-stage .tg{justify-self:start;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px}
.reel-stage .tg.ok{background:var(--mint-soft);color:var(--mint-ink)}.reel-stage .tg.warn{background:var(--amber-soft);color:var(--amber-ink)}
.scene.on .nw{animation:rin .45s both}.scene.on .n1{animation-delay:.25s}.scene.on .n2{animation-delay:.5s}
.sc-team{display:grid;gap:8px}
.reel-stage .tm{display:grid;grid-template-columns:auto minmax(0,1fr) 40%;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 12px}
.reel-stage .tm b{font-size:14.5px}.reel-stage .tm small{display:block;color:var(--ink-soft);font-size:12px}
.reel-stage .load{height:8px;border-radius:4px;background:var(--col);overflow:hidden}
.reel-stage .load i{display:block;height:100%;width:0;border-radius:4px}
.scene.on .tm{animation:rin .4s both}.scene.on .t1{animation-delay:.1s}.scene.on .t2{animation-delay:.2s}.scene.on .t3{animation-delay:.3s}.scene.on .t4{animation-delay:.4s}
.scene.on .load i{animation:ld 1.2s .7s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes ld{to{width:calc(var(--v)*100%)}}
@keyframes rin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rin2{from{opacity:0;transform:translateY(30px) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes rpop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.scene,.scene *{animation:none!important;transition:none!important}.sc-bars i{transform:none}.sc-budget .bar i{width:68%}.reel-stage .load i{width:calc(var(--v)*100%)}.sc-chart .line{stroke-dashoffset:0}.sc-chart .spike{opacity:1}}
@media (max-width:980px){
  .reel{grid-template-columns:1fr}
  .reel-ch{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
  .reel-ch li{flex:none}.reel-ch button{padding:8px 12px;align-items:center}.reel-ch small,.reel-ch [aria-current="true"] small{display:none}
}
@media (max-width:640px){
  .reel-stage{height:440px}.scene{padding:16px}
  .sc-stats{grid-template-columns:1fr 1fr}.sc-budget{grid-template-columns:1fr}
  .ad{width:78px;height:120px}.reel-stage .tm{grid-template-columns:auto minmax(0,1fr) 30%}
  .sc-board{height:110px}:is(.demo,.reel-stage) .tcard.mv{font-size:11px;padding:8px}
}
.how-cta{text-align:center;padding:56px 24px;margin:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;justify-items:center}
.how-cta h2{font-size:clamp(28px,3.4vw,40px)}
.how-cta p{color:var(--ink-soft)}
.how-all{padding:40px 0 64px;border-top:1px solid var(--line)}

/* ---------- pricing ---------- */
.pr-hero{text-align:center;padding:56px 0 28px;display:grid;justify-items:center;gap:14px}
.pr-hero h1{font-size:clamp(36px,5vw,58px)}
.pr-hero>p{color:var(--ink-soft);max-width:36em}
.pr-now{background:var(--mint-soft);color:var(--mint-ink);padding:8px 16px;border-radius:999px;font-size:15px}
.pr-seg{justify-self:center}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.pr{position:relative;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px 26px;display:grid;gap:12px;align-content:start}
.pr.hl{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ultra)}
.pr.cur{outline:3px solid var(--mint);outline-offset:3px}
.pr-badge{position:absolute;top:-13px;left:24px;background:var(--ultra);color:#fff;font-size:13px;font-weight:600;padding:4px 12px;border-radius:999px}
.pr h2{font-size:24px}
.pr-who{color:var(--ink-soft);font-size:15px;min-height:2.6em}
.pr-price b{font-family:var(--display);font-size:40px;font-weight:700;letter-spacing:-.02em}
.pr-price span{display:block;color:var(--ink-soft);font-size:14px}
.pr-seats{font-size:14px;color:var(--ink-soft);border-top:1px dashed var(--line-strong);padding-top:10px}
.pr .cta{width:100%}
.pr ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-size:15px}
.pr li{position:relative;padding-left:24px}
.pr li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:5px;border-left:2.5px solid var(--mint);border-bottom:2.5px solid var(--mint);transform:rotate(-45deg)}
.pr-more{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;padding:40px 0 64px;margin-top:40px;border-top:1px solid var(--line)}
.pr-more h3{font-size:18px;margin-bottom:6px}.pr-more p{color:var(--ink-soft);font-size:15px}

/* ---------- auth: plan step ---------- */
.a-plans{display:grid;gap:10px;margin:6px 0 8px}
.a-plan{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;border:1.5px solid var(--line);background:var(--card);border-radius:16px;padding:14px 16px;cursor:pointer;font:inherit;color:var(--ink)}
.a-plan:hover,.a-plan:focus-visible{border-color:var(--ultra)}
.a-plan.hl{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ultra)}
.a-plan-t b{display:block;font-size:17px}.a-plan-t small{color:var(--ink-soft);font-size:13.5px}
.a-plan-p{font-family:var(--display);font-weight:700;font-size:20px;white-space:nowrap;text-align:right}
.a-plan-p small{display:block;font-family:var(--body);font-weight:400;font-size:12px;color:var(--ink-soft)}
.a-chosen{background:var(--ultra-soft);border-radius:12px;padding:8px 12px;font-size:14px;margin:4px 0 10px}
.a-chosen .a-link{display:inline;margin:0 0 0 6px;padding:0}

/* ---------- support chat ---------- */
.help{position:fixed;right:20px;bottom:20px;z-index:60;display:grid;justify-items:end;gap:12px}
.help-fab{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);background:var(--ultra);color:#fff;font:inherit;font-weight:600;font-size:15px;padding:12px 18px 12px 14px;border-radius:999px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.help-fab:hover{background:var(--accent-hover)}
.help-panel{width:min(360px,calc(100vw - 32px));background:var(--card);border:2px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;animation:pop2 .3s cubic-bezier(.3,1.4,.5,1)}
.help-panel[hidden]{display:none}
.help-head{display:flex;gap:10px;align-items:center;padding:14px 14px 12px;background:var(--ultra-soft)}
.help-head b{display:block}.help-head small{color:var(--ink-soft);font-size:13px;line-height:1.35;display:block}
.help-head .x{margin-left:auto;flex:none}
.help-av{width:46px;flex:none}
.help-body{padding:14px;display:grid;gap:10px}
.help-body .cta{width:100%}
.help-body textarea{resize:vertical;min-height:90px}
.help-body[hidden],.help-ok[hidden]{display:none}.help-ok{gap:8px}
.help-panel{max-height:calc(100vh - 110px);overflow-y:auto}
.help-head{position:sticky;top:0;z-index:1}
.help-ok p{color:var(--ink-soft)}
body.lock .help{display:none}
@media (max-width:640px){.help-fab span{display:none}.help-fab{padding:13px}}

/* ---------- trial chip ---------- */
.trial-chip{display:grid;text-align:left;width:100%;border:1px dashed rgba(255,255,255,.28);background:transparent;color:var(--on-console);font:inherit;border-radius:12px;padding:8px 12px;margin-bottom:8px;cursor:pointer}
.trial-chip b{font-size:14px}.trial-chip small{color:var(--on-console-soft);font-size:12.5px}
.trial-chip:hover{border-color:var(--signal)}

/* ---------- office (residents) ---------- */
.hq{--sky:#BFE3FF;--sky2:#E8F5FF;position:relative;max-width:1080px;margin:8px auto 0;padding-top:60px}
.hq.night{--sky:#1B2160;--sky2:#2F3A8C}
.hq-sky{position:absolute;inset:0 0 auto;height:200px;border-radius:28px 28px 0 0;background:linear-gradient(var(--sky),var(--sky2));overflow:hidden}
.hq-sky .sun{position:absolute;right:9%;top:22px;width:46px;height:46px;border-radius:50%;background:#FFD24A;box-shadow:0 0 0 10px rgba(255,210,74,.25)}
.hq.night .sun{background:#F3F0D8;box-shadow:inset -12px -4px 0 #C9C4A3,0 0 0 10px rgba(243,240,216,.12)}
.hq-sky .hcl{position:absolute;height:18px;border-radius:12px;background:#fff;opacity:.9;animation:drift 38s linear infinite}
.hq-sky .hcl::before{content:"";position:absolute;left:20%;top:-10px;width:26px;height:26px;border-radius:50%;background:inherit}
.hq-sky .c1{width:70px;top:30px;left:10%}.hq-sky .c2{width:52px;top:70px;left:55%;animation-duration:52s}
.hq.night .hcl{opacity:.15}
@keyframes drift{from{transform:translateX(-120px)}to{transform:translateX(1100px)}}
.hq-roof{position:relative;margin:0 2%;height:70px;background:var(--console);clip-path:polygon(3% 100%,50% 0,97% 100%);display:grid;place-items:end center;padding-bottom:12px}
.hq-roof span{font-family:var(--display);font-weight:700;color:var(--on-console);font-size:15px;background:var(--console-2);padding:4px 14px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(140,150,255,.35)}
.hq-body{position:relative;margin:0 3%;background:var(--console);padding:0 10px 10px;display:grid;gap:10px;border-radius:0 0 6px 6px}
.hq-floor{display:grid;gap:10px}
.hq-floor.f3{grid-template-columns:1fr 1.4fr}.hq-floor.f2{grid-template-columns:3fr 1fr}.hq-floor.f2:not(:has(.r-free)){grid-template-columns:1fr}.hq-floor.f1{grid-template-columns:1fr 1.1fr 1.25fr}
.room2{position:relative;min-height:210px;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(var(--wall,#EEF1FB) 0 72%,transparent 72%),repeating-linear-gradient(90deg,var(--floorc,#D9C2A2) 0 46px,color-mix(in srgb,var(--floorc,#D9C2A2) 88%,#000) 46px 48px)}
.room2 .win{position:absolute;right:14px;top:12px;width:44px;height:36px;border-radius:6px;background:linear-gradient(var(--sky),var(--sky2));box-shadow:inset 0 0 0 3px #fff,0 0 0 2px rgba(20,24,58,.15)}
.room2 .win::after{content:"";position:absolute;left:50%;top:3px;bottom:3px;width:2px;background:#fff}
.room2-floor{flex:1;display:flex;align-items:flex-end;justify-content:space-evenly;gap:8px;padding:34px 10px 12px;flex-wrap:wrap}
.r-lead{--wall:#ECE8FF}.r-pm{--wall:#FFF0D1}.r-target{--wall:#E1F0FF}.r-sales{--wall:#DFF6EC}.r-kitchen{--wall:#FFE6DF;--floorc:#C9B49A}.r-algo{--wall:#1A2166;--floorc:#11163D;background:#1A2166}.r-free{--wall:var(--col);display:grid;place-items:center}
.r-algo .room-t{background:var(--console-2);color:var(--on-console)}
.r-algo .win{display:none}
.r-kitchen::before{content:"";position:absolute;left:16px;top:40px;width:34px;height:46px;border-radius:6px;background:#5B6070;box-shadow:inset 0 -14px 0 #3E4352,inset 0 6px 0 #7A8090}
.r-target::before{content:"";position:absolute;left:16px;top:38px;width:62px;height:38px;border-radius:4px;background:#fff linear-gradient(135deg,transparent 0 55%,var(--mint) 55% 60%,transparent 60%);box-shadow:0 0 0 3px #B9C0D6}
.r-lead::before{content:"";position:absolute;left:18px;bottom:24%;width:22px;height:46px;border-radius:12px 12px 4px 4px;background:#2BA36F;box-shadow:0 18px 0 -6px #8A5A3C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .room2{--floorc:#3A3150}:root:not([data-theme="light"]) .r-lead{--wall:#2A2752}:root:not([data-theme="light"]) .r-pm{--wall:#3A3018}:root:not([data-theme="light"]) .r-target{--wall:#1B2C4E}:root:not([data-theme="light"]) .r-sales{--wall:#13352A}:root:not([data-theme="light"]) .r-kitchen{--wall:#40231C}}
:root[data-theme="dark"] .room2{--floorc:#3A3150}:root[data-theme="dark"] .r-lead{--wall:#2A2752}:root[data-theme="dark"] .r-pm{--wall:#3A3018}:root[data-theme="dark"] .r-target{--wall:#1B2C4E}:root[data-theme="dark"] .r-sales{--wall:#13352A}:root[data-theme="dark"] .r-kitchen{--wall:#40231C}
.hq-street{height:16px;margin:0 1%;background:#5E6680;border-radius:0 0 10px 10px;box-shadow:inset 0 3px 0 #8A93AE}
.pp2{position:relative;border:0;background:none;cursor:pointer;display:grid;justify-items:center;width:110px;padding:0;color:var(--ink);font:inherit}
.pp2-pet{position:relative;z-index:1;width:84px;margin-bottom:-8px;animation:bob 2.2s ease-in-out infinite;animation-delay:var(--d)}
.pp2 .desk2{position:absolute;bottom:38px;z-index:2;width:84px;height:18px;border-radius:4px 4px 0 0;background:#9C7650;box-shadow:0 4px 0 #7A5A3A}
.pp2 .desk2 i{position:absolute;left:28px;top:-15px;width:28px;height:17px;border-radius:3px 3px 0 0;background:#2D3142;box-shadow:inset 0 0 0 2px #3E4458,0 0 10px rgba(120,160,255,.6)}
.pp2-name{position:relative;z-index:3;font-size:12.5px;font-weight:700;margin-top:2px;white-space:nowrap;background:var(--card);padding:1px 8px;border-radius:999px}
.pp2-say{font-size:11px;color:var(--ink-soft);white-space:nowrap;margin-top:2px}
.r-algo .pp2-say{color:var(--on-console)}
.pp2 .pp-fx{top:-26px;z-index:4}
.pp2:hover .pp2-pet,.pp2:focus-visible .pp2-pet{transform:translateY(-6px) rotate(-4deg);animation:none;transition:transform .2s}
.pp2.st-run{animation:pace 5s ease-in-out infinite alternate}
.pp2.st-run .pp2-pet{animation:run .5s ease-in-out infinite}
.pp2.st-kitchen .pp2-pet{animation:bob 3.2s ease-in-out infinite}
@media (max-width:760px){.hq-floor.f3,.hq-floor.f2,.hq-floor.f1{grid-template-columns:1fr!important}.hq-roof{height:50px}}
@media (prefers-reduced-motion:reduce){.pp2-pet,.pp2.st-run,.hq-sky .hcl{animation:none!important}}

/* ---------- candles ---------- */
.altar{position:relative;background:radial-gradient(ellipse at 50% 85%,rgba(255,170,60,.22),transparent 60%),linear-gradient(#141A4A,#0D1238);color:var(--on-deep);border-radius:var(--r-lg);padding:22px 26px 0;margin-bottom:18px;overflow:hidden;min-height:400px;display:flex;flex-direction:column}
.altar-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.altar-stats{display:flex;gap:28px;flex-wrap:wrap}
.altar-stats span{display:grid}.altar-stats small{color:var(--on-deep-faint);font-size:13px}.altar-stats b{font-family:var(--display);font-size:24px}
.altar-stand{flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:22px 30px;padding:40px 300px 0 10px;position:relative;z-index:1}
.altar-shelf{height:22px;margin:0 -26px;background:linear-gradient(#7A5236,#5A3A24);box-shadow:inset 0 3px 0 #A0704C,0 -1px 0 rgba(0,0,0,.4)}
.altar-algo{position:absolute;right:22px;top:70px;width:270px;display:grid;gap:10px;justify-items:start;z-index:2}
.altar-algo .algo-bubble{max-width:none;width:100%;flex:none;margin:0}
.cd-mantra{font-family:var(--display);font-size:17px;line-height:1.35;font-weight:600;color:#14183A}
.cd-empty{color:var(--on-deep-soft);text-align:center;align-self:center;margin:auto;max-width:22em;padding-bottom:40px}
.cdl2{margin:0;display:grid;justify-items:center;gap:10px;width:120px}
.cdl2-body{position:relative;width:34px;height:calc(var(--h) + 50px);display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.wax{position:relative;width:34px;height:var(--h);border-radius:6px 6px 3px 3px;background:linear-gradient(90deg,#F4E7C8,#FFF8E6 45%,#E6D3AA);box-shadow:inset 0 -6px 0 rgba(0,0,0,.08)}
.wax .drip{position:absolute;left:6px;top:-2px;width:8px;height:18px;border-radius:0 0 6px 6px;background:#FFF8E6}
.wick2{width:2px;height:8px;background:#2B1B12}
.flame2{position:absolute;bottom:calc(var(--h) + 6px);width:18px;height:30px;transform-origin:50% 90%;animation:flick 1.2s ease-in-out infinite alternate;animation-delay:var(--d)}
.flame2::before{content:"";position:absolute;inset:0;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(ellipse at 50% 72%,#fff 0 18%,#FFE07A 30%,#FF9F2E 62%,rgba(255,90,30,.0) 74%)}
.flame2 i{position:absolute;left:6px;bottom:3px;width:6px;height:10px;border-radius:50%;background:#7CC4FF;opacity:.75}
.glow{position:absolute;bottom:calc(var(--h) - 20px);width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,190,90,.35),transparent 65%);animation:glow 2s ease-in-out infinite alternate;pointer-events:none}
.smoke{position:absolute;bottom:calc(var(--h) + 6px);width:8px;height:22px;border-radius:50%;background:rgba(200,205,230,.35);animation:smoke 3s ease-out infinite}
.cdl2.fresh .flame2{animation:ignite .9s cubic-bezier(.3,1.6,.5,1) both,flick 1.2s 0.9s ease-in-out infinite alternate}
.cdl2 figcaption{display:grid;justify-items:center;gap:4px;text-align:center}
.cdl2 figcaption b{font-size:13px;line-height:1.3;font-weight:600;background:#FFF8E6;color:#3A2A14;padding:5px 9px;border-radius:6px;transform:rotate(-1.5deg);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.cdl2 figcaption small{color:var(--on-deep-soft);font-size:12px}
.cdl2 .cdl-act{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;opacity:.0;transition:opacity .2s}
.cdl2:hover .cdl-act,.cdl2:focus-within .cdl-act{opacity:1}
.cdl2 .cdl-act .btn-s{font-size:11.5px;padding:3px 8px;background:rgba(255,255,255,.08);color:var(--on-deep);border-color:rgba(255,255,255,.25)}
.cdl2.out .wax{filter:grayscale(.4) brightness(.8)}
@keyframes flick{0%{transform:scale(1,1) rotate(-2deg)}100%{transform:scale(.92,1.08) rotate(2deg)}}
@keyframes glow{to{opacity:.65;transform:scale(.92)}}
@keyframes smoke{0%{transform:translateY(0) scaleX(1);opacity:.6}100%{transform:translateY(-26px) scaleX(2.2);opacity:0}}
@keyframes ignite{0%{transform:scale(0)}60%{transform:scale(1.4,1.6)}100%{transform:scale(1)}}
.light-panel{display:grid;gap:14px;margin-bottom:18px}
.lp-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cd-tabs{display:flex;flex-wrap:wrap;gap:8px}
.cd-wishes{display:flex;flex-wrap:wrap;gap:8px;min-height:44px}
.lp-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:14px;align-items:end}
.lp-row .field{margin:0}
.lp-row .cta{min-width:150px}
.cd-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:14px}
.wonder{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.wonder>div{flex:1;min-width:0}.wonder b{display:block;font-size:14.5px;line-height:1.3}.wonder small{color:var(--ink-soft);font-size:12.5px}
.w-ic{width:14px;height:24px;flex:none;border-radius:3px;background:linear-gradient(90deg,#F4E7C8,#FFF8E6);position:relative;box-shadow:inset 0 0 0 1px #E0CFA5}
.w-ic::before{content:"";position:absolute;left:3px;top:-12px;width:8px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#FFB13B}
.cd-empty-wall{color:var(--ink-soft)}
@media (max-width:900px){.altar-stand{padding:30px 0 0}.altar-algo{position:relative;right:auto;top:auto;width:auto;margin:18px 0}.altar{padding-bottom:0}.lp-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.flame2,.glow,.smoke{animation:none!important}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .pings{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr;gap:24px}.why-head{position:static}
  .pr-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
}
@media (max-width:760px){
  .pings{grid-template-columns:1fr}
  .why-list li{grid-template-columns:1fr;gap:4px}
  .pr-more{grid-template-columns:1fr}
}

@media (max-width:640px){#how-link,#price-link{display:none}}
@media (max-width:760px){
  .demo{justify-self:center;margin-top:10px}.demo-toast{right:8px;top:52px}.demo-body{grid-template-columns:32px minmax(0,1fr);min-height:340px}.demo-main{padding:12px 10px}
  .tcard{padding:6px 7px 6px 9px;font-size:10.5px}:is(.demo,.reel-stage) .tcard small{font-size:9.5px}
  .flow-card{grid-template-columns:1fr;padding:28px 0 28px 24px}
}
/* candles stand on the shelf, tags above them */
.cdl2 figcaption{order:-1}
.altar-stand{padding-bottom:0;margin-bottom:-2px}
.cdl2-body{margin-top:-6px}
#ts-box{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200}

/* ---------- brief calculations ---------- */
.bf-calc{display:grid;gap:10px;margin-bottom:14px;align-content:start}
.bc-row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-top:1px dashed var(--line)}
.bc-row span{color:var(--ink-soft);font-size:14px}.bc-row b{font-family:var(--display);font-size:16px;text-align:right}
.bc-row small{grid-column:1/-1;font-size:12.5px;color:var(--ink-soft)}
.bc-row.good small{color:var(--mint-ink)}.bc-row.warn small{color:var(--amber-ink)}.bc-row.bad small{color:var(--coral)}
#page-brief .ctl.auto{box-shadow:inset 0 0 0 2px var(--mint-soft);background-image:linear-gradient(90deg,transparent calc(100% - 46px),var(--mint-soft) 0)}
.qc-wrap{position:fixed;inset:0;z-index:120;background:rgba(15,20,64,.35);display:grid;place-items:center;padding:16px}
.qc-wrap[hidden]{display:none}
.qc{width:min(440px,100%);background:var(--card);border-radius:20px;box-shadow:0 30px 60px -20px rgba(15,20,64,.5);overflow:hidden;animation:pop2 .25s ease-out}
.qc-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.qc-head b{font-family:var(--display);font-size:18px}
.qc-body{padding:14px 16px 18px;display:grid;gap:12px}
.qc-tabs{flex-wrap:wrap;border-radius:14px}.qc-tabs button{font-size:13.5px;padding:6px 12px}
.qc-out{font-size:16px;background:var(--paper);border-radius:12px;padding:12px 14px;min-height:3em}
.bf-col{display:grid;gap:14px;align-content:start;position:sticky;top:84px}@media (max-width:840px){.bf-col{position:static}}

/* ---------- agency roles ---------- */
.panel.roles{margin-top:18px}
.rm-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.rm-head h2{margin:0 0 4px}
.rm-wrap{overflow-x:auto;margin-top:12px;border:1px solid var(--line);border-radius:14px}
table.rm{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
table.rm th,table.rm td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.rm tbody tr:last-child>*{border-bottom:0}
table.rm thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.75}
table.rm tbody th{font-weight:600;width:30%}
table.rm .me{background:color-mix(in srgb,var(--ultra) 9%,transparent)}
table.rm thead th.me{opacity:1;color:var(--ultra)}
.rm-y{color:var(--mint-ink);font-weight:700}.rm-n{opacity:.4}
.rm-h3{margin:18px 0 8px;font-size:15px}
.rm-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.rm-p{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
.rm-p b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-sel{width:auto;min-width:130px;padding:6px 8px}
.qc.bin{max-width:560px}
#bin-list{display:grid;gap:8px;max-height:60vh;overflow-y:auto}
.bin-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:12px}
.bin-row .grow{flex:1;min-width:0}.bin-row b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bin-row small{opacity:.65}

/* ---------- lamp login ---------- */
.auth-main{isolation:isolate}
.lamp{position:absolute;top:0;left:50%;width:120px;transform:translateX(-50%);z-index:3;pointer-events:none}
.lamp-wire{display:block;width:2px;height:clamp(14px,6vh,54px);margin:0 auto;background:var(--ink-soft);opacity:.6}
.lamp-shade{display:block;width:120px;height:70px;margin-top:-2px;transform-origin:50% 0;animation:lampSway 6s ease-in-out infinite}
.lamp-bulb{fill:#FFE7A3;transition:fill .3s,filter .3s}
.lamp-glow{position:absolute;left:50%;top:calc(100% - 14px);width:min(560px,90vw);height:min(720px,96vh);transform:translateX(-50%);background:radial-gradient(ellipse 50% 60% at 50% 0,rgba(255,214,120,.38),rgba(255,214,120,.12) 45%,transparent 72%);clip-path:polygon(41% 0,59% 0,100% 100%,0 100%);opacity:0;transition:opacity .5s ease}
.lamp-on .lamp-glow{opacity:1}.lamp-on .lamp-bulb{filter:drop-shadow(0 0 10px #FFD36E) drop-shadow(0 0 24px #FFB21E)}
.lamp-off .lamp-bulb{fill:#6B6F8F}
.lamp-cord{position:absolute;top:0;left:calc(50% + 46px);z-index:4;width:28px;height:calc(clamp(14px,6vh,54px) + 120px + var(--pull,0px));border:0;background:none;padding:0;cursor:grab;touch-action:none;display:flex;flex-direction:column;align-items:center}
.lamp-cord:active{cursor:grabbing}
.lamp-line{flex:1;width:1.5px;background:var(--ink-soft);opacity:.7}
.lamp-knob{width:14px;height:20px;border-radius:7px 7px 9px 9px;background:linear-gradient(#FFC94D,#E8A100);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.lamp-cord:focus-visible .lamp-knob{outline:3px solid var(--ultra);outline-offset:3px}
.lamp-cord.pull{animation:cordPull .55s cubic-bezier(.3,1.6,.5,1)}
.lamp-off::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(8,10,28,.78);transition:opacity .5s}
.lamp-on::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(8,10,28,.78);opacity:0;transition:opacity .5s}
.lamp-off .auth-box{filter:blur(1.5px);transform:scale(.985);transition:filter .5s,transform .5s}
.lamp-on .auth-box{transition:filter .5s,transform .5s}
.lamp-off .auth-x{z-index:3}
.auth-main:has(.lamp){padding-top:170px}
.lamp-tip{position:absolute;left:50%;top:calc(clamp(14px,6vh,54px) + 128px);transform:translateX(-50%);white-space:nowrap;color:#FFE7A3;font-weight:600;font-size:14px;opacity:0;transition:opacity .4s}
.lamp-off .lamp-tip{opacity:1}
.auth-box{position:relative}
@keyframes lampSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes cordPull{0%{transform:translateY(0)}35%{transform:translateY(26px)}100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.lamp-shade,.lamp-cord.pull{animation:none}}
@media (max-width:860px){.lamp,.lamp-cord{display:none}.auth-main.lamp-off::after{display:none}.lamp-off .auth-box{filter:none;transform:none}.auth-main:has(.lamp){padding-top:32px}}

/* ---------- glassy code ---------- */
.otp-glass{position:relative;margin:18px 0 6px;border-radius:22px;overflow:hidden;padding:2px;background:linear-gradient(135deg,rgba(91,102,255,.55),rgba(24,185,138,.4),rgba(255,178,30,.45))}
.og-blob{position:absolute;width:160px;height:160px;border-radius:50%;filter:blur(36px);opacity:.75;animation:ogFloat 9s ease-in-out infinite}
.og-blob.b1{background:#5B66FF;left:-40px;top:-60px}.og-blob.b2{background:#18B98A;right:-40px;bottom:-70px;animation-delay:-4s}
.og-in{position:relative;border-radius:20px;padding:16px 16px 12px;background:color-mix(in srgb,var(--card) 62%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);display:grid;gap:12px;justify-items:center;text-align:center}
.og-in>b{font-family:var(--display);font-size:16px}
.otp{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;width:100%}
.otp-d{flex:1 1 0;min-width:0;max-width:44px;width:44px;height:54px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--ink) 18%,transparent);background:color-mix(in srgb,var(--card) 55%,transparent);text-align:center;font:700 24px/1 var(--display);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 18px -10px rgba(20,24,58,.5);transition:transform .15s,border-color .15s,background .15s}
.otp-d:focus{outline:none;border-color:var(--ultra);transform:translateY(-2px);background:var(--card)}
.otp-d.on{border-color:var(--ultra);animation:otpPop .22s ease-out}
.otp.wait .otp-d{animation:otpWait 1s ease-in-out infinite;animation-delay:calc(var(--k,0)*.08s)}
.otp.ok .otp-d{border-color:var(--mint);background:var(--mint-soft);color:var(--mint-ink)}
.otp.bad{animation:otpShake .4s}.otp.bad .otp-d{border-color:var(--coral)}
.otp-msg{margin:0;min-height:1.2em;font-size:13.5px;color:var(--ink-soft)}
@media (max-width:420px){.otp{gap:5px}.otp-d{width:38px;height:48px;font-size:20px}}
@keyframes otpPop{50%{transform:scale(1.12)}}
@keyframes otpWait{50%{opacity:.45}}
@keyframes otpShake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes ogFloat{50%{transform:translate(30px,20px)}}
@media (prefers-reduced-motion:reduce){.og-blob,.otp-d.on,.otp.bad{animation:none}}

/* ---------- 3D office ---------- */
.of-switch{margin-bottom:14px}
.iso-wrap{border-radius:var(--r-lg);background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--ultra) 14%,var(--card)),var(--paper) 75%);border:1px solid var(--line);padding:18px 16px 14px;overflow:hidden}
.iso-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.iso-hud>div{background:color-mix(in srgb,var(--card) 70%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.iso-hud b{display:block;font:800 22px/1.1 var(--display)}.iso-hud small{color:var(--ink-soft);font-size:12.5px}
.iso-hud .bad b{color:var(--coral)}
.iso-stage{perspective:1600px;display:grid;place-items:center;padding:70px 0 70px;overflow:hidden}
.iso-floor{--tile:150px;transform:rotateX(58deg) rotateZ(-40deg);transform-style:preserve-3d;display:grid;grid-template-columns:repeat(2,auto);gap:26px;padding:26px;border-radius:26px;background:repeating-linear-gradient(0deg,transparent 0 59px,color-mix(in srgb,var(--ultra) 10%,transparent) 59px 60px),repeating-linear-gradient(90deg,transparent 0 59px,color-mix(in srgb,var(--ultra) 10%,transparent) 59px 60px),var(--card);box-shadow:24px 24px 0 -2px color-mix(in srgb,var(--ultra) 22%,var(--paper)),40px 50px 60px rgba(20,24,58,.25)}
.iso-zone{position:relative;transform-style:preserve-3d;padding:22px 12px 12px;border-radius:18px;background:color-mix(in srgb,var(--ultra) 7%,transparent);border:1.5px dashed color-mix(in srgb,var(--ultra) 30%,transparent)}
.iso-zone.z-lead{background:color-mix(in srgb,var(--amber) 12%,transparent)}.iso-zone.z-pm{background:color-mix(in srgb,var(--mint) 10%,transparent)}
.iso-zone.z-kitchen{background:color-mix(in srgb,var(--coral) 9%,transparent)}
.iso-label{position:absolute;left:12px;top:4px;font:700 11px/1.4 var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.iso-row{display:flex;flex-wrap:wrap;gap:14px;max-width:calc(var(--tile)*3 + 28px);transform-style:preserve-3d;min-height:60px}
.iso-desk{position:relative;width:var(--tile);height:var(--tile);border:0;background:none;padding:0;cursor:pointer;transform-style:preserve-3d;font:inherit;color:inherit}
.iso-tile{position:absolute;inset:6px;border-radius:12px;background:var(--card);box-shadow:6px 6px 0 color-mix(in srgb,var(--ink) 12%,transparent);transform-style:preserve-3d;transition:transform .25s}
.iso-table{position:absolute;left:14%;top:14%;width:72%;height:44%;border-radius:8px;background:linear-gradient(135deg,#C9A27A,#A87E55);transform:translateZ(16px);box-shadow:0 0 0 2px rgba(0,0,0,.06)}
.iso-screen{position:absolute;left:20%;top:-2px;width:46%;height:10px;border-radius:3px;background:#1A2166;transform-origin:50% 0;transform:rotateX(-90deg);box-shadow:0 0 14px var(--glow,#5B66FF)}
.iso-cup{position:absolute;right:10%;bottom:16%;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #E8A100}
.iso-desk.t-bad{--glow:var(--coral)}.iso-desk.t-new{--glow:var(--amber)}.iso-desk.t-done{--glow:var(--mint)}
.iso-desk.t-bad .iso-tile{background:color-mix(in srgb,var(--coral) 14%,var(--card))}
.iso-up{position:absolute;left:50%;bottom:46%;transform-origin:50% 100%;transform:translate3d(-50%,0,22px) rotateZ(40deg) rotateX(-58deg);display:grid;justify-items:center;transform-style:preserve-3d;pointer-events:none}
.iso-pet{width:74px;display:block;animation:isoBob 3s ease-in-out infinite;animation-delay:calc(var(--i)*-.4s)}
.iso-pet svg{width:100%;height:auto;display:block}
.iso-tag{margin-top:-4px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:3px 8px;white-space:nowrap;box-shadow:0 6px 14px -8px rgba(20,24,58,.45);text-align:center}
.iso-tag b{display:block;font-size:12px}.iso-tag small{display:block;font-size:10.5px;color:var(--ink-soft)}
.iso-desk.t-bad .iso-tag small{color:var(--coral);font-weight:600}
.iso-desk:hover .iso-tile,.iso-desk:focus-visible .iso-tile{transform:translateZ(10px)}
.iso-desk:focus-visible{outline:none}.iso-desk:focus-visible .iso-tile{box-shadow:0 0 0 3px var(--ultra)}
.iso-plant{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#4FD49E,#13875F);transform:translateZ(24px);box-shadow:0 0 0 6px #C77B4A}
.iso-coffee{width:56px;height:36px;border-radius:8px;background:#2B2F6B;transform:translateZ(18px);box-shadow:inset 0 -8px 0 #1A1E50}
.iso-hint{text-align:center;margin:0}
@keyframes isoBob{50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.iso-pet{animation:none}}
@media (max-width:760px){.iso-hud{grid-template-columns:repeat(2,1fr)}.iso-floor{--tile:92px;grid-template-columns:1fr;transform:rotateX(52deg) rotateZ(-34deg);gap:16px;padding:16px}.iso-up{transform:translate3d(-50%,0,22px) rotateZ(34deg) rotateX(-52deg)}.iso-pet{width:48px}.iso-stage{padding:0 0 30px;margin:-20px 0}}
.role-chip{display:grid;text-align:left;width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--on-console);font:inherit;border-radius:12px;padding:8px 12px;margin-bottom:8px;cursor:pointer}
.role-chip b{font-size:14px}.role-chip small{color:var(--on-console-soft);font-size:12.5px}.role-chip:hover{border-color:var(--signal)}
.qc.rolebox{width:min(760px,100%);max-height:calc(100vh - 32px);overflow-y:auto}
.qc.rolebox .panel.roles{margin:0;padding:0;border:0;box-shadow:none;background:none}