.device-stage{width:min(990px,calc(100% - 70px));margin:auto;perspective:1600px;padding:0 25px 30px}.device{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);position:relative}.lid{padding:13px 12px 19px;border-radius:22px 22px 8px 8px;background:linear-gradient(135deg,oklch(.67 .005 95),oklch(.25 .005 95) 9%,oklch(.14 0 0) 60%,oklch(.5 0 0));box-shadow:0 0 0 1px oklch(.6 0 0),inset 0 0 0 2px oklch(.75 0 0),0 25px 50px -25px oklch(.2 .01 95 / .3);position:relative;transform-origin:50% 100%;animation:open-laptop 1.7s var(--ease) both}.camera{position:absolute;width:4px;height:4px;background:oklch(.4 .04 240);border-radius:50%;top:5px;left:50%}.screen{background:var(--surface);border-radius:10px;overflow:hidden;display:grid;grid-template-columns:170px 1fr;text-align:left;min-height:430px}.base{height:17px;position:relative;margin:0 -34px;border-radius:2px 2px 50% 50% / 2px 2px 13px 13px;background:linear-gradient(oklch(.86 0 0),oklch(.7 0 0) 40%,oklch(.38 0 0));box-shadow:0 3px 1px oklch(.3 0 0 / .4)}.base:before{content:'';display:block;width:120px;height:5px;border-radius:0 0 12px 12px;background:oklch(.6 0 0);margin:auto;box-shadow:inset 0 1px 3px oklch(.2 0 0 / .3)}.device:after{content:'';position:absolute;left:3%;right:3%;bottom:-24px;height:25px;border-radius:50%;background:oklch(.2 .005 95 / .22);filter:blur(14px);z-index:-1}.sidebar{background:oklch(.964 .008 95);padding:19px 13px;display:flex;flex-direction:column;border-right:1px solid var(--border);font-size:11px}.app-brand{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600}.app-brand img{width:25px;height:25px}.new-task{margin:25px 0 20px;padding:9px;border:1px solid var(--border);border-radius:5px;color:var(--muted)}.side-label{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 7px 8px}.side-task{padding:9px 8px;border-radius:5px;margin:1px 0}.side-task.active{background:oklch(.9 .021 135);color:var(--green)}.side-bottom{margin-top:auto;padding-top:25px;display:flex;gap:8px;align-items:center}.initials{background:var(--surface);border:1px solid var(--border);width:27px;height:27px;display:grid;place-items:center;border-radius:50%;font-size:9px}.workspace{min-width:0;display:flex;flex-direction:column}.workspace-bar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--border);font-size:10px;gap:12px}.sample-tag{border:1px solid var(--border);border-radius:20px;padding:3px 8px;font:8px var(--mono);letter-spacing:.02em;color:var(--muted);white-space:nowrap}.conversation{padding:22px 30px 13px;flex:1}.request{background:oklch(.959 .009 95);border-radius:9px 9px 2px 9px;padding:10px 15px;margin-left:40px;font-size:12px;line-height:1.5}.assistant-line{display:flex;gap:9px;align-items:center;margin:17px 0 10px;font-size:11px}.assistant-line img{width:25px;height:25px}.work-note{color:var(--muted);font-size:10px;margin:0 0 12px 34px}.deliverable{border:1px solid var(--border);border-radius:7px;margin-left:34px;background:var(--surface)}.doc-head{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border)}.doc-head strong{font-size:12px;font-weight:600}.doc-head span{font:8px var(--mono);color:var(--green)}.doc-row{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid oklch(.94 .006 95);font-size:10px}.doc-row:last-child{border:0}.row-num{font:9px var(--mono);color:var(--muted)}.doc-row strong{display:block;font-size:11px;font-weight:500}.doc-row small{font-size:9px;color:var(--muted)}.row-tag{color:var(--green);font-size:8px;border-radius:3px;background:var(--sage);padding:3px 6px}.sources{margin:9px 0 0 34px}.sources summary{font-size:9px;color:var(--muted);cursor:pointer;min-height:44px;display:flex;align-items:center}.sources summary:before{content:'↗';margin-right:7px}.sources p{font-size:10px;padding-bottom:7px;color:var(--muted)}.approval{margin:8px 0 0 34px;border-radius:6px;background:oklch(.959 .013 130);padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px}.approval button{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:8px 10px;min-height:44px;font-size:10px;white-space:nowrap}.approval button:hover{background:var(--surface);border-color:var(--fg)}.composer{border:1px solid var(--border);border-radius:7px;margin:0 30px 18px;padding:11px 13px;font-size:10px;color:var(--muted);display:flex;justify-content:space-between}.demo-caption{font:10px/1.6 var(--mono);color:var(--muted);margin:15px 20px 0}.demo-status{font-size:10px;min-height:18px;margin-top:5px;color:var(--green)}
  @keyframes open-laptop{from{transform:rotateX(-32deg) translateY(18px);opacity:.2}to{transform:rotateX(0) translateY(0);opacity:1}}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.playing .deliverable{animation:enter .7s var(--ease) both}.playing .approval{animation:enter .7s .45s var(--ease) both}.motion-paused *{animation-play-state:paused!important;transition:none!important}.motion-paused .reveal{opacity:1!important;transform:none!important}.reveal{transition:opacity .7s,transform .7s}.js-motion .reveal:not(.visible){opacity:0;transform:translateY(22px)}
