/* Turnkey - a pixel key workshop (Kairosoft school). Words: Pixelify Sans. Digits, body: Nunito tabular. */
:root{
  --teal:#19B5A5;--teal2:#35C9B8;--tealD:#12968A;--yellow:#FFC93C;--yshade:#E3A514;--cream:#FFF6E0;--cream2:#F3E6C4;
  --pink:#FF7AA8;--pinkD:#D65684;--blue:#2F6FE0;--blueD:#2357B8;--wood:#D9A066;--wood2:#B07A45;--navy:#1B2A6B;--grey:#9AA3B5;
  --px:4px;--pix:"Tiny5",ui-monospace,monospace;--num:"Nunito",system-ui,sans-serif;
  --edge:0 calc(-1*var(--px)) 0 0 var(--navy),0 var(--px) 0 0 var(--navy),calc(-1*var(--px)) 0 0 0 var(--navy),var(--px) 0 0 0 var(--navy);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;font-synthesis:none;background:var(--teal);color:var(--navy);font:600 17px/1.5 var(--num);font-variant-numeric:tabular-nums;overflow-x:hidden;cursor:url(/assets/sp/cursor2.png) 2 2,auto}
img{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:inherit}
a,button,[role=button],summary,label,.ca,.cachip,.chip{cursor:pointer}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:800}
h1,h2,h3,.pix{font-family:var(--pix);font-weight:400;letter-spacing:.01em;line-height:1.05;margin:0}
p{margin:0 0 .6em}
.skip{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;background:var(--cream);z-index:200}.skip:focus{width:auto;height:auto;clip-path:none;padding:8px 12px;left:8px;top:8px}
.muted{opacity:.72}.small{font-size:14px}
:focus-visible{outline:4px solid var(--navy);outline-offset:4px}

/* ------------------------------------------------ pixel buttons: stepped navy edge, flat fill, press = 4px down */
.pbtn{--bg:var(--cream);--sh:var(--cream2);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 18px;margin:var(--px);border:0;
  background:var(--bg);color:var(--navy);font:400 18px/1 var(--pix);text-decoration:none;white-space:nowrap;
  box-shadow:var(--edge),inset 0 calc(-1*var(--px)) 0 0 var(--sh),0 calc(2*var(--px)) 0 0 var(--navy);transform:translateY(0);transition:transform .06s steps(1),box-shadow .06s steps(1)}
