/* SuguCu Studio: the story layer. Moving background, sticky header with reading bar, chapter rail, hero desk loop,
   the Three Jobs scene, the strip and the phone dock. Brand motion: alive, never busy (4-7 s loops, soft overshoot pops).
   Transform and opacity only. Everything still and complete under prefers-reduced-motion or the Pause Motion button. */
:root{--tint:#EEF5F1;--pop:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,.8,.26,1)}
body{background:var(--cream)}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--harbour);color:#fff;padding:10px 14px;border-radius:10px}.skip:focus{top:12px}

/* moving light behind everything (radial gradients, no blur filter: cheap on phones) */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--cream)}
.sky i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.55}
.sky .b1{left:-22vmax;top:-26vmax;background:radial-gradient(circle,rgba(42,157,142,.20),rgba(42,157,142,0) 62%)}
.sky .b2{right:-26vmax;top:8vh;background:radial-gradient(circle,rgba(233,196,107,.26),rgba(233,196,107,0) 60%)}
.sky .b3{left:20vw;bottom:-40vmax;background:radial-gradient(circle,rgba(243,162,97,.16),rgba(243,162,97,0) 60%)}
.sky::after{content:"";position:absolute;inset:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .27 0 0 0 0 .33 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* header: sticky, compact, hides on the way down, back on the way up */
header.top#top{position:sticky;top:0;z-index:40;display:block;padding:0;background:rgba(250,247,240,.82);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:transform .35s var(--ease),border-color .3s}
header.top#top.scrolled{border-bottom-color:rgba(38,70,83,.08)}
header.top#top.away{transform:translateY(-100%)}
.top-in{display:flex;align-items:center;gap:16px;padding-block:14px}
@media (max-width:420px){.top-in{gap:10px}}
.readbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:50;pointer-events:none}
.readbar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--read,0));background:linear-gradient(90deg,var(--teal),var(--gold) 60%,var(--coral))}

/* chapter rail (wide screens) */
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:30;display:none;flex-direction:column;gap:6px;align-items:flex-end}
@media (min-width:1380px){.rail{display:flex}}
.rail a{display:flex;align-items:center;gap:10px;flex-direction:row-reverse;text-decoration:none;color:var(--harbour);font:500 13px/1 var(--head);padding:6px 0}
.rail a i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(38,70,83,.35);transition:transform .3s var(--pop),background .3s}
.rail a span{opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;background:rgba(250,247,240,.9);padding:5px 9px;border-radius:999px}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}
.rail a.on i{transform:scale(1.5);box-shadow:none;background:radial-gradient(circle at 38% 30%,#E66F51 0 11%,#F3A261 11% 26%,#E9C46B 26% 46%,#2A9D8E 46% 100%)}
.rail.dark a{color:var(--on-dark)}.rail.dark a span{background:rgba(29,56,66,.9)}.rail.dark a i{box-shadow:inset 0 0 0 2px rgba(244,241,232,.5)}
.still-toggle{border:0;background:none;color:var(--harbour);font:500 15px/1 var(--head);padding:10px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.still-toggle:hover{background:rgba(38,70,83,.06)}
@media (max-width:1100px){.top nav .still-toggle{display:none}}
.still-toggle.link{margin:0;background:none;padding:0;color:var(--muted);text-decoration:underline;font-size:14px}

/* faint candy rings */
.rings{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;background:repeating-radial-gradient(circle,rgba(230,111,81,.07) 0 2px,transparent 2px 38px,rgba(243,162,97,.07) 38px 40px,transparent 40px 76px,rgba(233,196,107,.09) 76px 78px,transparent 78px 114px,rgba(42,157,142,.08) 114px 116px,transparent 116px 152px)}
.hero-zone{position:relative;overflow:hidden}
.rings.r1{width:1100px;height:1100px;right:-380px;top:-300px}

/* hero */
.hero{padding-block:calc(var(--sp) / 2);grid-template-columns:1.1fr .9fr;gap:var(--sp)}
.hero h1 .sweep{position:relative;display:inline-block;color:var(--teal);z-index:0}
.hero h1 .sweep::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.08em;height:.22em;border-radius:999px;background:var(--gold);opacity:.55;z-index:-1;transform-origin:left}
.cue{display:flex;justify-content:center;padding-block:calc(var(--sp) / 2)}
/* coloured bands keep their inside padding: a prompt is measured to the band edge */
section:has(+ .cue):not(.band):not(.tint),.hero-zone:has(+ .cue) .hero{padding-bottom:0}
.cue + section:not(.band):not(.tint){padding-top:0}
.next-cue{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--head);color:var(--harbour);text-decoration:none;white-space:nowrap;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(38,70,83,.1)}
.next-cue:hover{background:#fff}
.next-cue .dot{position:static;width:14px;height:14px}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:calc(var(--sp) / 2)}.rings.r1{width:700px;height:700px;right:-360px;top:-220px}}