.ring{position:relative;height:clamp(320px,34vw,440px);max-width:1120px;margin:0 auto;--n:26;--ring-dur:140s;--float:5px}
.ring::before{content:"";position:absolute;inset:10% 14%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--lapel-soft) 85%,transparent),transparent 72%);pointer-events:none}
.ring__tiles{position:absolute;inset:0}
.tile{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(17,17,16,.05),0 12px 24px -14px rgba(17,17,16,.28);
  offset-path:ellipse(46% 43% at 50% 50%);offset-rotate:0deg;offset-distance:calc(var(--i)/var(--n)*100%);
  animation:ring var(--ring-dur) linear infinite reverse;animation-delay:calc(var(--i)/var(--n)*var(--ring-dur)*-1);
  transition:box-shadow .3s,border-color .3s}
.tile img{width:30px;height:30px;object-fit:contain;display:block}
.tile.is-hot{border-color:var(--lapel);box-shadow:0 0 0 3px var(--lapel-soft),0 12px 24px -14px rgba(17,17,16,.28)}
@keyframes ring{
  0%{offset-distance:0%;transform:scale(.94)}
  25%{offset-distance:25%;transform:scale(1.05)}
  50%{offset-distance:50%;transform:scale(.94)}
  75%{offset-distance:75%;transform:scale(.84);opacity:.88}
  100%{offset-distance:100%;transform:scale(.94)}
}
.ring:is([data-state=paused],.is-off,.is-hidden) :is(.tile,.mascot,.spark i){animation-play-state:paused}
.ring:is([data-state=paused],.is-off,.is-hidden) .ring__core::after{animation-play-state:paused}
/* mascot: layout centring on .ring__core, float on .mascot, grounding shadow on ::after, sparks anchored to the hands */
.ring__core{position:absolute;top:50%;left:50%;width:clamp(220px,20.8vw,300px);transform:translate(-50%,-50%)}
.ring__core img{width:100%;height:auto;display:block}
.ring__core::after{content:"";position:absolute;left:50%;bottom:-10px;width:44%;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(17,17,16,.16),transparent);transform:translateX(-50%);animation:shade 6s ease-in-out infinite;pointer-events:none}
.mascot{position:relative;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(calc(var(--float)*-1))}50%{transform:translateY(var(--float))}}
@keyframes shade{0%,100%{transform:translateX(-50%) scale(.86);opacity:.55}50%{transform:translateX(-50%) scale(1);opacity:1}}
.spark{position:absolute;width:0;height:0;pointer-events:none}
.spark--l{left:7.5%;top:52%}
.spark--r{left:92.5%;top:51.5%}
.spark i{position:absolute;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#d6ebff;box-shadow:0 0 5px 2px rgba(110,175,255,.7);opacity:0;offset-path:var(--p);offset-rotate:0deg;animation:spark 3.8s ease-out infinite;animation-delay:var(--t)}
.spark i:nth-child(3){width:4px;height:4px;margin:-2px}
.spark i:nth-child(4){width:7px;height:7px;margin:-3.5px;border-radius:0;box-shadow:none;background:#8fc2ff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.spark--l i:nth-child(1){--p:path("M0 0Q-6-12-16-26");--t:0s}
.spark--l i:nth-child(2){--p:path("M0 0Q-10-6-24-14");--t:-.95s}
.spark--l i:nth-child(3){--p:path("M0 0Q-2-14-10-30");--t:-1.9s}
.spark--l i:nth-child(4){--p:path("M0 0Q-8-10-18-22");--t:-2.85s}
.spark--r i:nth-child(1){--p:path("M0 0Q6-12 16-26");--t:-.5s}
.spark--r i:nth-child(2){--p:path("M0 0Q10-6 24-14");--t:-1.45s}
.spark--r i:nth-child(3){--p:path("M0 0Q2-14 10-30");--t:-2.4s}
.spark--r i:nth-child(4){--p:path("M0 0Q8-10 18-22");--t:-3.35s}
@keyframes spark{0%{offset-distance:0%;opacity:0;transform:scale(.5)}18%{opacity:1}60%{opacity:.55}100%{offset-distance:100%;opacity:0;transform:scale(1.1)}}
.ring__toggle{position:absolute;right:0;bottom:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.ring__toggle:hover{color:var(--ink);border-color:var(--ink)}
.ring__toggle svg{width:16px;height:16px}
.ring__toggle .ic-play,.ring[data-state=paused] .ic-pause{display:none}
.ring[data-state=paused] .ic-play{display:block}
.apps__note{max-width:640px;margin:clamp(10px,2vw,20px) auto 0;text-align:center;font-size:15px;color:var(--muted);text-wrap:pretty}
.apps__cta{text-align:center;margin-top:18px}
.apps__cta .btn svg{width:16px;height:16px}
@media(max-width:767px){
  .ring{height:300px;--n:12;--float:2.5px}
  .ring__core{width:clamp(150px,42vw,180px)}
  .spark i:nth-child(n+3){display:none}
  .tile{width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:13px;offset-path:ellipse(42% 44% at 50% 50%)}
  .tile img{width:24px;height:24px}
  .tile:nth-child(n+13){display:none}
  .ring__toggle{width:36px;height:36px}
}
@media(min-width:768px) and (max-width:1023px){
  .ring{height:360px;--n:18;--float:4px}
  .ring__core{width:clamp(200px,28vw,240px)}
  .tile{width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:14px}
  .tile img{width:26px;height:26px}
  .tile:nth-child(n+19){display:none}
}
@supports not (offset-path:ellipse(1px 1px)){
  .ring{height:auto;display:grid;gap:20px;justify-items:center}
  .ring::before{display:none}
  .ring__tiles{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .tile{position:static;margin:0;animation:none}
  .ring__core{position:static;transform:none;order:-1;width:240px}
  .mascot,.ring__core::after{animation:none}
  .spark{display:none}
  .ring__toggle{display:none}
}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.plan{padding:30px;background:var(--bg);border:1px solid var(--border);border-radius:10px}.plan.pro{background:var(--surface);border-color:oklch(.57 .045 145)}.plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.plan h3{font-size:21px;letter-spacing:-.03em}.plan-label{font:9px var(--mono);color:var(--green);border:1px solid var(--border);border-radius:20px;padding:4px 8px}.plan-description{font-size:13px;color:var(--muted);margin:14px 0 25px;min-height:40px}.price{font-size:49px;letter-spacing:-.05em;line-height:1.1}.price small{font-size:13px;color:var(--muted);letter-spacing:0}.vat{font-size:10px;color:var(--muted);margin-top:6px}.plan ul{list-style:none;padding:24px 0 17px;margin:24px 0 0;border-top:1px solid var(--border);font-size:13px}.plan li{padding:6px 0}.plan li:before{content:'✓';margin-right:10px}.plan .button{width:100%;margin-top:6px}.pricing-note{font-size:12px;color:var(--muted);text-align:center;margin-top:25px}
.faqs{border-top:1px solid var(--border)}.faqs details{border-bottom:1px solid var(--border)}.faqs summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:77px;font-size:16px;padding:18px 0;cursor:pointer}.faqs summary::-webkit-details-marker{display:none}.faqs summary:after{content:'+';font-size:25px;font-weight:400}.faqs details[open] summary:after{content:'−'}.faqs details p{font-size:14px;color:var(--muted);padding:0 30px 23px 0;max-width:570px}.faqs summary:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px}