.pbtn:hover{--bg:#fff}
.pbtn:active,.pbtn.busy{transform:translateY(var(--px));box-shadow:var(--edge),inset 0 calc(-1*var(--px)) 0 0 var(--sh),0 var(--px) 0 0 var(--navy)}
.pbtn[disabled]{opacity:.55;cursor:not-allowed}
.pbtn.yellow{--bg:var(--yellow);--sh:var(--yshade)}.pbtn.yellow:hover{--bg:#FFD45F}
.pbtn.navy{--bg:var(--navy);--sh:#101a4a;color:var(--cream)}.pbtn.navy:hover{--bg:#24367f}
.pbtn.pink{--bg:var(--pink);--sh:var(--pinkD)}.pbtn.pink:hover{--bg:#ff8fb6}
.pbtn.cream:hover{--bg:#fff}
.pbtn.sm{min-height:40px;padding:6px 12px;font-size:16px}
.pbtn.lg{min-height:56px;padding:12px 26px;font-size:22px}
.pbtn .xg{width:16px;height:16px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}

/* CA chip */
.ca{display:inline-flex;align-items:center;gap:0;margin:var(--px);background:var(--cream);box-shadow:var(--edge),0 calc(2*var(--px)) 0 0 var(--navy)}
.ca .lab{font:400 16px/1 var(--pix);padding:0 10px;align-self:stretch;display:flex;align-items:center;background:var(--navy);color:var(--cream)}
.cachip{display:inline-flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--navy);min-height:44px;padding:6px 12px;font:800 16px/1 var(--num)}
.cachip .cl{font:400 14px/1 var(--pix);padding:4px 6px;background:var(--yellow)}
.cachip.copied .cl{background:var(--teal2)}.cachip.off{cursor:default}.cachip.off .cl{display:none}
.carow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}.carow .lab{font:400 14px var(--pix)}.carow .lk{font:400 14px var(--pix)}

/* ------------------------------------------------ header */
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;height:64px;padding:0 20px;background:var(--cream);box-shadow:0 var(--px) 0 0 var(--navy)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:400 22px/1 var(--pix)}
.brand img{width:32px;height:32px;image-rendering:auto;box-shadow:0 0 0 3px var(--navy)}
.nav{display:flex;gap:4px;margin-right:auto}
.nav a{font:400 17px/1 var(--pix);text-decoration:none;padding:10px 12px}
.nav a:hover,.nav a[aria-current=page]{background:var(--yellow);box-shadow:var(--edge)}
.hdr-r{display:flex;align-items:center;gap:6px}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;padding:10px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:4px;background:var(--navy)}
@media (max-width:860px){
  .hdr{gap:8px;padding:0 10px}
  .burger{display:flex}
  .nav{position:fixed;left:0;right:0;top:64px;flex-direction:column;background:var(--cream);padding:8px 12px 16px;box-shadow:0 var(--px) 0 0 var(--navy);transform:translateY(-140%);visibility:hidden;margin:0}
  body.menu-open .nav{transform:none;visibility:visible}
  .nav a{padding:14px 10px;font-size:20px}
  .brand span{display:none}
  .xbtn{padding:6px 10px}
}

/* ------------------------------------------------ hero: the bench cutaway */
.hero{position:relative;min-height:calc(100svh - 64px);max-height:1000px;display:flex;flex-direction:column;overflow:hidden;background:var(--teal)}
.peg{position:absolute;inset:0;background-image:radial-gradient(var(--tealD) 3px,transparent 3.5px);background-size:32px 32px;background-position:16px 16px}
.shelf{position:absolute;left:4%;top:56px;width:min(320px,26vw);z-index:2}
.shelf-plank{display:block;width:100%;height:auto}
.shelf-crew{display:flex;gap:6px;padding-left:10%;height:72px;align-items:flex-end;margin-bottom:-6px}
.shelf-crew .idle{width:36px;height:60px;background:url(/assets/sp/walk-y.png) 0 0/144px 60px no-repeat;image-rendering:pixelated}
.idle.c-p{background-image:url(/assets/sp/walk-p.png)}.idle.c-w{background-image:url(/assets/sp/walk-w.png)}
.sign{position:relative;z-index:3;margin:72px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.sign .chain{position:absolute;top:-76px;width:18px;height:72px}
.sign .chain.l{left:calc(50% - 200px)}.sign .chain.r{left:calc(50% + 182px)}
.sign-board{display:inline-block;padding:14px 40px 18px;background:var(--cream);box-shadow:var(--edge),inset 0 -8px 0 0 var(--cream2),0 12px 0 0 var(--navy);
  font-size:104px;line-height:1;color:var(--yellow);-webkit-text-stroke:6px var(--navy);paint-order:stroke fill;letter-spacing:.04em}
.sign-line{margin:28px 0 18px;max-width:560px;font:400 22px/1.3 var(--pix);background:var(--navy);color:var(--cream);padding:10px 16px}
.hero-row{position:absolute;z-index:3;left:max(3vw,calc(50% - 640px));bottom:300px}
.links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.ticket{display:flex;flex-direction:column;gap:0;margin:0;min-width:210px;background:var(--cream);box-shadow:var(--edge),0 8px 0 0 var(--navy)}
.ticket div{padding:8px 16px;border-top:4px solid var(--navy)}.ticket div:first-child{border-top:0}
.ticket dt{font:400 14px/1 var(--pix);opacity:.8}.ticket dd{margin:4px 0 0;font-size:15px}.ticket dd b{font-size:24px}
.bench{position:relative;z-index:2;height:250px;flex:none;margin-top:auto}
.bench-top{position:absolute;left:0;right:0;bottom:120px;height:220px}
.bench-body{position:absolute;left:0;right:0;bottom:0;height:120px;background:var(--wood2) url(/assets/sp/bench.png) center top/max(1000px,100%) auto no-repeat;image-rendering:pixelated}
.machine-wrap{position:absolute;left:50%;bottom:-8px;width:248px;height:256px;transform:translateX(-50%);z-index:3}
.machine{position:absolute;inset:0;width:248px;height:256px;transition:transform .08s steps(1)}
.press .machine{transform:translateY(8px)}
.sparks{position:absolute;left:24px;top:118px;width:64px;height:64px;opacity:0;z-index:4}
.press .sparks{opacity:1;animation:spark .16s steps(1) 2}
@keyframes spark{50%{content:url(/assets/sp/spark2.png)}}
.lever{position:absolute;left:100%;bottom:4px;margin-left:8px;display:flex;flex-direction:column;align-items:center;text-decoration:none;width:170px}
.lever-arm{width:130px;height:120px;background:url(/assets/sp/lever.png) 0 0/390px 120px no-repeat;image-rendering:pixelated}
.pull1 .lever-arm{background-position:-130px 0}.pull2 .lever-arm{background-position:-260px 0}
.lever:hover .lever-arm{background-position:-130px 0}
.lever-plate{margin-top:4px;padding:12px 14px;background:var(--yellow);font:400 24px/1 var(--pix);white-space:nowrap;box-shadow:var(--edge),inset 0 -4px 0 0 var(--yshade),0 8px 0 0 var(--navy)}
.lever:hover .lever-plate{background:#FFD45F}
.lever:active .lever-plate{transform:translateY(4px);box-shadow:var(--edge),inset 0 -4px 0 0 var(--yshade),0 4px 0 0 var(--navy)}
.walkers{position:absolute;left:0;width:calc(50% - 140px);bottom:-6px;height:140px;z-index:2;overflow:hidden;container-type:inline-size}
.walker{position:absolute;left:0;bottom:0;width:54px;height:90px;text-decoration:none;animation:stroll var(--sp) steps(80) infinite;animation-delay:calc(-1*var(--d))}
.kspr{position:absolute;bottom:0;left:0;width:54px;height:90px;background:url(/assets/sp/walk-y.png) 0 0/216px 90px no-repeat;image-rendering:pixelated;animation:walk .6s steps(4) infinite}
.walker.c-p .kspr{background-image:url(/assets/sp/walk-p.png)}.walker.c-w .kspr{background-image:url(/assets/sp/walk-w.png)}
@keyframes walk{to{background-position:-216px 0}}
@keyframes stroll{from{transform:translateX(-80px)}to{transform:translateX(calc(100cqw + 40px))}}
.wtag{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;background:var(--cream);padding:3px 8px;font-size:13px;line-height:1.2;box-shadow:var(--edge)}
.wtag b{font:400 14px/1.1 var(--pix)}.wtag.demo{font:400 14px var(--pix);background:var(--pink)}
@media (max-width:1100px){.sign-board{font-size:96px}}
@media (min-width:861px) and (max-height:860px){.sign{margin-top:56px}.sign .chain{top:-60px;height:56px}.sign-board{font-size:80px;padding:10px 32px 14px}.sign-line{margin:16px 0 10px;font-size:19px}.machine-wrap,.machine{width:200px;height:206px}.sparks{top:90px;left:18px}.hero-row{bottom:270px}}
@media (max-width:860px){
  .hero{min-height:calc(100svh - 64px)}
  .shelf{top:22px;left:3%;width:150px}.shelf-crew{height:44px;gap:2px}.shelf-crew .idle{width:24px;height:40px;background-size:96px 40px}
  .shelf{display:none}
  .sign{margin-top:84px}
  .sign-board{font-size:64px;padding:10px 20px 12px;-webkit-text-stroke:4px var(--navy)}
  .sign .chain{top:-74px}.sign .chain.l{left:calc(50% - 110px)}.sign .chain.r{left:calc(50% + 92px)}
  .sign-line{font-size:18px;margin:22px 16px 14px}
  .hero-row{position:relative;left:auto;bottom:auto;margin:18px 16px 0}
  .ticket{flex-direction:row;justify-content:space-between;min-width:0}.ticket div{padding:6px 10px;border-top:0;border-left:4px solid var(--navy)}.ticket div:first-child{border-left:0}.ticket dd b{font-size:19px}.ticket dd span{font-size:12px}
  .bench{height:210px}.bench-top{bottom:90px;height:200px}.bench-body{height:90px;background-size:740px auto}
  .machine-wrap{width:160px;height:166px;left:36%}.machine{width:160px;height:166px}.sparks{left:16px;top:76px;width:44px;height:44px}
  .lever{width:128px;margin-left:0;bottom:2px}.lever-arm{width:78px;height:72px;background-size:234px 72px}
  .pull1 .lever-arm,.lever:hover .lever-arm{background-position:-78px 0}.pull2 .lever-arm{background-position:-156px 0}
  .lever-plate{font-size:17px}
  .walkers{width:calc(36% - 84px)}
  .walker{width:36px;height:60px}.kspr{width:36px;height:60px;background-size:144px 60px}@keyframes walk{to{background-position:-144px 0}}
  .wtag{bottom:64px}
}
@media (max-width:380px){.sign-board{font-size:54px}.ticket dt{font-size:12px}}

/* ------------------------------------------------ the hour: conveyor */
.hour{position:relative;background:var(--cream);background-image:linear-gradient(var(--cream2) 4px,transparent 4px);background-size:100% 64px;padding:0;box-shadow:0 -4px 0 0 var(--navy)}
.hour-head{width:min(1240px,92vw);margin:0 auto 24px;display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:end}
.hour h2{font-size:64px;grid-column:1}.hour-head p{grid-column:1;margin:0;font-size:19px}
.hour-clock{grid-column:2;grid-row:1/span 2;text-align:right}
.hour-clock>.num{display:inline-block;font-size:72px;line-height:1;padding:8px 16px;background:var(--navy);color:var(--yellow)}
.hour-clock .of{display:block;font-size:18px;margin-top:6px}
.belt-pin{position:relative;height:240vh}
.belt-view{position:sticky;top:64px;height:calc(100svh - 64px);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.belt-track{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-self:flex-start;min-width:100%;padding:0 6vw;height:400px;will-change:transform}
.stations{position:relative;z-index:2;display:flex;gap:max(5vw,64px);justify-content:space-between;width:max(1200px,88vw)}
.st{display:flex;flex-direction:column;align-items:center;gap:10px;width:140px}
.st img{width:130px;height:130px;filter:saturate(.35) brightness(1.05);transition:filter .1s steps(1)}
.st.on img{filter:none}
.st-n{font:400 20px var(--pix);background:var(--cream);padding:4px 10px;box-shadow:var(--edge)}
.st.on .st-n{background:var(--yellow)}
.belt{position:relative;height:40px;margin-top:-8px;width:max(1200px,88vw);background:repeating-linear-gradient(90deg,var(--navy) 0 32px,#2c3d86 32px 64px);box-shadow:0 -4px 0 0 var(--grey),0 8px 0 0 var(--navy)}
.cards{position:absolute;top:0;left:6vw;width:max(1200px,88vw);display:flex;justify-content:space-between;z-index:2;gap:max(5vw,64px)}
.card{width:140px;min-height:120px;padding:12px;background:#fff;box-shadow:var(--edge),6px 10px 0 0 rgba(27,42,107,.25);transform:translateY(24px) scale(.9);opacity:0;transition:transform .12s steps(2),opacity .12s steps(2)}
.card.on{opacity:1;transform:none}
.card-k{display:block;font:400 22px/1.1 var(--pix);color:var(--blue)}.card-s{display:block;margin-top:6px;font-size:14px;line-height:1.3}
.card:nth-child(odd).on{transform:rotate(-2deg)}.card:nth-child(even).on{transform:rotate(1.5deg)}
.runner{position:absolute;left:0;bottom:40px;z-index:3;width:69px;height:102px;background:url(/assets/sp/carry.png) 0 0/276px 102px no-repeat;image-rendering:pixelated}
.runner.moving{animation:carry .5s steps(4) infinite}
@keyframes carry{to{background-position:-276px 0}}
.notes{width:min(1240px,92vw);margin:0 auto;padding:72px 0 110px}
.notes h3{font-size:40px;margin-bottom:28px}
.note-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.note{position:relative;padding:28px 18px 18px;background:#FFF2A8;box-shadow:var(--edge),6px 10px 0 0 rgba(27,42,107,.2)}
.note.n1{background:#FFD0E0;transform:rotate(1.5deg)}.note.n2{background:#D8F4EF;transform:rotate(-1deg)}.note.n3{background:#FFE7B0;transform:rotate(2deg)}.note.n0{transform:rotate(-2deg)}
.note .pin{position:absolute;top:8px;left:50%;width:16px;height:16px;margin-left:-8px;background:var(--pink);box-shadow:var(--edge)}
.note b{display:block;font:400 22px/1.15 var(--pix);margin-bottom:8px}.note span{font-size:16px;line-height:1.4}
@media (max-width:860px){
  .hour{padding-top:0}.hour-head{grid-template-columns:1fr}.hour h2{font-size:40px}.hour-clock{grid-column:1;grid-row:auto;text-align:left}.hour-clock>.num{font-size:48px}
  .belt-track{height:330px}.st{width:110px}.st img{width:96px;height:96px}.st-n{font-size:16px}.card{width:120px;min-height:100px}.card-k{font-size:18px}
  .runner{width:46px;height:68px;background-size:184px 68px}@keyframes carry{to{background-position:-184px 0}}
  .note-wall{grid-template-columns:1fr 1fr;gap:20px}.note b{font-size:18px}
}
@media (max-width:520px){.note-wall{grid-template-columns:1fr}}

/* ------------------------------------------------ pay and burn */
.burn{background:var(--yellow);background-image:linear-gradient(90deg,rgba(27,42,107,.07) 4px,transparent 4px),linear-gradient(rgba(27,42,107,.07) 4px,transparent 4px);background-size:96px 96px;padding:110px 0;box-shadow:0 -4px 0 0 var(--navy)}
.burn-in{width:min(1240px,92vw);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"copy hop" "out out";gap:48px 40px;align-items:center}
.burn-copy{grid-area:copy}.burn h2{font-size:56px;margin-bottom:20px}.burn-copy>p{font-size:19px;max-width:520px}
.burn-big{margin-top:28px;display:flex;flex-direction:column}
.burn-big b{font-size:clamp(44px,6vw,88px);max-width:100%;line-height:1;background:var(--navy);color:var(--yellow);padding:10px 18px;align-self:flex-start}
.burn-big span{margin-top:10px;font:400 19px var(--pix)}
.hopper{grid-area:hop;position:relative;width:min(432px,80vw);aspect-ratio:48/41;justify-self:center}
.hopper-img{width:100%;height:100%}
.flame{position:absolute;left:62%;top:-6%;width:21%;height:auto;opacity:0}
.hopper.lit .flame.f1{animation:fl .24s steps(1) infinite}.hopper.lit .flame.f2{animation:fl .24s steps(1) infinite reverse}
@keyframes fl{0%{opacity:1}50%{opacity:0}}
.coin-drop{position:absolute;left:72%;top:0;width:16px;height:16px;background:var(--yellow);box-shadow:var(--edge);opacity:0}
.hopper.lit .coin-drop{animation:drop .6s steps(6) infinite}
@keyframes drop{0%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(60px)}}
.outcomes{grid-area:out;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.oc{display:flex;flex-direction:column;gap:6px;padding:20px;box-shadow:var(--edge),0 10px 0 0 var(--navy)}
.oc.yellow{background:var(--cream)}.oc.cream{background:#fff}.oc.blue{background:var(--blue);color:#fff}
.oc-k{font:400 24px var(--pix)}.oc-v{font-size:20px}.oc-v b{font-size:30px}.oc-s{font-size:15px;opacity:.85}
@media (max-width:860px){.burn{padding:72px 0}.burn-in{grid-template-columns:1fr;grid-template-areas:"copy" "hop" "out";gap:36px}.burn h2{font-size:36px}.outcomes{grid-template-columns:1fr}}

/* ------------------------------------------------ hook board */
.board{background:var(--wood);background-image:radial-gradient(var(--wood2) 4px,transparent 4.5px);background-size:40px 40px;background-position:20px 20px;padding:110px 0 120px;box-shadow:0 -4px 0 0 var(--navy),inset 0 12px 0 0 var(--wood2)}
.board-in{width:min(1240px,92vw);margin:0 auto}
.board-head{background:var(--cream);padding:24px 28px;box-shadow:var(--edge),0 10px 0 0 var(--navy);max-width:720px}
.board h2{font-size:56px;margin-bottom:12px}.board-head p{font-size:18px}
.board-count{font:400 20px var(--pix);margin:0}.board-count b{font-size:28px}.board-count .sep{opacity:.5}
.hooks{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:56px 32px}
.hook{position:relative;padding-top:44px;min-height:220px}
.hook::before{content:"";position:absolute;top:0;left:50%;width:48px;height:39px;margin-left:-24px;background:url(/assets/sp/hook.png) 0 0/48px 39px no-repeat;image-rendering:pixelated}
.hook.empty{opacity:.75}
.tag{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 14px 14px;margin:0 6px;background:var(--cream);text-decoration:none;box-shadow:var(--edge),0 10px 0 0 rgba(27,42,107,.35);transform-origin:50% -30px;transition:transform .1s steps(2)}
.tag::before{content:"";position:absolute;top:-34px;left:50%;width:4px;height:34px;background:var(--navy)}
.tag:hover{transform:rotate(-3deg)}
.tag-id{font-size:14px;opacity:.75}.tag-n{font:400 24px/1.05 var(--pix);word-break:break-word}.tag-s{font:400 15px var(--pix)}.tag-t{font-size:20px;font-weight:800}
.tag.st-working,.tag.st-revising{background:var(--yellow)}.tag.st-delivered{background:#D8F4EF}.tag.st-done{background:#fff}.tag.st-done .tag-t{font:400 16px var(--pix);color:var(--blue)}.tag.st-refunding{background:#FFD0E0}
.tag.st-demo{background:var(--pink)}.tag.st-demo .tag-t{font:400 16px var(--pix)}
@media (max-width:860px){.board{padding:72px 0}.board h2{font-size:36px}.hooks{grid-template-columns:repeat(2,1fr);gap:44px 14px}.tag-n{font-size:19px}.hook{min-height:180px}}

/* ------------------------------------------------ ending */
.open{background:var(--pink);padding:110px 16px 120px;text-align:center;display:flex;flex-direction:column;align-items:center;box-shadow:0 -4px 0 0 var(--navy)}
.lock{width:222px;height:304px}.lock img{width:100%;height:100%}
.open h2{font-size:80px;margin:28px 0 12px}.open>p{font:400 22px var(--pix);margin-bottom:28px}
.open-btns{display:flex;flex-direction:column;align-items:center;gap:14px}
.open-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
@media (max-width:860px){.open h2{font-size:44px}.lock{width:148px;height:203px}}

/* ------------------------------------------------ footer */
.ftr{background:var(--navy);color:var(--cream);padding:28px 20px}
.ftr-in{width:min(1240px,100%);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.ftr .brand img{box-shadow:0 0 0 3px var(--cream)}
.ftr nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-right:auto}.ftr nav a{font:400 17px var(--pix);text-decoration:none;padding:8px 0}
.ftr nav a:hover{color:var(--yellow)}.ftr-pid{margin:0;font-size:14px}.ftr-pid a{display:inline-block;padding:10px 0;text-decoration:none;color:var(--yellow)}

/* ------------------------------------------------ inner pages */
.wall{min-height:calc(100svh - 64px);background:var(--teal);background-image:radial-gradient(var(--tealD) 3px,transparent 3.5px);background-size:32px 32px;padding:48px 16px 96px}
.pg-head{display:flex;align-items:center;gap:20px;margin-bottom:28px}
.pg-head .pg-obj{width:96px;height:auto;flex:none}
.pg-head h1{font-size:56px;margin-bottom:6px}.pg-head p{font-size:18px;margin:0;max-width:560px}
.panel{background:var(--cream);padding:24px;box-shadow:var(--edge),0 10px 0 0 var(--navy);margin:0 var(--px) 36px}
.panel h2{font-size:30px;margin-bottom:14px}
.ticket-wrap,.mine,.docs,.stats{width:min(860px,100%);margin:0 auto}
.tk-form{background:var(--cream);padding:28px;box-shadow:var(--edge),0 12px 0 0 var(--navy);margin:var(--px)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.fld{display:flex;flex-direction:column;gap:6px;margin:0 0 20px;border:0;padding:0;cursor:default}
.fl{font:400 18px var(--pix)}.fl i{font-style:normal;opacity:.6;font-size:14px;margin-left:6px}
.fh{font-size:14px;opacity:.75}.fh.bad,.fld.bad .fh{color:#b3264f;opacity:1}.fh.ok{color:#0c6d63;opacity:1}
.fld input,.fld textarea{width:100%;font:700 18px/1.35 var(--num);color:var(--navy);background:#fff;border:0;padding:12px 14px;box-shadow:var(--edge);border-radius:0;outline:0}
.fld input:focus,.fld textarea:focus{background:#FFFBEA;box-shadow:var(--edge),0 0 0 8px var(--yellow)}
.fld textarea{resize:vertical;min-height:84px}
.fld input.up{text-transform:uppercase}
.slug-in{display:flex;align-items:stretch;box-shadow:var(--edge)}.slug-in .pre{display:flex;align-items:center;padding:0 10px;background:var(--navy);color:var(--cream);font:800 18px var(--num)}.slug-in input{box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:0;font:400 17px/1 var(--pix);padding:10px 14px;min-height:40px;margin:var(--px);background:#fff;color:var(--navy);box-shadow:var(--edge)}
.chip.on{background:var(--yellow)}
.pay{margin-top:8px;padding-top:20px;border-top:4px dashed var(--navy)}
.pay-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:0 0 14px}
.pay-rows dt{font:400 15px var(--pix);opacity:.8}.pay-rows dd{margin:0;font-size:17px}.pay-rows b{font-size:22px}.pay-rows b.short{color:#b3264f}
.pay-note{font-size:15px}
.pay-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pay-open{margin-top:12px;padding:10px 12px;background:var(--yellow);box-shadow:var(--edge)}
@media (max-width:640px){.f2,.pay-rows{grid-template-columns:1fr}.tk-form{padding:18px}.pg-head h1{font-size:36px}.pg-head .pg-obj{width:64px}}

/* order page */
.job{width:min(1180px,100%);margin:0 auto}
.job-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.job-id{display:flex;align-items:baseline;gap:14px}.job-id .num{font-size:28px;background:var(--navy);color:var(--cream);padding:2px 10px}.job-id h1{font-size:56px;word-break:break-word}
.stamp{display:inline-block;font:400 18px/1 var(--pix);padding:8px 12px;background:var(--cream);box-shadow:var(--edge);transform:rotate(-2deg)}
.stamp.s-working,.stamp.s-revising{background:var(--yellow)}.stamp.s-delivered{background:#D8F4EF}.stamp.s-done{background:#fff;color:var(--blue)}.stamp.s-refunding{background:#FFD0E0}.stamp.s-closed{background:var(--grey)}
.job-clock{background:var(--navy);color:var(--cream);padding:20px 24px;margin:0 var(--px) 28px;box-shadow:var(--edge)}
.jc-l{font:400 20px var(--pix);margin:0}.jc-t{font-size:clamp(48px,8vw,96px);line-height:1;margin:8px 0 14px;color:var(--yellow)}
.jc-bar{height:16px;background:#2c3d86}.jc-bar span{display:block;height:100%;background:var(--yellow);transform-origin:0 50%;transform:scaleX(0)}
.line{list-style:none;margin:0 0 32px;padding:20px 16px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;background:var(--cream);box-shadow:var(--edge),0 10px 0 0 var(--navy)}
.ln{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font:400 16px var(--pix);text-align:center;opacity:.5}
.ln img{width:78px;height:78px;filter:saturate(.3)}
.ln.done,.ln.now{opacity:1}.ln.done img{filter:none}.ln.done .ln-t::after{content:" ok";color:#0c6d63}
.ln-key{position:absolute;bottom:22px;left:50%;width:36px;height:60px;margin-left:8px;background:url(/assets/sp/walk-y.png) 0 0/144px 60px no-repeat;animation:walk2 .6s steps(4) infinite}
@keyframes walk2{to{background-position:-144px 0}}
.job-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}.job-grid .chat{grid-column:1/-1}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:18px 0 0;padding-top:14px;border-top:4px dashed var(--navy)}
.facts dt{font:400 14px var(--pix);opacity:.75}.facts dd{margin:0;font-size:16px}.facts a{display:inline-block;padding:6px 0;text-decoration:none;border-bottom:3px solid var(--yellow)}
.pv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.pv figure{margin:0}.pv figcaption{font:400 14px var(--pix);margin-top:6px}
.wm{position:relative;display:block;box-shadow:var(--edge);background:#fff;overflow:hidden}
.wm img{display:block;width:100%;height:auto;image-rendering:auto;user-select:none;-webkit-user-drag:none}
.wm::after{content:"TURNKEY PREVIEW";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 16px var(--pix);color:rgba(27,42,107,.55);transform:rotate(-24deg);pointer-events:none}
.chat-log{max-height:340px;overflow:auto;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.msg{align-self:flex-start;max-width:80%;background:#fff;padding:10px 12px;box-shadow:var(--edge);margin:4px}
.msg time{display:block;font-size:12px;opacity:.6;margin-top:4px}
.chat-in{display:flex;gap:10px;align-items:flex-end}.chat-in textarea{flex:1;font:700 17px/1.4 var(--num);color:var(--navy);border:0;padding:10px 12px;box-shadow:var(--edge);margin:var(--px);resize:vertical;outline:0}
@media (max-width:860px){.line{grid-template-columns:repeat(3,1fr)}.ln img{width:56px;height:56px}.job-grid{grid-template-columns:1fr}.job-id h1{font-size:36px}.facts{grid-template-columns:1fr}}

/* mine + stats + docs */
.m-bal{font-size:18px}.m-bal b{font-size:24px}
.claim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px;background:var(--yellow);box-shadow:var(--edge);margin:10px var(--px) 24px}.claim p{margin:0}
.panel h2+.m-list,.mine h2{margin-top:10px}
.mine .panel h2{font-size:26px;margin-top:22px}
.m-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:10px}
.m-list li{display:flex;align-items:center;gap:10px}
.m-list a{flex:1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;background:#fff;text-decoration:none;box-shadow:var(--edge);margin:var(--px)}
.m-list a:hover{background:#FFFBEA}.m-list a b{font:400 20px var(--pix);margin-right:auto}
.stats .killer{font:400 clamp(32px,5vw,58px)/1.15 var(--pix);background:var(--cream);padding:28px;box-shadow:var(--edge),0 12px 0 0 var(--navy);margin:var(--px) var(--px) 40px}
.killer b{background:var(--navy);color:var(--yellow);padding:0 10px;font-size:.92em}
.s-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 40px}
.s-grid div{background:var(--cream);padding:16px;box-shadow:var(--edge);margin:var(--px)}.s-grid dt{font:400 15px var(--pix)}.s-grid dd{margin:6px 0 0;font-size:16px}.s-grid dd.num,.s-grid dd .num{font-size:28px}
.stats h2{font-size:32px;margin-bottom:14px;color:var(--navy)}
@media (max-width:760px){.s-grid{grid-template-columns:1fr 1fr}}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}.toc a{font:400 17px var(--pix);text-decoration:none;background:var(--cream);padding:8px 12px;box-shadow:var(--edge);margin:var(--px)}
.toc a:hover{background:var(--yellow)}
.steps{margin:0;padding-left:24px}.steps li{margin-bottom:12px}
.tbl{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:16px}.tbl th{font:400 16px var(--pix);text-align:left;border-bottom:4px solid var(--navy);padding:8px}.tbl td{padding:8px;border-bottom:2px solid var(--cream2)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:0 0 12px}.kv dt{font:400 15px var(--pix);opacity:.8}.kv dd{margin:0;font-size:19px}
.trust{padding-left:20px}.trust li{margin-bottom:12px}
.pid{word-break:break-all;font-size:15px}.pid a{text-decoration:none;border-bottom:3px solid var(--yellow)}
@media (max-width:640px){.kv{grid-template-columns:1fr}.tbl{font-size:14px}}
.lost{min-height:calc(100svh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:40px 16px;background:var(--teal);background-image:radial-gradient(var(--tealD) 3px,transparent 3.5px);background-size:32px 32px}
.lost-lock{width:148px;height:203px}.lost h1{font-size:clamp(36px,6vw,64px);background:var(--cream);padding:12px 20px;box-shadow:var(--edge)}

/* dialogs + toasts */
.dlg{border:0;padding:24px;background:var(--cream);color:var(--navy);box-shadow:var(--edge),0 12px 0 0 var(--navy);max-width:min(440px,92vw);width:100%}
.dlg::backdrop{background:rgba(27,42,107,.55)}
.dlg h2{font-size:28px;margin:0 0 14px}
.dlg-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:var(--yellow);font:400 26px/1 var(--pix);box-shadow:var(--edge);color:var(--navy)}
.wp-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.wp-item{display:flex;align-items:center;gap:12px;border:0;background:#fff;color:var(--navy);padding:10px 12px;font:400 18px var(--pix);box-shadow:var(--edge);margin:var(--px);min-height:48px}
.wp-item:hover{background:var(--yellow)}.wp-item img{width:28px;height:28px;image-rendering:auto}.wp-dot{width:28px;height:28px;background:var(--teal)}
.wp-get{display:flex;flex-wrap:wrap;gap:10px 16px;margin-bottom:10px}.wp-get a{font:400 15px var(--pix)}
.wp-err{color:#b3264f}.wp-off{margin-top:6px}
.btn.ghost{border:0;background:#fff;padding:10px 14px;font:400 16px var(--pix);color:var(--navy);box-shadow:var(--edge)}
.tstack{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;flex-direction:column;gap:12px;max-width:min(380px,calc(100vw - 32px))}
.toast{position:relative;padding:14px 44px 14px 16px;background:#FFF2A8;box-shadow:var(--edge),6px 8px 0 0 rgba(27,42,107,.3);font-size:16px}
.toast.ok{background:#D8F4EF}.toast.err{background:#FFD0E0}
.toast a{display:block;margin-top:6px;font:400 15px var(--pix)}
.toast .tx{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;background:transparent;font:400 22px var(--pix);color:var(--navy)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.belt-pin{height:auto}.belt-view{position:relative;top:0;height:auto;padding:40px 0;overflow-x:auto}.card{opacity:1;transform:none}}