/* the studio desk: one 12 s loop. make it → you approve → results come in */
.desk{--T:12s;position:relative;justify-self:center;width:min(520px,100%);aspect-ratio:1/1}
.desk .mark{position:absolute;left:4%;top:2%;width:64px;height:64px}
.desk .lean{position:absolute;transition:transform .6s var(--ease);transform:translate(calc(var(--mx,0)*var(--d)),calc(var(--my,0)*var(--d)))}
.desk .pd{position:static;display:block}
.l1{--d:14px;left:0;top:44%}.l1 .pd{width:46px;height:46px}
.l2{--d:24px;right:6%;top:4%}.l2 .pd{width:22px;height:22px}
.l3{--d:10px;right:0;bottom:30%}.l3 .pd{width:32px;height:32px}
.l4{--d:30px;left:22%;bottom:2%}.l4 .pd{width:16px;height:16px}
.dphone{position:absolute;left:50%;top:50%;width:62%;max-width:270px;transform:translate(-50%,-50%) rotate(-3deg);border-radius:34px;background:var(--harbour);padding:10px;box-shadow:0 30px 70px rgba(38,70,83,.28),0 2px 0 rgba(255,255,255,.1) inset}
.dscreen{position:relative;overflow:hidden;border-radius:25px;background:#F2F6F5;padding:14px;display:flex;flex-direction:column;gap:10px;color:#16323A;font-size:11px;height:400px}
.ds-top{display:flex;justify-content:space-between;font:600 12px var(--head);color:#0B3C49}.ds-top span{font-weight:500;color:#557078}
.ds-post{background:#fff;border:1px solid #D9E4E2;border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:8px}
.ds-img,.sc-frame{position:relative;overflow:hidden;border-radius:10px;aspect-ratio:4/5}
.ds-img i,.sc-frame i{position:absolute}
.flat{inset:0;background:linear-gradient(#B9C2C4,#9AA6A9 55%,#8C9799)}
.graded{inset:0;background:linear-gradient(#F3A261,#E9C46B 30%,#F6D9A6 48%,#2A9D8E 52%,#1F776C)}
.sun{width:34%;aspect-ratio:1;border-radius:50%;left:33%;top:30%;background:radial-gradient(circle,#FFF4D6,#E9C46B 60%,rgba(233,196,107,0) 72%)}
.sea{left:0;right:0;bottom:0;height:46%;background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 2px,transparent 2px 12px)}
.shine,.wipe{top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-14deg)}
.ds-meta{display:flex;justify-content:space-between;align-items:center;font:600 11px var(--head)}
.ds-likes{color:var(--coral);font:600 11px var(--head)}
.ds-likes .ctr{font-style:normal}
.ds-lines{display:flex;flex-direction:column;gap:5px}.ds-lines i{display:block;height:6px;border-radius:9px;background:#D9E4E2;transform-origin:left}
.ds-lines i:nth-child(2){width:86%}.ds-lines i:nth-child(3){width:58%}
.ds-sheet{position:absolute;left:8px;right:8px;bottom:8px;background:#fff;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 -10px 30px rgba(11,60,73,.16);transform:translateY(120%)}
.ds-sheet b{font:600 12px var(--head)}
.ds-btns{display:flex;gap:6px}.ds-btns span{flex:1;text-align:center;padding:9px 6px;border-radius:999px;font:600 11px var(--head)}
.ds-ask{box-shadow:inset 0 0 0 1.5px #C9D6D4;color:#3B5A62}.ds-ok{background:var(--teal-ink);color:#fff}
.ds-done{position:absolute;left:8px;right:8px;bottom:8px;background:#fff;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px;opacity:0;font-size:11px;color:#3B5A62}
.s-pill{align-self:flex-start;font:600 9px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:99px;background:#B4472B;color:#fff}
.s-pill.ok{background:#DCEFEF;color:#0A5A62}
.note{position:absolute;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.96);border:1px solid #E3EAE8;border-radius:16px;padding:10px 14px 10px 10px;box-shadow:0 14px 34px rgba(38,70,83,.16);font-size:12px;color:#3B5A62;opacity:0;transform:scale(.6)}
.note .dot{position:static;flex:none;width:26px;height:26px}
.note b{display:block;font:600 13px var(--head);color:var(--harbour)}
.n1{right:-2%;top:18%}.n2{left:-4%;top:62%}.n3{right:2%;bottom:6%}
@media (max-width:820px){.desk{width:min(360px,100%);order:2}.n1{right:0}.n2{left:0}}
@media (max-width:420px){.note{padding:8px 10px 8px 8px;font-size:11px}.note b{font-size:12px}.note .dot{width:20px;height:20px}.dscreen{height:340px}}

/* chapters: tinted bands for rhythm */
section.tint{background:var(--tint)}
section.band{position:relative}

/* Three Jobs scene: wide screens get one sticky phone that changes as you read; phones get a screen per step */
.scene{display:grid;grid-template-columns:1fr;gap:var(--gap)}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);display:flex;flex-direction:column;gap:12px}
.step .n{font:700 14px/1 var(--head);color:var(--teal-ink);letter-spacing:.02em}
.step ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:15px}
.scr{margin-top:auto;border-radius:22px;background:#F2F6F5;border:8px solid var(--harbour);padding:14px;display:flex;flex-direction:column;gap:8px;color:#16323A;font-size:12px;width:100%;height:360px;overflow:hidden;box-shadow:0 18px 40px rgba(38,70,83,.16)}
.step ul{margin-bottom:8px}
@media (min-width:900px){.scene{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px) and (max-width:1279px){.scr{height:400px}}
.sc-frame{flex:1;min-height:0;aspect-ratio:auto}
.sc-head{display:flex;justify-content:space-between;align-items:center;font:600 13px var(--head);color:#0B3C49}
.sc-frame .tag{position:absolute;left:10px;font:600 10px var(--head);background:rgba(255,255,255,.92);color:#0E7C86;padding:5px 9px;border-radius:999px;opacity:0;transform:translateY(6px)}
.sc-frame .t1{top:10px}.sc-frame .t2{top:38px}.sc-frame .t3{top:66px}
.sc-time{position:relative;display:flex;gap:4px;height:28px;padding:4px;border-radius:8px;background:#DDE6E4}
.sc-time i{flex:1;border-radius:5px;background:linear-gradient(#9FC9C2,#7FB3AB)}.sc-time i:nth-child(2){flex:1.6;background:linear-gradient(#F4C88A,#EDB06A)}.sc-time i:nth-child(4){flex:.7}
.sc-time .head{position:absolute;top:-3px;bottom:-3px;left:6px;width:2px;background:var(--coral);border-radius:2px}
.cm{display:flex;gap:8px;align-items:flex-end;opacity:0;transform:translateY(10px)}
.cm div{background:#fff;border:1px solid #D9E4E2;border-radius:14px 14px 14px 4px;padding:6px 10px;display:flex;flex-direction:column;gap:2px;max-width:80%}
.cm b{font:600 11px var(--head)}
.cm.me{justify-content:flex-end}.cm.me div{background:#E3F2EF;border-color:#C5E3DD;border-radius:14px 14px 4px 14px}
.av{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#AEBFC6,#7E949C)}.av.me{background:radial-gradient(circle at 38% 30%,#E66F51 0 11%,#F3A261 11% 26%,#E9C46B 26% 46%,#2A9D8E 46% 100%)}
.cm-badge{align-self:flex-end;font:600 10px var(--head);color:#0E7C86;background:#DCEFEF;padding:4px 8px;border-radius:999px;opacity:0}
.sc-stats{margin-top:auto;display:flex;gap:8px}.sc-stats span{flex:1;background:#fff;border:1px solid #D9E4E2;border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;gap:2px;font-size:10px;color:#557078}.sc-stats b{font:600 13px var(--head);color:#0B3C49}
.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;background:#fff;border:1px solid #D9E4E2;border-radius:12px}
.seats i{height:30px;border-radius:10px;background:#E5ECEA}
.sy-row{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #D9E4E2;border-radius:10px;padding:8px 10px;font-size:11px;color:#557078}
.sy-row b{font:600 12px var(--head);color:#0B3C49}.sy-row.ok b{color:#0E7C86}

/* what-we-make strip */
.strip{margin-top:calc(var(--sp) / 2);overflow:hidden;border-block:1px solid rgba(38,70,83,.08);background:rgba(255,255,255,.5);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip-in{display:flex;width:max-content;gap:0}
.strip-in span{display:flex;align-items:center;gap:22px;padding:18px 0 18px 22px;font:700 clamp(20px,2.6vw,30px)/1 var(--head);color:var(--harbour);white-space:nowrap}
.strip-in span::after{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 38% 30%,#E66F51 0 11%,#F3A261 11% 26%,#E9C46B 26% 46%,#2A9D8E 46% 100%)}

/* phone dock: Start Your Brief, after the hero, out of the way near the prices */
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;display:none;align-items:center;gap:12px;padding:8px 8px 8px 8px;border-radius:999px;background:rgba(38,70,83,.94);box-shadow:0 14px 34px rgba(11,40,50,.3);transform:translateY(160%);transition:transform .45s var(--pop)}
.dock .btn{min-height:46px;padding:12px 20px;flex:none}
.dock span{color:var(--on-dark-muted);font:500 13px var(--head)}
.dock.show{transform:none}
@media (max-width:720px){.js .dock{display:flex}body:has(.dock) footer{padding-bottom:96px}}

/* reveal as you arrive (content is never hidden without the script) */
.js [data-reveal] .sec-head,.js [data-reveal] article,.js [data-reveal] .steps li,.js [data-reveal] .price,.js [data-reveal] .work a,.js [data-reveal] .fits article{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.js [data-reveal].in .sec-head,.js [data-reveal].in article,.js [data-reveal].in .steps li,.js [data-reveal].in .price,.js [data-reveal].in .work a,.js [data-reveal].in .fits article{opacity:1;transform:none}
.js [data-reveal].in article:nth-child(2),.js [data-reveal].in .work a:nth-child(2),.js [data-reveal].in .steps li:nth-child(2),.js [data-reveal].in .fits article:nth-child(2){transition-delay:.08s}
.js [data-reveal].in article:nth-child(3),.js [data-reveal].in .work a:nth-child(3),.js [data-reveal].in .steps li:nth-child(3),.js [data-reveal].in .fits article:nth-child(3){transition-delay:.16s}
.js [data-reveal].in article:nth-child(4),.js [data-reveal].in .work a:nth-child(4),.js [data-reveal].in .steps li:nth-child(4),.js [data-reveal].in .fits article:nth-child(4){transition-delay:.24s}


/* header clear over the hero, solid once scrolled */
header.top#top:not(.scrolled){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:720px){.docked header.top#top .keep{opacity:0;pointer-events:none}}


/* ---------- chapter 3: live system demos (dark band) ---------- */
.demo{background:rgba(244,241,232,.06);border:1px solid rgba(244,241,232,.12);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;height:190px;overflow:hidden;font-size:13px}
.dm-bar{display:flex;justify-content:space-between;align-items:center;font:600 13px var(--head)}.dm-bar span{font-weight:500;color:var(--gold)}
.dm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(244,241,232,.06);border-radius:10px;padding:9px 12px}
.dm-row em{font:600 11px/1 var(--head);font-style:normal;letter-spacing:.04em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--teal-ink);color:#fff}
.bub{max-width:80%;padding:8px 12px;border-radius:14px;line-height:1.35}
.bub.in{background:rgba(244,241,232,.12);border-bottom-left-radius:4px;align-self:flex-start}
.bub.out{background:var(--teal-ink);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.typing{display:flex;gap:4px;align-self:flex-end;padding:8px 12px;border-radius:14px;background:rgba(42,157,142,.35)}
.typing i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.8}
.slot{display:grid}.slot > *{grid-area:1/1;justify-self:end;align-self:start}
.d-customers .bub.out{max-width:80%}
.dm-badge{align-self:flex-end;font:600 11px var(--head);color:var(--gold)}
.dm-meter{height:10px;border-radius:9px;background:rgba(244,241,232,.12);overflow:hidden}.dm-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));transform-origin:left}
.bars{flex:1;display:flex;align-items:flex-end;gap:8px;padding-top:6px}
.bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--gold),var(--teal));transform-origin:bottom}
.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:38%}.bars i:nth-child(3){height:34%}.bars i:nth-child(4){height:52%}.bars i:nth-child(5){height:61%}.bars i:nth-child(6){height:78%}.bars i:nth-child(7){height:96%}
.d-safe .dm-row em{background:#1E7148}
.kind-panel{min-height:0}

/* ---------- chapter 4: the portal phone can be tapped ---------- */
.phone.tap .s-approve{align-self:flex-start;border:0;cursor:pointer;background:var(--teal-ink);color:#fff;font:600 12px/1 var(--head);padding:9px 14px;border-radius:999px;min-height:34px}
.phone.tap .s-approve[disabled]{opacity:.5;cursor:default}
.phone.tap .s-ok.done .s-pill{background:#DCEFEF;color:#0E7C86}
.phone.tap .pf{transition:width .6s var(--ease)}
.tap-hint{text-align:center;margin-top:12px;font:500 13px var(--head);color:var(--muted)}
.phone.tap{display:flex;flex-direction:column}

/* ---------- chapter 5: the growth line draws as you scroll ---------- */
.steps.grow li{position:relative;border-top-color:rgba(42,157,142,.18)}
.steps.grow li::after{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--teal);transform-origin:left}

/* ---------- chapter 6: the work cards ---------- */
.swipe-hint{display:none;font-size:14px;margin:0 0 10px}
@media (max-width:600px){
  .swipe-hint{display:block}
  .work{grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-bottom:-8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .work::-webkit-scrollbar{display:none}
  .work a{scroll-snap-align:start}
}
@media (hover:hover) and (pointer:fine){.work a{transition:transform .25s var(--ease),border-color .15s,box-shadow .25s;transform:perspective(900px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg))}
  .work a:hover{box-shadow:0 18px 40px rgba(38,70,83,.12)}}

/* ---------- chapter 7: which plan fits ---------- */
.chooser{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--gap);margin-block:calc(var(--sp) / 3) var(--gap)}
.ch-q,.ch-a{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);display:flex;flex-direction:column;gap:14px}
.ch-q .fits-h{margin:0}
.chooser fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.chooser legend{font:600 15px var(--head);padding:0;margin-bottom:8px}
.ch-opts{display:flex;flex-wrap:wrap;gap:8px}
.ch-opts label{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;cursor:pointer;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);font:500 14px var(--head);min-height:44px}
.ch-opts input{accent-color:var(--teal);width:18px;height:18px;margin:0}
.ch-opts label:has(input:checked){background:#EEF6F3;box-shadow:inset 0 0 0 2px var(--teal)}
.ch-a{background:var(--harbour);color:var(--on-dark);border-color:var(--harbour)}
.ch-a .label{color:var(--gold)}.ch-a .muted{color:var(--on-dark-muted)}.ch-a .eg{color:var(--on-dark-muted);border-left-color:var(--gold)}.ch-a .eg a{color:var(--gold)}
.ch-plan{font:700 clamp(30px,3vw,40px)/1 var(--head)}
.ch-price{font:600 18px var(--head);color:var(--gold)}
.ch-a .btn{align-self:flex-start;margin-top:auto}
.ch-a.flip{animation:none}
.fits article{transition:box-shadow .3s,transform .3s}
.fits article.pick{box-shadow:0 0 0 3px var(--teal),0 18px 40px rgba(38,70,83,.12)}
@media (max-width:900px){.chooser{grid-template-columns:1fr}}

@media (prefers-reduced-motion:no-preference){
  html:not(.still) .kind-panel.play .demo > *{animation:dmIn .5s var(--pop) both}
  .kind-panel.play .demo > :nth-child(2){animation-delay:.5s!important}.kind-panel.play .demo > :nth-child(3){animation-delay:1.3s!important}
  .kind-panel.play .demo > :nth-child(4){animation-delay:2.1s!important}.kind-panel.play .demo > :nth-child(5){animation-delay:2.6s!important}
  html:not(.still) .kind-panel.play .d-customers .slot .typing{animation:dmIn .4s var(--pop) .9s both,dmOut .25s ease 2s forwards}
  html:not(.still) .kind-panel.play .d-customers .slot .bub.out{animation:dmIn .45s var(--pop) 2.2s both}
  .kind-panel.play .d-customers > .slot{animation:none!important}
  html:not(.still) .kind-panel.play .typing i{animation:hop 1s ease-in-out infinite}
  .kind-panel.play .typing i:nth-child(2){animation-delay:.15s}.kind-panel.play .typing i:nth-child(3){animation-delay:.3s}
  html:not(.still) .kind-panel.play .dm-meter i{animation:meter 2.4s var(--ease) .4s both}
  html:not(.still) .kind-panel.play .bars i{animation:barup .7s var(--pop) both}
  .kind-panel.play .bars i:nth-child(2){animation-delay:.1s}.kind-panel.play .bars i:nth-child(3){animation-delay:.2s}.kind-panel.play .bars i:nth-child(4){animation-delay:.3s}
  .kind-panel.play .bars i:nth-child(5){animation-delay:.4s}.kind-panel.play .bars i:nth-child(6){animation-delay:.5s}.kind-panel.play .bars i:nth-child(7){animation-delay:.6s}
  html:not(.still) .kind-panel.play .dm-row em{animation:dmIn .4s var(--pop) both}
  .kind-panel.play .dm-row:nth-child(2) em{animation-delay:.8s!important}.kind-panel.play .dm-row:nth-child(3) em{animation-delay:1.6s!important}.kind-panel.play .dm-row:nth-child(4) em{animation-delay:2.4s!important}
  html:not(.still) .ch-a.flip{animation:dmIn .45s var(--pop)}
  html:not(.still) .brief .stepbox:not([hidden]){animation:stepIn .4s var(--ease)}
  .phone.tap .s-ok.done .s-pill{animation:dmIn .45s var(--pop)}
  @supports (animation-timeline: view()){
    .steps.grow{view-timeline-name:--grow}
    html:not(.still) .steps.grow li::after{animation:draw linear both;animation-timeline:--grow}
    .steps.grow li:nth-child(1)::after{animation-range:entry 30% cover 35%}.steps.grow li:nth-child(2)::after{animation-range:cover 35% cover 45%}
    .steps.grow li:nth-child(3)::after{animation-range:cover 45% cover 55%}.steps.grow li:nth-child(4)::after{animation-range:cover 55% cover 65%}
  }
}
@keyframes dmIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes dmOut{to{opacity:0;transform:scale(.9)}}
@keyframes meter{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes barup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------------- motion (only when wanted) ---------------- */
@media (prefers-reduced-motion:no-preference){
  html:not(.still) .sky .b1{animation:float1 26s ease-in-out infinite}
  html:not(.still) .sky .b2{animation:float2 32s ease-in-out infinite}
  html:not(.still) .sky .b3{animation:float1 38s ease-in-out -9s infinite reverse}
  html:not(.still) .rings.r1{animation:breathe 9s ease-in-out infinite}
  .hero h1 .sweep::after{animation:sweep .9s var(--ease) .35s both}
  html:not(.still) .desk .pd{animation:popin .7s var(--pop) both,drift 7s ease-in-out .8s infinite}
  .desk .l2 .pd{animation-delay:.15s,1.1s!important}.desk .l3 .pd{animation-delay:.3s,1.6s!important}.desk .l4 .pd{animation-delay:.45s,2s!important}
  html:not(.still) .desk .mark{animation:bob 5.5s ease-in-out infinite}
  html:not(.still) .next-cue .dot{animation:hop 1.6s ease-in-out infinite}
  /* the desk loop */
  html:not(.still) .desk .graded{animation:dGrade var(--T) var(--ease) infinite}
  html:not(.still) .desk .shine{animation:dShine var(--T) ease-in-out infinite}
  html:not(.still) .desk .ds-lines i{animation:dType var(--T) var(--ease) infinite}
  .desk .ds-lines i:nth-child(2){animation-delay:.25s!important}.desk .ds-lines i:nth-child(3){animation-delay:.5s!important}
  html:not(.still) .desk .ds-sheet{animation:dSheet var(--T) var(--ease) infinite}
  html:not(.still) .desk .ds-ok{animation:dPress var(--T) ease infinite}
  html:not(.still) .desk .ds-done{animation:dDone var(--T) var(--ease) infinite}
  html:not(.still) .desk .n1{animation:dNote1 var(--T) var(--pop) infinite}
  html:not(.still) .desk .n2{animation:dNote2 var(--T) var(--pop) infinite}
  html:not(.still) .desk .n3{animation:dNote3 var(--T) var(--pop) infinite}
  html:not(.still) .desk .ctr{animation:dCount var(--T) steps(30) infinite}
  html:not(.still) .desk .dphone{animation:dTilt var(--T) ease-in-out infinite}
  /* scene screens loop while showing */
  html:not(.still) .scr-content .graded{animation:cGrade 6s var(--ease) infinite}
  html:not(.still) .scr-content .wipe{animation:cWipe 6s ease-in-out infinite}
  html:not(.still) .scr-content .tag{animation:cTag 6s var(--pop) infinite}
  .scr-content .t2{animation-delay:.25s!important}.scr-content .t3{animation-delay:.5s!important}
  html:not(.still) .scr-content .head{animation:cHead 6s linear infinite}
  html:not(.still) .scr-channels .c1{animation:cm1 7s var(--ease) infinite}
  html:not(.still) .scr-channels .c2{animation:cm2 7s var(--ease) infinite}
  html:not(.still) .scr-channels .cm-badge{animation:cm2 7s var(--pop) infinite}
  html:not(.still) .scr-channels .c3{animation:cm3 7s var(--ease) infinite}
  html:not(.still) .scr-systems .seats i{animation:seat 7s var(--pop) infinite}
  html:not(.still) .stick{animation:sway 6s ease-in-out infinite}
  html:not(.still) .strip-in{animation:strip 38s linear infinite}
  .strip:hover .strip-in{animation-play-state:paused}
  .btn:active{transform:scale(.97)}
}
/* still state (reduced motion, Pause Motion, or off screen): the complete picture */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.desk.off *,.scr.off *,.scr.off,.strip.off .strip-in{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.desk .graded{opacity:1}.desk .ds-done,.desk .note{opacity:1;transform:none}.desk .ds-sheet{transform:translateY(120%)}.scr .tag,.cm,.cm-badge{opacity:1;transform:none}.scr-systems .seats i:nth-child(-n+9){background:var(--teal)}.desk .ctr::after{content:"214"}}
.still .desk .graded{opacity:1}.still .desk .ds-done,.still .desk .note{opacity:1;transform:none}.still .scr .tag,.still .cm,.still .cm-badge{opacity:1;transform:none}.still .scr-systems .seats i:nth-child(-n+9){background:var(--teal)}.still .desk .ctr::after{content:"214"}

/* heart counter: 128 → 214 with an animatable number (static 214 where unsupported) */
@property --n{syntax:"<integer>";inherits:false;initial-value:214}
.desk .ctr{counter-reset:n var(--n)}.desk .ctr::after{content:counter(n)}

@keyframes float1{50%{transform:translate(8vmax,6vmax) scale(1.08)}}
@keyframes float2{50%{transform:translate(-10vmax,8vmax) scale(.94)}}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes popin{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6px,-10px) scale(1.05)}66%{transform:translate(-5px,6px) scale(.96)}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
@keyframes sway{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(-11deg)}}
@keyframes strip{to{transform:translateX(-50%)}}
/* desk: 0-25% make it, 25-55% approve, 55-95% results, 95-100% reset */
@keyframes dGrade{0%,8%{opacity:0}22%,96%{opacity:1}100%{opacity:0}}
@keyframes dShine{0%,10%{transform:translateX(0) skewX(-14deg)}24%,100%{transform:translateX(520%) skewX(-14deg)}}
@keyframes dType{0%,12%{transform:scaleX(0)}24%,96%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes dSheet{0%,27%{transform:translateY(120%)}33%,47%{transform:translateY(0)}52%,100%{transform:translateY(120%)}}
@keyframes dPress{0%,40%{transform:scale(1);box-shadow:0 0 0 0 rgba(42,157,142,.5)}43%{transform:scale(.92)}46%{transform:scale(1);box-shadow:0 0 0 10px rgba(42,157,142,0)}100%{transform:scale(1)}}
@keyframes dDone{0%,49%{opacity:0;transform:translateY(12px)}54%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes dNote1{0%,58%{opacity:0;transform:scale(.6)}63%,94%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(.9)}}
@keyframes dNote2{0%,68%{opacity:0;transform:scale(.6)}73%,94%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(.9)}}
@keyframes dNote3{0%,78%{opacity:0;transform:scale(.6)}83%,94%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(.9)}}
@keyframes dCount{0%,55%{--n:128}90%,100%{--n:214}}
@keyframes dTilt{0%,100%{transform:translate(-50%,-50%) rotate(-3deg)}50%{transform:translate(-50%,-51.5%) rotate(-2deg)}}
@keyframes cGrade{0%,15%{opacity:0}45%,90%{opacity:1}100%{opacity:0}}
@keyframes cWipe{0%,15%{transform:translateX(0) skewX(-14deg)}45%,100%{transform:translateX(520%) skewX(-14deg)}}
@keyframes cTag{0%,48%{opacity:0;transform:translateY(6px)}56%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes cHead{from{transform:translateX(0)}to{transform:translateX(min(300px,70vw))}}
@keyframes cm1{0%,5%{opacity:0;transform:translateY(10px)}12%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes cm2{0%,25%{opacity:0;transform:translateY(10px)}32%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes cm3{0%,50%{opacity:0;transform:translateY(10px)}57%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes seat{0%,8%{background:#E5ECEA;transform:scale(1)}14%{background:var(--teal);transform:scale(1.12)}18%,90%{background:var(--teal);transform:scale(1)}100%{background:#E5ECEA}}
.scr-systems .seats i:nth-child(2){animation-delay:.3s!important}.scr-systems .seats i:nth-child(3){animation-delay:.6s!important}.scr-systems .seats i:nth-child(4){animation-delay:.9s!important}
.scr-systems .seats i:nth-child(5){animation-delay:1.2s!important}.scr-systems .seats i:nth-child(6){animation-delay:1.5s!important}.scr-systems .seats i:nth-child(7){animation-delay:1.8s!important}
.scr-systems .seats i:nth-child(8){animation-delay:2.1s!important}.scr-systems .seats i:nth-child(9){animation-delay:2.4s!important}
.scr-systems .seats i:nth-child(n+10){animation:none!important}