@font-face{font-family:'Rubik';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/rubik-hebrew-400_800.woff2') format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/rubik-latin-400_800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2212}

:root{
  --ink:#14183A; --ink2:#4B5278; --mute:#646B8E;
  --canvas:#F3F4FB; --dot:#C3C9E2; --paper:#fff; --line:#E1E4F2;
  --blue:#2D5BFF; --blue-d:#1D40C8;
  --c-blue:#2D5BFF; --c-orange:#D9480F; --c-green:#0B8F63; --c-pink:#C2255C; --c-violet:#6741D9; --c-teal:#0C7E9E; --c-amber:#B76E00;
  --t-blue:#E4EBFF; --t-orange:#FFE9DD; --t-green:#DDF6EB; --t-pink:#FFE3EE; --t-violet:#ECE6FF; --t-teal:#DBF2F8; --t-amber:#FFF0CC;
  --ease:cubic-bezier(.16,1,.3,1);
  --sh1:0 1px 1px rgba(20,24,58,.05),0 3px 6px rgba(20,24,58,.06),0 12px 24px rgba(20,24,58,.08),0 28px 48px rgba(45,91,255,.08);
  --man:#B76E00; --man-d:#7A4800;
  --rx:18deg; --ry:0deg;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:72px;background:var(--canvas)}
html.smooth{scroll-behavior:smooth}
body{font-family:'Rubik','Assistant',system-ui,sans-serif;font-size:16px;line-height:1.55;color:var(--ink);background:var(--canvas);overflow-x:clip;-webkit-text-size-adjust:100%}
::selection{background:#C9D6FF;color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
*{caret-color:var(--blue)}
:root{accent-color:var(--blue-d);scrollbar-color:var(--mute) var(--canvas);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--canvas)}
::-webkit-scrollbar-thumb{background:var(--mute);border:3px solid var(--canvas);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--ink)}
svg{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:50}
.skip:focus{top:10px}

/* header */
.top{position:relative;z-index:20;display:flex;align-items:center;gap:24px;height:64px;padding:0 max(24px,calc((100% - 1320px)/2));}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.01em}
.nav{display:flex;gap:6px;margin-inline-start:auto}
.nav a{color:var(--ink2);text-decoration:none;font-weight:500;font-size:15px;padding:8px 14px;border-radius:999px;transition:background-color .2s,color .2s}
.nav a:hover{background:#E6E9F7;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:700;font-size:17px;color:#fff;background:var(--blue-d);border:0;border-radius:14px;padding:14px 22px;cursor:pointer;text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 2px 4px rgba(33,71,216,.3),0 10px 22px rgba(33,71,216,.28);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s}
.btn:hover{background:#1735AC;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:#8E9BC9;box-shadow:none;cursor:default;transform:none}
.btn--sm{font-size:15px;padding:9px 18px;border-radius:12px}
.btn--block{width:100%}

/* hero: the canvas is the page; copy, controls and form float in front of it */
@property --lift{syntax:'<length>';inherits:true;initial-value:0px}
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:28px;align-items:start;height:max(790px,calc(100svh - 64px));max-height:940px;padding:10px max(24px,calc((100% - 1320px)/2)) 20px;overflow:clip;border-bottom:1px solid var(--line)}
.hero__main{position:relative;z-index:3;display:flex;flex-direction:column;height:100%;min-width:0}
.hero__copy{padding-top:8px}
h1{font-weight:800;font-size:clamp(2rem,4.2vw,3.7rem);line-height:1.08;letter-spacing:-.025em;text-wrap:balance;max-width:15em}
.hand{position:relative;color:var(--man-d);white-space:nowrap}
.sys-w{color:var(--blue-d)}
.hand svg{position:absolute;inset-inline:0;bottom:-.17em;width:100%;height:.22em;overflow:visible}
.hand path{fill:none;stroke:var(--man);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s .5s var(--ease) forwards;vector-effect:non-scaling-stroke}
@keyframes draw{to{stroke-dashoffset:0}}
.lede{text-wrap:pretty;margin-top:14px;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6;color:var(--ink2);max-width:37em}
.trust{list-style:none;padding:0;margin-top:12px;display:grid;grid-template-columns:repeat(2,max-content);gap:4px 28px;font-size:14.5px;font-weight:500;color:var(--ink)}
.trust li{display:flex;align-items:center;gap:7px}
.trust svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--c-green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* canvas toolbar: switch, clock, illustration label */
.bar{margin-top:16px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;width:fit-content;max-width:100%;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:7px 16px 7px 8px;box-shadow:var(--sh1)}
.seg{display:flex;background:#EBEDF8;border-radius:13px;padding:3px;gap:2px}
.seg button{display:flex;align-items:center;gap:7px;font:inherit;font-weight:600;font-size:15px;color:var(--ink2);background:transparent;border:0;border-radius:11px;padding:8px 16px;cursor:pointer;min-height:42px;transition:background-color .25s,color .25s,box-shadow .25s}
.seg button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{box-shadow:0 1px 2px rgba(20,24,58,.18),0 4px 10px rgba(20,24,58,.12)}
.seg button[data-mode="man"][aria-pressed="true"]{background:var(--man-d);color:#fff}
.seg button[data-mode="auto"][aria-pressed="true"]{background:var(--blue-d);color:#fff}
.clock{display:flex;align-items:baseline;gap:9px;min-width:112px}
.clock__k{font-size:13.5px;font-weight:600;color:var(--ink2)}
.clock__v{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;direction:ltr;color:var(--man-d);transition:color .3s}
.is-auto .clock__v{color:var(--blue-d)}
.demo{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink2);background:#EEF0FA;border-radius:99px;padding:5px 12px}
.demo i{width:8px;height:8px;border-radius:50%;background:var(--c-pink)}

/* the canvas: a tilted plane with real depth */
.zone{position:relative;flex:1;min-height:300px}
@media (min-width:1181px){.zone{margin-top:16px}}
.stage{position:absolute;left:0;right:0;top:0;height:100%;perspective:1300px;perspective-origin:50% 62%;pointer-events:none;z-index:1}
.plane{position:absolute;inset:0;transform-origin:50% 100%;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));direction:ltr;will-change:transform}
.plane::before{content:"";position:absolute;inset:-420px -60vw 0;background-color:#FBFBFF;background-image:radial-gradient(circle,#AEB7DA 1.6px,transparent 2px),radial-gradient(700px 380px at 78% 62%,rgba(45,91,255,.09),transparent 70%),radial-gradient(560px 340px at 30% 88%,rgba(194,37,92,.06),transparent 70%),radial-gradient(520px 300px at 55% 50%,rgba(11,143,99,.06),transparent 70%);background-size:30px 30px,auto,auto,auto;background-position:center bottom,0 0,0 0,0 0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 48%);mask-image:linear-gradient(to bottom,transparent 0,#000 48%)}
.compact .plane::before{inset:0 10px;border-radius:30px;border:1px solid var(--line);box-shadow:0 -2px 0 rgba(255,255,255,.9) inset,0 30px 60px rgba(20,24,58,.1),0 8px 18px rgba(20,24,58,.06);-webkit-mask-image:none;mask-image:none;background-position:center}
#nodes{position:absolute;inset:0;transform-style:preserve-3d}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(4px)}
.wires path{fill:none;stroke-linecap:round}
.wires .w0{stroke:#8E98C2;stroke-width:3;stroke-dasharray:1 9}
.wires .w1{stroke:var(--blue);stroke-width:4.4}
.m-man .wires .w1{stroke:var(--man)}
.node{position:absolute;padding:13px 14px;border-radius:20px;background:var(--paper);border:1px solid #D8DCEF;--lift:48px;transform:translateZ(var(--lift));transform-style:preserve-3d;transition:--lift .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;box-shadow:0 1px 1px rgba(20,24,58,.06),0 4px 8px rgba(20,24,58,.07),0 14px 26px rgba(20,24,58,.1);direction:rtl}
.node::before{content:"";position:absolute;top:-1px;inset-inline:18px;height:5px;border-radius:0 0 6px 6px;background:var(--col)}
.node .cs{position:absolute;inset:14px 6px -16px;border-radius:24px;background:rgba(20,24,58,.34);filter:blur(13px);transform:translateZ(calc(var(--lift) * -1 + 1px));z-index:-1}
.node .hd{display:flex;align-items:center;gap:10px}
.node .chip{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--tint)}
.node .chip svg{width:22px;height:22px;fill:none;stroke:var(--col);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.node h3{font-size:17px;font-weight:700;line-height:1.2}
.node p{margin-top:12px;font-size:14.5px;line-height:1.38;color:var(--ink2);min-height:39px;transition:color .3s}
.node .ok{position:absolute;top:-10px;inset-inline-start:-10px;width:26px;height:26px;border-radius:50%;background:var(--c-green);display:grid;place-items:center;transform:scale(0);transition:transform .4s var(--ease);box-shadow:0 3px 8px rgba(11,143,99,.45)}
.node .ok svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.node .bar2{position:absolute;inset-inline:14px;bottom:7px;height:3px;border-radius:3px;background:var(--col);transform:scaleX(0);transform-origin:right}
.node s{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #9AA3CB;top:calc(50% - 5px)}
.node s.r{right:-6px}.node s.l{left:-6px}
.node.is-done .ok{transform:scale(1)}
.node.is-active{--lift:96px;transform:translateZ(var(--lift)) scale(1.04);border-color:var(--col);box-shadow:0 2px 3px rgba(20,24,58,.08),0 10px 18px rgba(20,24,58,.1),0 26px 44px rgba(20,24,58,.14),0 0 0 5px var(--tint)}
.node.is-active p{color:var(--ink)}
.node.is-active .bar2{transform:scaleX(1);transition:transform var(--wk,.3s) linear}
.m-man .node.is-done .ok{background:var(--man);box-shadow:0 3px 8px rgba(183,110,0,.4)}
.node--sum{--col:var(--ink);--tint:#E4E7F6}
.sum{margin-top:9px;display:grid;gap:7px}
.sum__r{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13px}
.sum__r span{font-weight:600;color:var(--ink2)}
.sum__r i{display:block;height:9px;border-radius:9px;background:#E6E9F6;overflow:hidden;direction:rtl}
.sum__r b{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:right;border-radius:9px}
.sum__r--m b{background:var(--man)}.sum__r--a b{background:var(--blue)}
.sum__r em{font-style:normal;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;min-width:50px;text-align:end}
.sum__r--m em{color:var(--man-d)}.sum__r--a em{color:var(--blue-d)}

/* the order, as a pin standing on the plane */
.pin{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:translate3d(-999px,0,0);pointer-events:none}
.pin__h{position:absolute;left:-22px;top:-66px;width:44px;height:66px;transform-origin:50% 100%;transform:translateZ(var(--pz,112px)) rotateX(calc(var(--rx) * -1)) scale(.8)}
.pin__b{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--blue-d);display:grid;place-items:center;box-shadow:0 0 0 4px #fff,0 6px 12px rgba(33,71,216,.4),0 16px 28px rgba(33,71,216,.3)}
.pin__b::after{content:"";position:absolute;left:14px;top:46px;width:16px;height:16px;background:var(--blue-d);clip-path:polygon(0 0,100% 0,50% 100%)}
.pin__b svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pin__who{display:none;position:absolute;left:-12px;top:-12px;width:28px;height:28px;border-radius:50%;background:#fff;border:2.5px solid var(--man);place-items:center;animation:bob .5s ease-in-out 6 alternate}
.pin__who svg{width:16px;height:16px;fill:none;stroke:var(--man-d);stroke-width:2.4;stroke-linecap:round}
.m-man .pin__who{display:grid}
.pin{transition:opacity .5s .35s}
.is-end .pin{opacity:0}
.m-man .pin__b{background:var(--man);box-shadow:0 0 0 4px #fff,0 6px 12px rgba(183,110,0,.4),0 16px 28px rgba(183,110,0,.28)}
.m-man .pin__b::after{background:var(--man)}
@keyframes bob{to{transform:translateY(-4px)}}

/* recipe dock, part of the canvas */
.dock{position:absolute;inset-inline-start:0;bottom:2px;z-index:4;width:min(540px,100%);display:flex;flex-direction:column-reverse;border-radius:18px;background:#14183A;color:#E9ECFF;box-shadow:0 2px 3px rgba(20,24,58,.15),0 14px 28px rgba(20,24,58,.22),0 34px 56px rgba(20,24,58,.18);overflow:hidden}
.dock__bar{display:flex;align-items:center;gap:10px;width:100%;height:48px;font:inherit;font-weight:600;font-size:14px;color:#E9ECFF;background:transparent;border:0;padding:0 14px;cursor:pointer;text-align:start}
.dock__bar svg{width:20px;height:20px;fill:none;stroke:#9DB1FF;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dock__k{flex:none}
.dock__now{flex:1;min-width:0;text-align:start;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:13px;color:#9BE7C4;white-space:nowrap;overflow:hidden;text-overflow:clip;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.07)}
.dock__bar .chev{transition:transform .3s var(--ease);transform:rotate(180deg)}
.dock__bar[aria-expanded="true"] .chev{transform:none}
.dock__bar:focus-visible{outline-color:#9DB1FF;outline-offset:-4px}
.dock__code{margin:0;padding:12px 16px 6px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-weight:500;font-size:13px;line-height:1.75;white-space:pre;overflow:hidden;display:block;border-bottom:1px solid rgba(255,255,255,.08)}
.dock__code[hidden]{display:none}
.dock__code code{display:block;font:inherit}
.ln{display:block;border-radius:6px;padding:0 6px;margin:0 -6px;transition:background-color .25s,color .25s;color:#B8C0E6}
.dock__code:not([hidden]) .ln{animation:type .5s steps(18,end) both;animation-delay:calc(var(--n,0) * .08s)}
.ln.on{background:rgba(120,150,255,.24);color:#fff}
.ln.done{color:#9BE7C4}
.dock__code b{font-weight:500}
.k{color:#C4A9FF}.n{color:inherit}.s{color:#8FE3B5}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* lead card */
.card{position:relative;z-index:4;margin-top:6px;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:26px 26px 24px;box-shadow:0 1px 1px rgba(20,24,58,.05),0 4px 8px rgba(20,24,58,.06),0 16px 32px rgba(20,24,58,.09),0 40px 70px rgba(45,91,255,.12)}
.card h2{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.2;margin-bottom:10px}
.fit__field{margin-top:14px;min-width:0}
.fit__field label{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
.fit__field small{font-weight:400;color:var(--mute);font-size:13px}
.fit input[type=text],.fit input[type=tel],.fit textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#F7F8FD;border:1.5px solid #CBD0E6;border-radius:12px;padding:9px 12px;transition:border-color .2s,background-color .2s,box-shadow .2s}
.fit textarea{resize:vertical;min-height:76px;line-height:1.4}
.fit input::placeholder,.fit textarea::placeholder{color:#5F6690;opacity:1}
.fit input:hover,.fit textarea:hover{border-color:#9AA3CE}
.fit input:focus,.fit textarea:focus{outline:0;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px #DCE5FF}
.fit [aria-invalid="true"]{border-color:#C92A2A;background:#FFF5F5}
.fit__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fit__error{color:#B02020;font-size:13px;line-height:1.35;min-height:0}
.fit__error:empty{display:none}
.fit__error[data-role=form-error]{margin-top:8px;text-align:center}
.fit__consent{margin-top:12px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.fit__consent a{color:var(--blue-d);text-underline-offset:3px}
.fit__check{display:flex;gap:9px;align-items:flex-start;margin:10px 0 14px}
.fit__check input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--blue-d)}
.fit__check label{font-size:12.5px;line-height:1.4;color:var(--ink2)}
.fit__after{margin-top:8px;text-align:center;font-size:13px;color:var(--ink2)}
.fit__done{padding:30px 6px;text-align:center}
.fit__done h2,.fit__done h3{margin-bottom:8px}.fit__done p+p{margin-top:8px;color:var(--ink2)}
.fit__done:focus{outline:0}

/* compact: tablet and phone. The canvas becomes a plate in the flow of the page. */
@media (max-width:1180px){
  .hero{display:block;height:auto;max-height:none;padding:10px max(20px,calc((100% - 760px)/2)) 40px;background-image:radial-gradient(circle,var(--dot) 1.2px,transparent 1.5px);background-size:24px 24px}
  .hero__main{height:auto}
  .zone{flex:none}
  .stage{perspective:1000px;perspective-origin:50% 40%}
  .card{margin:30px auto 0;max-width:560px}
}
@media (max-width:900px){
  body{font-size:15.5px}
  .top{height:58px;padding:0 16px;gap:10px}
  .nav{display:none}
  .btn--sm{margin-inline-start:auto}
  .hero{padding:8px 16px 36px}
  h1{font-size:2.05rem;max-width:none}
  .lede{font-size:1rem;margin-top:10px}
  .trust{grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13px;line-height:1.3;margin-top:12px}
  .trust li{align-items:flex-start;gap:5px}
  .trust svg{width:16px;height:16px;margin-top:1px}
  .bar{width:100%;display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:8px;margin-top:14px}
  .seg{display:grid;grid-template-columns:1fr 1fr}
  .seg button{justify-content:center;padding:8px 10px}
  .clock{flex-direction:column;align-items:flex-end;gap:2px;min-width:78px;padding-inline:4px}
  .clock__v{font-size:24px}
  .demo{grid-column:1/-1;justify-self:start}
  .dock{width:100%}
}
@media (max-width:560px){
  .node{padding:10px 11px;border-radius:16px}
  .node .chip{width:32px;height:32px;border-radius:10px}
  .node .chip svg{width:19px;height:19px}
  .node h3{font-size:14.5px}
  .node p{margin-top:7px;font-size:13px;min-height:36px}
  .sum{margin-top:7px;gap:5px}
  .sum__r{grid-template-columns:46px minmax(0,1fr) auto;gap:6px;font-size:12px}
  .sum__r em{min-width:44px;font-size:12px}
  .pin__h{transform:translateZ(var(--pz,104px)) rotateX(calc(var(--rx) * -1)) scale(.68)}
}
@media (max-width:420px){.fit__row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
  html,html.smooth{scroll-behavior:auto}
  .hand path{stroke-dashoffset:0}
}

/* ===================================================================
   The rest of the page: one wire runs down it, every section hangs on it
   =================================================================== */
.ill2{margin-inline-start:auto;font-size:11px;font-weight:700;color:var(--ink2);background:#EEF0FA;border-radius:99px;padding:2px 8px}
.rest{--gut:max(24px,calc((100% - 1320px)/2));--lane:56px;position:relative;background-color:var(--canvas);background-image:radial-gradient(circle,var(--dot) 1.2px,transparent 1.5px);background-size:24px 24px}
.spine{position:absolute;inset:0;z-index:2;pointer-events:none}
.spine__w{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sp0{fill:none;stroke:#8E98C2;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 9}
.sp1{fill:none;stroke:var(--blue);stroke-width:4.4;stroke-linecap:round}
.sn{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px}
.sn__c{position:absolute;inset:0;border-radius:16px;background:var(--paper);border:1px solid #D8DCEF;display:grid;place-items:center;box-shadow:0 1px 1px rgba(20,24,58,.06),0 4px 8px rgba(20,24,58,.07);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s,background-color .3s}
.sn__c::before{content:"";position:absolute;top:-1px;inset-inline:10px;height:4px;border-radius:0 0 4px 4px;background:var(--col)}
.sn__c svg{width:24px;height:24px;fill:none;stroke:var(--col);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sn.is-hit .sn__c{transform:translateY(-8px) scale(1.1);background:var(--tint);border-color:var(--col);box-shadow:0 2px 3px rgba(20,24,58,.08),0 12px 20px rgba(20,24,58,.14),0 0 0 4px var(--tint)}
.sn.is-hit .sn__c{animation:nodeHit .7s var(--ease)}
@keyframes nodeHit{from{transform:translateY(0) scale(1)}45%{transform:translateY(-14px) scale(1.16)}}
.sn__ok{position:absolute;top:-9px;inset-inline-start:-9px;width:22px;height:22px;border-radius:50%;background:var(--c-green);display:grid;place-items:center;transform:scale(0);transition:transform .45s var(--ease) .25s;box-shadow:0 3px 8px rgba(11,143,99,.45)}
.sn__ok svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.sn.is-hit .sn__ok{transform:scale(1)}
.spine__pin{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.spine__pin.is-hidden{opacity:0}
.spine__pin{transition:opacity .3s}
.spine__pin span{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;background:var(--blue-d);display:grid;place-items:center;box-shadow:0 0 0 4px #fff,0 6px 12px rgba(33,71,216,.4),0 14px 24px rgba(33,71,216,.28);transition:opacity .4s}
.spine__pin svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec{position:relative;z-index:3;padding-top:72px}
.sec__in{padding-inline:calc(var(--gut) + 84px) var(--gut)}
.sec h2{font-size:clamp(1.75rem,2.7vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;text-wrap:balance;max-width:20em}
.sec__sub{margin-top:8px;color:var(--ink2);font-size:1.05rem}
.tag-ill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink2);background:#EEF0FA;border-radius:99px;padding:5px 12px;white-space:nowrap}
.tag-ill i{width:8px;height:8px;border-radius:50%;background:var(--c-pink)}
.tag-ill--s{margin-inline-start:auto;padding:3px 10px;font-size:11.5px}

/* shared small pieces */
.st{position:relative;display:inline-grid;font-style:normal}
.st em{grid-area:1/1;font-style:normal;font-weight:700;font-size:12.5px;line-height:1;padding:5px 10px;border-radius:99px;white-space:nowrap;justify-self:start}
.st .s1{background:var(--t-blue);color:#1735AC;opacity:0}
.st .s2{background:var(--t-green);color:#066A49;opacity:1}
.st--p .s2{background:var(--t-amber);color:#7A4A00}
.st--n .s1{opacity:1}
.is-play .st .s1{animation:sOut .35s var(--d,2s) both}
.is-play .st .s2{animation:sIn .35s var(--d,2s) both}
@keyframes sOut{from{opacity:1}to{opacity:0}}
@keyframes sIn{from{opacity:0;transform:translateY(5px)}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes wipe{from{clip-path:inset(0 0 0 100%)}}
@keyframes wipeL{from{clip-path:inset(0 100% 0 0)}}
.is-off *,.tab-off *{animation-play-state:paused!important}
.is-play .st--n .s1{animation:none}

/* ---- 2. the table turns into the system ---- */
.sys{padding-top:0}
.sys__track{position:relative;padding-top:72px}
.sys__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sys__ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sys__end{font:inherit;font-weight:700;font-size:15px;border:0;background:transparent;cursor:pointer;padding:8px 10px;border-radius:10px;min-height:40px}
.sys__end--t{color:var(--man-d)}.sys__end--s{color:var(--blue-d)}
.sys__end:hover{background:#E6E9F7}
#sys-range{-webkit-appearance:none;appearance:none;width:200px;height:28px;background:transparent;cursor:pointer}
#sys-range::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(270deg,var(--man),var(--blue))}
#sys-range::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(270deg,var(--man),var(--blue))}
#sys-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 2px 6px rgba(20,24,58,.3)}
#sys-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 2px 6px rgba(20,24,58,.3)}
.sys__stage{--sh:540px;position:relative;height:var(--sh);margin-top:6px;perspective:1500px;perspective-origin:50% 30%}
.sys__plane{position:absolute;inset:62px 0 66px;display:grid;grid-template-columns:5fr 7fr;gap:30px;align-items:center;transform-style:preserve-3d}
.sheet,.app{background:#fff;border:1px solid #D8DCEF;border-radius:16px;overflow:hidden;font-size:14px}
.sheet{transform-origin:100% 50%;transform:rotateY(-17deg) rotateX(5deg);box-shadow:0 2px 3px rgba(20,24,58,.06),0 14px 26px rgba(20,24,58,.1),0 30px 50px rgba(183,110,0,.1);opacity:calc(1 - var(--dim,0) * .3);filter:saturate(calc(1 - var(--dim,0) * .55))}
.app{transform-origin:0 50%;transform:translateZ(70px) rotateY(11deg) rotateX(5deg);box-shadow:0 2px 3px rgba(20,24,58,.08),0 18px 32px rgba(20,24,58,.14),0 40px 70px rgba(45,91,255,.18);border-color:#C3CFFA;opacity:calc(.62 + var(--ap,1) * .38)}
.sheet__bar,.app__bar{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;font-weight:600;font-size:13px;color:var(--ink2);border-bottom:1px solid var(--line)}
.sheet__bar{background:#F5F6FA}
.xl{width:22px;height:22px;border-radius:6px;background:var(--t-green);display:grid;place-items:center}
.xl svg{width:15px;height:15px;fill:none;stroke:var(--c-green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fx{margin-inline-start:auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mute);direction:ltr}
.fxv{font-size:13px;color:var(--ink);background:#fff;border:1px solid #CBD0E6;border-radius:6px;padding:2px 12px;min-width:76px}
.app__bar{background:#F4F6FF;border-bottom-color:#DCE4FF}
.app__bar i{width:10px;height:10px;border-radius:50%;background:#C3CBEB}
.app__bar i:nth-child(1){background:#F4A0A0}.app__bar i:nth-child(2){background:#F2D388}.app__bar i:nth-child(3){background:#9BDDB7}
.app__bar span{margin-inline-start:8px;color:var(--ink)}
.r{display:grid;grid-template-columns:30px 62px 1.15fr 1.3fr 42px 92px;align-items:center;height:42px;border-bottom:1px solid #E7E9F2}
.r>span{position:relative;padding:0 10px;height:100%;display:flex;align-items:center;border-inline-start:1px solid #E7E9F2;white-space:nowrap;overflow:visible;color:var(--ink);transition:opacity .2s}
.r--h{height:30px;background:#F5F6FA;color:var(--mute)}
.r--h>span{justify-content:center;font-weight:600;font-size:12px;color:var(--mute)}
.r .rn{justify-content:center;padding:0;background:#F5F6FA;color:var(--mute);font-size:12px;border-inline-start:0}
.r .c1{font-variant-numeric:tabular-nums}
.r[data-i]>span:not(.rn){opacity:var(--o,1)}
.r--dup .c1,.r--dup>span:nth-child(3){background:#FFF3D6}
.stale{background:#FFF3D6}
.stale b,.r--dup b{position:absolute;inset-inline-start:calc(100% - 8px);z-index:2;font-size:11px;font-weight:700;color:#fff;background:var(--man-d);border-radius:6px;padding:3px 7px;white-space:nowrap;top:50%;transform:translateY(-50%)}
.stale,.r--dup>span:has(b){flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.stale b,.r--dup b{position:static;transform:none;font-size:11px;line-height:1.2;padding:1px 6px}
.r--edit .ed{outline:2px solid var(--man);outline-offset:-2px;background:#FFFBEF;z-index:1;overflow:visible}
.r--edit u{display:inline-block;width:2px;height:18px;background:var(--ink);margin-inline-start:2px;animation:caret 1s steps(2) 8}
@keyframes caret{50%{opacity:0}}
.app__body{padding:10px 12px 12px;position:relative}
.ar{display:grid;grid-template-columns:62px 1.1fr 1.2fr 96px 54px;align-items:center;gap:6px;min-height:42px;border-bottom:1px solid #EAEDF8;padding:0 4px;font-size:14px}
.ar>span{white-space:nowrap}
.ar--h{min-height:30px;font-size:12px;font-weight:600;color:var(--mute)}
.ar:not(.ar--h)>span{opacity:var(--a,1)}
.a1{font-weight:700;font-variant-numeric:tabular-nums;color:var(--blue-d)}
.mg{display:flex}
.mg svg{width:20px;height:20px;fill:none;stroke:var(--c-pink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.app__side{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.mini{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#F4F6FF;border:1px solid #DCE4FF;border-radius:12px;padding:10px 12px;font-size:13px}
.mini b{font-weight:700;flex:1 0 100%;font-size:13px}
.stock i{flex:1;height:8px;border-radius:8px;background:#DDE3F7;overflow:hidden;display:block}
.stock u{display:block;height:100%;width:100%;background:var(--c-teal);transform-origin:right;transform:scaleX(.7);transition:transform .8s var(--ease) 1.4s}
.stock em,.rep em{font-style:normal;font-weight:700;font-size:12.5px;color:var(--ink2)}
.rep{flex-wrap:nowrap}
.rep b{flex:1 1 auto}
.rep__ic{width:30px;height:30px;border-radius:9px;background:var(--t-amber);display:grid;place-items:center;flex:none}
.rep__ic svg{width:18px;height:18px;fill:none;stroke:var(--c-amber);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rep em{display:flex;align-items:center;gap:4px;color:#066A49}
.rep em svg{width:16px;height:16px;fill:none;stroke:var(--c-green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.toast{margin-top:10px;width:fit-content;display:flex;align-items:center;gap:7px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;border-radius:11px;padding:8px 12px;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease) 1.2s,transform .5s var(--ease) 1.2s}
.toast svg{width:16px;height:16px;fill:none;stroke:#9BE7C4;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app .st em{opacity:0}
.app .st .s1{opacity:1}
.app .st--p .s2,.app .st .s2{opacity:0}
.app .mg svg{opacity:0;transition:opacity .4s}
.app.is-live .st .s1{opacity:0}
.app.is-live .st--n .s1{opacity:1}
.app .st em{transition:opacity .45s}
.app.is-live .st .s2{opacity:1}
.app .ar:nth-child(2) .st em{transition-delay:.9s}.app .ar:nth-child(3) .st em{transition-delay:1.5s}.app .ar:nth-child(4) .st em{transition-delay:2.1s}.app .ar:nth-child(5) .st em{transition-delay:2.6s}
.app.is-live .mg svg{opacity:1;transition-delay:1.9s}
.app.is-live .toast{opacity:1;transform:none}
.app.is-live .stock u{transform:scaleX(.46)}
.app .rep{opacity:.45;transition:opacity .5s}
.app .rep.is-on{opacity:1}
.app .rep em svg{transform:scale(0);transition:transform .45s var(--ease) .3s}
.app .rep.is-on em svg{transform:scale(1)}
.fly{position:absolute;inset:0;pointer-events:none;z-index:6}
.fly i{position:absolute;left:0;top:0;display:block;font-style:normal;font-weight:700;font-size:13px;padding:6px 12px;border-radius:99px;background:var(--man-d);color:#fff;white-space:nowrap;box-shadow:0 8px 18px rgba(20,24,58,.25);opacity:0;will-change:transform}
.notes__w{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:5}
.notes__w path{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease)}
.notes__w circle{fill:var(--blue);stroke:#fff;stroke-width:3;opacity:0;transition:opacity .3s .7s}
.notes.is-on~.notes__w path,.is-notes .notes__w path{stroke-dashoffset:0}
.is-notes .notes__w circle{opacity:1}
.note{position:absolute;z-index:6;max-width:240px;font-weight:600;font-size:15px;line-height:1.35;background:#fff;border:1px solid var(--blue);border-radius:12px;padding:9px 13px;box-shadow:0 6px 16px rgba(33,71,216,.18);opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.note[data-n="0"]{top:0;left:47%}
.note[data-n="1"]{top:0;left:6%}
.note[data-n="2"]{bottom:4px;left:6%}
.is-notes .note{opacity:1;transform:none}
.is-notes .note[data-n="1"]{transition-delay:.25s}.is-notes .note[data-n="2"]{transition-delay:.5s}
.sys__line{margin-top:6px;font-size:1.15rem;font-weight:600;color:var(--ink2);text-align:start}
.sys--st .sys__track::after{content:"";display:block;height:150svh}
.sys--st .sys__stick{position:sticky;top:max(0px,calc((100svh - 700px) / 2));padding-top:46px;padding-bottom:30px}
.sys--st .sys__stage{--sh:clamp(420px,calc(100svh - 330px),540px)}

/* ---- 3. how it works: a small flow of its own ---- */
.how{padding-bottom:8px}
.flow4{list-style:none;padding:0;margin-top:34px;display:grid;gap:44px;position:relative;z-index:1}
.flow4__w{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.how .sec__in{position:relative}
.flow4__w path{fill:none;stroke-linecap:round}
.flow4__w .f0{stroke:#8E98C2;stroke-width:3;stroke-dasharray:1 9}
.flow4__w .f1{stroke:var(--blue);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:0}
.flow4{gap:64px}
.stp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center;position:relative;z-index:1}
.stp:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.stp:nth-child(even) .stp__txt{order:2}
.stp__txt{max-width:30em}
.stp__n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue-d);color:#fff;font-weight:700;font-size:16px;margin-bottom:10px;box-shadow:0 0 0 5px var(--canvas)}
.stp h3{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;line-height:1.2;margin-bottom:6px}
.stp p{color:var(--ink2);font-size:1.02rem;line-height:1.6}
.stp .sr{position:absolute}
.scene{position:relative;min-height:250px;display:grid;place-items:center;border-radius:22px}
.win,.doc,.acct{width:100%;max-width:520px}
.win{background:#fff;border:1px solid #D8DCEF;border-radius:18px;overflow:hidden;box-shadow:0 2px 3px rgba(20,24,58,.06),0 14px 28px rgba(20,24,58,.1),0 32px 56px rgba(45,91,255,.1)}
.win__bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 12px;background:var(--ink);color:#E9ECFF;font-size:12.5px;font-weight:600}
.win__bar i{width:9px;height:9px;border-radius:50%;background:#5A628F}
.win__bar span{margin-inline-start:8px}
.zoom{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:10px;padding:10px;background:#F1F3FB}
.zoom__screen{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 8px;min-height:176px}
.zs{display:grid;grid-template-columns:.8fr 1.4fr 1fr;gap:10px;align-items:center;height:32px;border-bottom:1px solid #EEF0F8;font-size:13px;font-weight:600}
.zs--h{color:var(--mute);font-size:12px;height:28px}
.zs s{display:block;height:7px;border-radius:5px;background:#E3E6F3;width:70%}
.mk{font-style:normal;position:absolute;border:2.5px solid var(--man);border-radius:12px;pointer-events:none;animation:none}
.mk b{position:absolute;bottom:-13px;inset-inline-start:10px;font-size:11.5px;font-weight:700;color:#fff;background:var(--man-d);padding:2px 8px;border-radius:7px;white-space:nowrap}
.mk1{top:94px;inset-inline-start:6px;width:28%;height:62px}
.mk2{top:30px;inset-inline-end:6px;width:30%;height:58px}
.zoom__side{display:grid;gap:10px;align-content:start}
.tile{height:80px;border-radius:12px;background:#DDE5FF;display:grid;place-items:center}
.tile--b{background:#E3F3EC}
.tile svg{width:30px;height:30px;fill:none;stroke:var(--ink2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.is-play .mk{animation:wipe .7s var(--ease) both}
.is-play .mk1{animation-delay:1.7s}.is-play .mk2{animation-delay:.6s}
.is-play .zs s{animation:grow .5s var(--ease) both}
.doc{background:#fff;border:1px solid #D8DCEF;border-radius:6px 18px 18px 18px;padding:18px 22px 20px;box-shadow:0 2px 3px rgba(20,24,58,.06),0 14px 28px rgba(20,24,58,.1),0 32px 56px rgba(20,24,58,.08);transform:rotate(-1.2deg)}
.doc__h{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.doc__h svg{width:22px;height:22px;fill:none;stroke:var(--blue-d);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.doc__h b{font-size:1.1rem}
.dl{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:14px;height:40px;font-size:14px;font-weight:600;color:var(--ink2);border-bottom:1px dashed #D8DCEF}
.dl i{display:block;height:8px;border-radius:6px;background:linear-gradient(90deg,#CBD6FF,#B8C8FF);transform-origin:right}
.dl:nth-of-type(1) i{width:82%}.dl:nth-of-type(2) i{width:64%}.dl:nth-of-type(3) i{width:46%}
.doc__fix{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:1.05rem;color:#fff;background:var(--blue-d);border-radius:12px;padding:8px 16px;box-shadow:0 8px 18px rgba(33,71,216,.3)}
.doc__fix svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.is-play .dl i{animation:grow .8s var(--ease) both}
.is-play .dl:nth-of-type(1) i{animation-delay:.3s}.is-play .dl:nth-of-type(2) i{animation-delay:1s}.is-play .dl:nth-of-type(3) i{animation-delay:1.7s}
.is-play .doc__fix{animation:pop .6s var(--ease) 2.5s both}
.bld__code{margin:0;background:var(--ink);color:#E9ECFF;border-radius:16px;padding:16px 14px;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:12.5px;line-height:1.9;white-space:pre;overflow:hidden;box-shadow:0 14px 28px rgba(20,24,58,.22);text-align:left}
.bld__code code{display:block;font:inherit}
.cl{display:block}
.bld__code b{font-weight:500}
.cm{color:#8F9AC9;font-family:'Rubik',sans-serif;direction:rtl;unicode-bidi:plaintext}
.kw{color:#C4A9FF}.nu{color:#9DB1FF}
.bld__code .sx{color:#8FE3B5}
.bld__ui{background:#fff;border:1px solid #C3CFFA;border-radius:16px;padding:12px;box-shadow:0 14px 28px rgba(45,91,255,.16);display:grid;gap:8px}
.bo{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px;background:#F4F6FF;border-radius:11px;padding:10px;font-size:13px;font-weight:600}
.bo__id{color:var(--blue-d);font-weight:700}
.bo--g{background:#F7F8FC}
.bo--g span{display:block;height:7px;border-radius:5px;background:#E3E6F3}
.bo__st{position:relative;display:inline-grid}
.bo__st em{grid-area:1/1;font-style:normal;font-weight:700;font-size:12px;border-radius:99px;padding:4px 10px}
.bo__st .s1{background:var(--t-blue);color:#1735AC;opacity:0}
.bo__st .s2{background:var(--t-green);color:#066A49}
.is-play .bld__code .cl{animation:wipeL .6s steps(22,end) both}
.is-play .bld__code .cl:nth-child(1){animation-delay:.2s}.is-play .bld__code .cl:nth-child(2){animation-delay:.9s}.is-play .bld__code .cl:nth-child(3){animation-delay:1.5s}.is-play .bld__code .cl:nth-child(4){animation-delay:2.1s}
.is-play .bo:not(.bo--g){animation:pop .6s var(--ease) 2.7s both}
.is-play .bo--g{animation:pop .5s var(--ease) 3s both}
.is-play .bo__st .s1{animation:sIn .3s 2.8s both,sOut .35s 4.2s both}
.is-play .bo__st .s2{animation:sIn .35s 4.2s both}
.acct{position:relative;border:2px dashed #9AA3CB;border-radius:22px;padding:44px 22px 22px;background:rgba(255,255,255,.7)}
.acct::after{content:"";position:absolute;inset:-2px;border:2.5px solid var(--c-green);border-radius:22px;pointer-events:none}
.acct__tag{z-index:2;position:absolute;top:-14px;inset-inline-start:20px;display:flex;align-items:center;gap:7px;background:var(--ink);color:#fff;font-weight:700;font-size:13px;border-radius:99px;padding:5px 14px}
.acct__tag svg{width:17px;height:17px;fill:none;stroke:#9DB1FF;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.acct__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}
.acct__own{z-index:2;position:absolute;bottom:-15px;inset-inline-end:22px;display:flex;align-items:center;gap:6px;background:#0A7551;color:#fff;font-weight:800;font-size:14px;border-radius:99px;padding:6px 16px;box-shadow:0 8px 16px rgba(11,143,99,.35)}
.acct__own svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.handoff{position:absolute;top:50%;inset-inline-start:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:var(--blue-d);display:grid;place-items:center;opacity:0;box-shadow:0 0 0 4px #fff,0 8px 16px rgba(33,71,216,.4)}
.handoff svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.is-play .acct::after{animation:pop .5s var(--ease) 3.6s both}
.is-play .acct__own{animation:pop .5s var(--ease) 4s both}
.is-play .handoff{animation:hand 1.5s var(--ease) 2.4s both}
@keyframes hand{from{opacity:0;transform:translate(var(--hx,110px),var(--hy,0))}15%{opacity:1}80%{opacity:1;transform:translate(calc(var(--hx,110px) * -1),calc(var(--hy,0px) * -1))}to{opacity:0;transform:translate(calc(var(--hx,110px) * -1),calc(var(--hy,0px) * -1)) scale(.4)}}

/* ---- 4. what we built ---- */
.res{list-style:none;padding:0;margin-top:34px;display:grid;gap:26px}
.res__i{display:grid;gap:34px;align-items:center;position:relative;background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px 34px;box-shadow:var(--sh1)}
.res--hours{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.res--files{grid-template-columns:minmax(0,6fr) minmax(0,6fr);background:var(--ink);border-color:var(--ink);color:#E9ECFF}
.res--fri{grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:linear-gradient(180deg,#fff,#F7F9FF)}
.res h3{font-size:1.45rem;font-weight:800;letter-spacing:-.01em;margin-bottom:12px}
.ba{display:grid;grid-template-columns:70px auto minmax(0,1fr);gap:6px 16px;align-items:center;padding:10px 0;border-top:1px dashed #D8DCEF}
.ba:first-of-type{border-top:0}
.ba__k{font-weight:800;font-size:14px}
.ba--t .ba__k{color:var(--man-d)}.ba--s .ba__k{color:var(--blue-d)}
.ba p{color:var(--ink2);font-size:.98rem;line-height:1.5}
.res--fri .ba{grid-template-columns:70px minmax(0,1fr)}
.mf{display:flex;align-items:center;direction:ltr}
.mn{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--t-amber);border:1px solid #F0D79A}
.mn svg{width:20px;height:20px;fill:none;stroke:var(--c-amber);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mw{display:block;width:30px;height:0;border-top:3px dotted #D8A74D}
.ba--s .mn{background:var(--t-blue);border-color:#BFD0FF}.ba--s .mn svg{stroke:var(--blue-d)}
.ba--s .mw{border-top:3px solid var(--blue);transform-origin:left}
.is-play .ba--s .mw{animation:grow .6s var(--ease) both}
.is-play .ba--s .mw:nth-of-type(1){animation-delay:.9s}.is-play .ba--s .mw:nth-of-type(2){animation-delay:1.3s}
.is-play .ba--s .mn{animation:pop .5s var(--ease) both}
.is-play .ba--s .mn:nth-child(1){animation-delay:.7s}.is-play .ba--s .mn:nth-child(3){animation-delay:1.1s}.is-play .ba--s .mn:nth-child(5){animation-delay:1.5s}
.res__out{display:grid;gap:18px;justify-items:start}
.res__line{font-size:1.35rem;font-weight:700;line-height:1.35;max-width:16em;text-wrap:balance}
.res__line b{font-size:clamp(3.2rem,6vw,5rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--blue-d);display:block;font-variant-numeric:tabular-nums}
.res--files .res__line b{color:#9DB1FF}
.res--files h3{color:#fff}
.res--files .ba{border-top-color:rgba(255,255,255,.18)}
.res--files .ba p{color:#C6CCEE}
.res--files .ba--t .ba__k{color:#F5C46B}.res--files .ba--s .ba__k{color:#9DB1FF}
.res--files .mn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.res--files .ba--s .mn{background:rgba(120,150,255,.2);border-color:rgba(157,177,255,.5)}
.res--files .ba--s .mn svg{stroke:#C9D6FF}.res--files .ba--t .mn svg{stroke:#F5C46B}
.res--files .mw{border-top-color:#8A6A2A}.res--files .ba--s .mw{border-top-color:#9DB1FF}
.hrs{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;width:100%;max-width:340px;direction:ltr}
.hrs i{display:block;height:34px;border-radius:9px;background:var(--t-blue);border:1px solid #BFD0FF;position:relative}
.hrs i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:6px;margin:-5px 0 0 -5px;border-left:2.5px solid var(--blue-d);border-bottom:2.5px solid var(--blue-d);transform:rotate(-45deg)}
.is-play .hrs i{animation:hr .5s var(--ease) both;animation-delay:calc(var(--i,0) * .09s + .3s)}
@keyframes hr{from{background:var(--man);border-color:var(--man);transform:scale(.9)}}
.is-play .hrs i::after{animation:pop .3s calc(var(--i,0) * .09s + .6s) both}
.dots{display:grid;grid-template-columns:repeat(24,1fr);gap:5px;width:100%;max-width:460px;direction:ltr}
.dots i{display:block;aspect-ratio:1;border-radius:50%;background:#7C97FF}
.dots i.chg{background:#F5C46B;box-shadow:0 0 0 4px rgba(245,196,107,.25)}
.is-play .dots i{animation:dotOn .5s var(--ease) both;animation-delay:calc(var(--c,0) * .045s)}
.is-play .dots i.chg{animation:dotOn .5s var(--ease) both,chg 1s 2.4s ease-out 2}
@keyframes dotOn{from{opacity:.12;transform:scale(.5)}}
@keyframes chg{50%{transform:scale(1.9)}}
.res--files .res__line{color:#fff}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;width:100%;max-width:520px}
.week>span{display:grid;place-items:center;height:84px;border-radius:14px;background:#EEF0FA;font-weight:700;color:var(--ink2);position:relative}
.week .fri{background:#fff;border:2px solid var(--blue);box-shadow:0 10px 20px rgba(45,91,255,.2);transform:translateY(-6px)}
.week em{font-style:normal;position:absolute;top:8px;font-size:15px;color:var(--blue-d)}
.week svg{position:absolute;bottom:10px;width:28px;height:28px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.w-p{stroke:var(--man-d);opacity:0}
.w-r{stroke:var(--blue-d)}
.is-play .w-p{animation:wp 1.9s both}
.is-play .w-r{animation:wr .7s var(--ease) 1.6s both}
@keyframes wp{0%,55%{opacity:1}100%{opacity:0}}
@keyframes wr{from{opacity:0;transform:translateY(14px)}}
.res__line--t{font-size:1.35rem}
.more{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:26px;align-items:stretch}
.more h3{font-size:1.2rem;font-weight:800;line-height:1.25;margin-bottom:6px}
.more p{color:var(--ink2);line-height:1.55}
.more>div{padding:22px 24px;border-radius:22px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh1);display:flex;flex-direction:column;gap:2px;position:relative}
.more .sr{position:absolute}
.more__orders{background:linear-gradient(180deg,#F6F8FF,#fff)!important;border-color:#C3CFFA!important}
/* the small system screen is the lower part of its card, bled to the card edge, not a second card inside it */
.more>div{overflow:hidden}
.oscr{margin:14px -24px -22px;background:#fff;border-top:1px solid #C3CFFA}
.oscr .app__bar{border-radius:0}
.oscr__rows{padding:6px 12px 10px}
.or{display:grid;grid-template-columns:48px minmax(0,1fr) 84px;align-items:center;gap:8px;height:38px;border-bottom:1px solid #EAEDF8;font-size:13.5px;font-weight:600}
.or:last-child{border-bottom:0}
.or>span:first-child{color:var(--blue-d);font-variant-numeric:tabular-nums}
.or>span:nth-child(2){color:var(--ink2);font-weight:500}
.is-play .or{animation:pop .5s var(--ease) both;animation-delay:calc(var(--k) * .55s + .2s);--d:calc(var(--k) * .55s + 3s)}
.pl{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:8px}
.pl__o{flex:none;width:40px;height:40px;border-radius:12px;background:var(--t-blue);border:2px solid #BFD0FF;display:grid;place-items:center}
.pl__o s{display:block;width:20px;height:20px;border-radius:6px;background:var(--blue)}
.pl__o--b s{background:var(--c-teal);border-radius:50%}.pl__o--c s{background:var(--c-violet);border-radius:3px;transform:rotate(45deg) scale(.85)}
.pl__w{flex:1;min-width:18px;height:0;border-top:3px solid var(--blue);transform-origin:right}
.pl__cart{flex:none;white-space:nowrap;display:flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;color:#066A49;background:var(--t-green);border-radius:12px;padding:9px 12px}
.pl__cart svg{width:19px;height:19px;fill:none;stroke:var(--c-green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.is-play .pl__o{animation:pop .45s var(--ease) both}
.is-play .pl__o--b{animation-delay:.4s}.is-play .pl__o--c{animation-delay:.8s}
.is-play .pl__w{animation:grow .6s var(--ease) 1.2s both}
.is-play .pl__cart{animation:pop .5s var(--ease) 1.8s both}
.df{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:8px}
.df__s{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700;font-size:13px;color:var(--ink2)}
.df__s s{display:block;width:22px;height:22px;border-radius:50%;background:var(--c-green);box-shadow:0 0 0 4px var(--t-green)}
.df i{flex:1;height:0;border-top:3px solid var(--c-green);margin-top:-22px;transform-origin:right}
.is-play .df__s s{animation:pop .45s var(--ease) both}
.is-play .df__s:nth-of-type(2) s{animation-delay:.5s}.is-play .df__s:nth-of-type(3) s{animation-delay:1.1s}
.is-play .df i{animation:grow .5s var(--ease) both}.is-play .df i:nth-of-type(1){animation-delay:.3s}.is-play .df i:nth-of-type(2){animation-delay:.9s}

/* ---- 5. who it fits: a condition that splits ---- */
.split{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 70px auto;column-gap:40px;position:relative}
.split__root{grid-column:1/-1;justify-self:center;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #D8DCEF;border-radius:18px;padding:12px 20px;font-weight:800;font-size:1.1rem;box-shadow:0 14px 26px rgba(20,24,58,.1);position:relative}
.split__root::before{content:"";position:absolute;top:-1px;inset-inline:22px;height:5px;border-radius:0 0 6px 6px;background:var(--c-violet)}
.split__root svg{width:24px;height:24px;fill:none;stroke:var(--c-violet);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.split__w{grid-column:1/-1;grid-row:2;width:100%;height:100%;overflow:visible}
.split__w path{fill:none;stroke-width:3.5;stroke-linecap:round}
.split__w .b1{stroke:var(--blue)}.split__w .b2{stroke:#C99A3E;stroke-dasharray:2 9}
.split__a,.split__b{grid-row:3;padding:24px 26px;border-radius:24px;position:relative}
.split__a{grid-column:1;background:#fff;border:2px solid var(--blue);box-shadow:0 18px 34px rgba(45,91,255,.14)}
.split__b{grid-column:2;background:#F6F6FA;border:1.5px dashed #AEB4D2}
.split h3{font-size:1.3rem;font-weight:800;margin-bottom:10px}
.split__a h3{color:var(--blue-d)}.split__b h3{color:var(--ink2)}
.split ul{list-style:none;padding:0;display:grid;gap:12px}
.split li{display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.split__a li svg{flex:none;width:22px;height:22px;margin-top:1px;padding:3px;border-radius:50%;background:var(--t-green);fill:none;stroke:var(--c-green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.split__b li{color:var(--ink2)}
.split__b li i{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;border:2px solid #AEB4D2;position:relative}
.split__b li i::after{content:"";position:absolute;left:4px;right:4px;top:8px;height:2px;border-radius:2px;background:#AEB4D2}
.is-play .split__root{animation:pop .5s var(--ease) both}
.is-play .split__w path{animation:draw 1s var(--ease) .4s both;stroke-dashoffset:0}
.is-play .split__a{animation:pop .6s var(--ease) 1.1s both}.is-play .split__b{animation:pop .6s var(--ease) 1.4s both}

/* ---- 6. questions: native details styled as nodes ---- */
.faq{padding-bottom:20px}
.faq__in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:40px;align-items:start}
.faq h2{position:sticky;top:90px}
.faq__l{display:grid;gap:10px}
details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 20px;box-shadow:0 1px 1px rgba(20,24,58,.04),0 6px 14px rgba(20,24,58,.05);transition:box-shadow .3s,border-color .3s}
details[open]{border-color:#C3CFFA;box-shadow:0 2px 3px rgba(20,24,58,.06),0 14px 26px rgba(45,91,255,.1)}
summary{cursor:pointer;font-weight:700;font-size:1.05rem;padding:16px 0;list-style:none;display:flex;align-items:center;gap:12px;min-height:52px}
summary::-webkit-details-marker{display:none}
summary::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:#B7BED9}
details:nth-child(1) summary::before{background:var(--man)}
details:nth-child(2) summary::before{background:var(--blue)}
summary::after{content:"";flex:none;margin-inline-start:auto;width:9px;height:9px;border-right:2.2px solid var(--ink2);border-bottom:2.2px solid var(--ink2);transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
summary:focus-visible{outline-offset:2px}
details p{padding:0 22px 18px;color:var(--ink2);line-height:1.65;max-width:42em}
details[open] p{animation:pop .4s var(--ease)}

/* ---- 7. the end of the wire ---- */
.contact{padding-bottom:90px}
.contact__in{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:start}
.contact h2{font-size:clamp(1.9rem,3vw,2.7rem);max-width:12em}
.contact .fit__done h3{font-size:24px;line-height:1.2;max-width:none;text-wrap:balance}
.fit__done p{text-wrap:balance}
.contact__t>p{margin-top:12px;font-size:1.1rem;color:var(--ink2);max-width:26em}
.endnode{margin-top:34px;display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid #D8DCEF;border-radius:18px;padding:12px 22px 12px 18px;box-shadow:0 8px 18px rgba(20,24,58,.08);font-size:1.15rem;font-weight:800;color:var(--ink2);transition:all .5s var(--ease)}
.endnode__c{width:34px;height:34px;border-radius:50%;background:#E6E9F7;display:grid;place-items:center;transition:background-color .4s,transform .5s var(--ease)}
.endnode__c svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.endnode.is-done{color:var(--ink);border-color:var(--c-green);transform:translateY(-6px);box-shadow:0 18px 30px rgba(11,143,99,.22),0 0 0 5px var(--t-green)}
.endnode.is-done .endnode__c{background:var(--c-green)}
.card--end{margin:0}
.card h3{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.2;margin-bottom:10px}

/* footer */
.foot{position:relative;z-index:3;background:var(--ink);color:#C6CCEE;padding:38px 0 42px}
.foot__in{padding-inline:var(--gut,24px);display:grid;grid-template-columns:auto 1fr;gap:14px 40px;align-items:center;max-width:1320px;margin-inline:auto}
.foot__b{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1.05rem}
.foot__n{display:flex;gap:6px 24px;flex-wrap:wrap;justify-self:end}
.foot__n a{color:#E9ECFF;text-underline-offset:4px;padding:6px 0}
.foot__n a:hover{color:#fff}
.foot__n a:focus-visible,.foot a:focus-visible{outline-color:#9DB1FF}
.foot__l{grid-column:1/-1;font-size:.92rem;color:#AEB6DD}

/* wide screens: keep the layout centred, never stretched */
@media (min-width:1700px){.sec__in{padding-inline:calc(var(--gut) + 84px) var(--gut)}}

/* tablet and phone */
@media (max-width:1100px){
  .contact__in{grid-template-columns:minmax(0,1fr)}
  .card--end{max-width:520px}
  .more{grid-template-columns:1fr 1fr}.more__orders{grid-column:1/-1}
}
@media (max-width:900px){
  .rest{--lane:22px}
  .sec{padding-top:52px}
  .sys{padding-top:0}
  .sys__track{padding-top:52px}
  .sec__in{padding-inline:46px 16px}
  .sec h2{font-size:1.65rem}
  .sn{width:30px;height:30px;margin:-15px 0 0 -15px}
  .sn__c{border-radius:10px}
  .sn__c::before{inset-inline:6px;height:3px}
  .sn__c svg{width:17px;height:17px}
  .sn__ok{width:16px;height:16px;top:-6px;inset-inline-start:-6px}.sn__ok svg{width:10px;height:10px}
  .spine__pin span{left:-13px;top:-13px;width:26px;height:26px}.spine__pin svg{width:14px;height:14px}
  .sp0,.sp1{stroke-width:3}
  .sys__head{align-items:flex-start;flex-direction:column;gap:10px}
  .sys__ctl{width:100%;gap:6px}
  #sys-range{flex:1;min-width:80px;width:auto}
  .tag-ill{order:5}
  .sys__stage{height:auto;perspective:none;margin-top:14px}
  .sys__plane{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;transform-style:flat}
  .sheet,.app{transform:none}
  .sheet{box-shadow:0 12px 24px rgba(20,24,58,.1)}
  .r{grid-template-columns:24px 50px 1fr 1.2fr 30px 78px;height:36px;font-size:12.5px}
  .r>span{padding:0 6px}
  .r--h{height:26px}
  .stale b,.r--dup b{font-size:11px;padding:0 5px}
  .sheet__bar{height:34px}
  .app__body{padding:8px 8px 10px}
  .ar{grid-template-columns:48px 1fr 1fr 78px 34px;gap:4px;font-size:12.5px;min-height:38px}
  .ar>span:nth-child(3){display:none}.ar{grid-template-columns:48px 1fr 78px 34px}
  .st em{font-size:11.5px;padding:4px 8px}
  .app__side{grid-template-columns:1fr}
  .notes__w{display:none}
  .notes{position:relative;display:grid;gap:12px;margin-top:22px}
  .note{position:relative;inset:auto!important;opacity:1;transform:none;max-width:none;font-size:14.5px;padding:10px 14px}
  .stp,.stp:nth-child(even){grid-template-columns:minmax(0,1fr);gap:18px}
  .stp:nth-child(even) .stp__txt{order:0}
  .flow4{gap:34px}
  .flow4__w{display:none}
  .scene{min-height:0}
  .acct__in{grid-template-columns:minmax(0,1fr)}
  .handoff{--hx:0px;--hy:-64px}
  .bld__code{font-size:12px}
  .zoom{grid-template-columns:minmax(0,1fr) 60px}
  .tile{height:56px}
  .res__i,.res--hours,.res--files,.res--fri{grid-template-columns:minmax(0,1fr);padding:22px 18px;gap:22px;border-radius:22px}
  .res--files .res__out{order:2}
  .ba{grid-template-columns:62px minmax(0,1fr);}
  .ba .mf,.ba p{grid-column:1/-1}
  .more{grid-template-columns:minmax(0,1fr)}
  .more>div{padding:20px 18px}
  .oscr{margin:14px -18px -20px}
  .split{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 36px auto 18px auto;gap:0}
  .split__w{display:none}
  .split__root{grid-row:1}
  .split__a{grid-column:1;grid-row:3}.split__b{grid-column:1;grid-row:5}
  .split::before{content:"";grid-row:2;grid-column:1;justify-self:center;width:3px;background:var(--blue)}
  .faq__in{grid-template-columns:minmax(0,1fr);gap:16px}
  .faq h2{position:static}
  details{padding:0 14px}
  details p{padding:0 8px 16px 4px}
  .contact{padding-bottom:64px}
  .contact h2{font-size:1.8rem}
  .endnode{margin-top:22px;margin-inline-start:28px}
  .foot__in{grid-template-columns:1fr}.foot__n{justify-self:start}
}
@media (max-width:420px){
  .dl{grid-template-columns:96px minmax(0,1fr);gap:10px}
  .doc{padding:14px 16px 16px}
  .dots{grid-template-columns:repeat(16,1fr);gap:4px}
  .week{gap:5px}.week>span{height:68px}
}
@media (prefers-reduced-motion:reduce){
  .sn__c,.sn__ok,.endnode,.toast,.stock u,.note{transition-duration:.01ms!important;transition-delay:0s!important}
}

.fax{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.cta{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.cta span{font-size:14.5px;font-weight:600;color:var(--ink2)}
.cta small{flex:1 1 100%;font-size:13.5px;line-height:1.4;color:var(--ink2)}
.sticky{display:none}
@media (max-width:900px){
  .cta .btn{flex:1 1 100%}
  .cta span{flex:1 1 100%;text-align:center}
  .cta small{text-align:center}
  .sticky{display:block;position:fixed;inset-inline:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--canvas);border-top:1px solid #CBD0E6;transform:translateY(110%);transition:transform .3s}
  .sticky.is-on{transform:none}
}
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}

/* desktop: one-line headline, the call detail joins the ticks, the form card is the button */
.trust .trust__d{display:none}
@media (min-width:1181px){
  h1{max-width:none;font-size:clamp(2.1rem,3.05vw,3.3rem);white-space:nowrap}
  .hero__copy .cta{display:none}
  .trust .trust__d{display:flex}
  .trust{grid-template-columns:repeat(3,max-content);gap:4px 24px}
}

/* the dark card gets the same soft ink elevation as the others, no blue halo */
.res--files{box-shadow:0 1px 1px rgba(20,24,58,.08),0 6px 12px rgba(20,24,58,.12),0 22px 40px rgba(20,24,58,.16)}

/* step 1: the tags sit in a free band under the table, joined to their outlines by a short stem, never over a cell */
.zoom__screen{padding-bottom:44px;min-height:214px}
.mk1{inset-inline-start:0;width:calc(28% + 6px);--st:9px}
.mk2{--st:77px}
.mk b{bottom:auto;top:calc(100% + var(--st));inset-inline-start:auto;inset-inline-end:2px}
.mk::after{content:"";position:absolute;top:100%;inset-inline-end:14px;width:2.5px;height:var(--st);background:var(--man)}
.mk1 b{inset-inline-start:2px;inset-inline-end:auto}
.mk1::after{inset-inline-end:auto;inset-inline-start:14px}

/* #work small cards: each carries a small live screen like the orders card */
.more__s .oscr{margin-top:auto}
.more__s p+.sr+.oscr,.more__s .sr+.oscr{margin-top:auto}
.more__s>p:not(.sr){margin-bottom:16px}
.or--m{grid-template-columns:22px minmax(0,1fr) 84px}
.or--cart{grid-template-columns:minmax(0,1fr);border-bottom:0}
.or--cart .pl__cart{justify-self:start}

/* keyboard: the checkbox gets the same ring as every other control (the field ring alone was too faint) */
.fit input[type="checkbox"]:focus-visible{outline:3px solid var(--blue);outline-offset:3px;box-shadow:none}

/* the second door: a quiet text link to the free first specification, never a second button */
.door{margin-top:10px;text-align:center;font-size:14px;line-height:1.45}
.door a{display:inline-flex;align-items:center;gap:6px;color:var(--blue-d);font-weight:600;text-decoration:none;border-radius:6px;padding:2px 2px}
.door a:hover,.door a:focus-visible{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.door svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.door a:hover svg{transform:translateX(-3px)}

/* table rows that carry a small tag get room, so the tag and the text never touch the row lines */
.r:has(b){height:54px}
.r>span:has(b){padding-block:7px}
@media (max-width:900px){.r:has(b){height:48px}.r>span:has(b){padding-block:5px}}

/* the card of the first screen is the door to the free first specification */
.card--door{padding:34px 30px 28px}
.card--door h2{font-size:30px;margin-bottom:22px}
.dr{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:20px}
.dr li{display:flex;align-items:center;gap:14px;text-wrap:balance;font-size:16.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.dr__i{flex:none;width:44px;height:44px;border-radius:13px;background:var(--t-blue);display:grid;place-items:center}
.dr__i svg{width:24px;height:24px;fill:none;stroke:var(--blue-d);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card--door .btn{font-size:20px;padding:19px 22px}
.card--door .fit__after{margin-top:16px;font-size:14.5px;line-height:1.5;text-wrap:balance}
.card--door .door{margin-top:16px;font-size:14.5px}
.card--door .door a{padding:8px 4px}
.card--door .btn:focus-visible,.how__go .btn:focus-visible,.top .btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* how it works: the new first and second scenes, and the one button after the four steps */
.win__bar .tag-ill--s{margin-inline-start:auto}
.qa{display:grid;gap:10px;padding:12px;background:#F1F3FB}
.qa__q{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.qa__q b{display:block;font-size:14.5px;font-weight:700}
.qa__a{margin-top:9px;min-height:42px;display:flex;align-items:center;border:1.5px solid var(--blue);border-radius:10px;background:#fff;padding:7px 11px;font-size:14px;font-weight:500;box-shadow:0 0 0 4px #DCE5FF}
.qa__a span{display:block}
.qa__d{background:#fff;border:1px solid #D8DCEF;border-radius:6px 14px 14px 14px;padding:10px 14px 14px;box-shadow:0 8px 18px rgba(20,24,58,.08)}
.qa__h{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:2px solid var(--ink);margin-bottom:9px}
.qa__h svg{width:18px;height:18px;fill:none;stroke:var(--blue-d);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.qa__h b{font-size:14px}
.stp .qa__l{font-size:13px;line-height:1.4;font-weight:600;color:var(--ink);margin:0}
.qa__b{display:block;height:7px;border-radius:5px;background:linear-gradient(90deg,#CBD6FF,#B8C8FF);margin-top:9px;transform-origin:right}
.qa__b--1{width:78%}.qa__b--2{width:52%}
.is-play .qa__a span{animation:wipe 1.5s steps(30,end) .3s both}
.is-play .qa__d{animation:pop .6s var(--ease) 1.9s both}
.is-play .qa__l{animation:wipe .9s steps(22,end) 2.4s both}
.is-play .qa__b{animation:grow .6s var(--ease) 3.2s both}.is-play .qa__b--2{animation-delay:3.5s}
.doc__h .tag-ill--s{margin-inline-start:0}
.doc__wa{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#066A49;background:var(--t-green);border-radius:99px;padding:3px 10px}
.doc__h .doc__wa svg{width:14px;height:14px;stroke:#066A49;stroke-width:2.1}
.doc__b{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:center}
.doc__l .dl{grid-template-columns:minmax(0,1fr);gap:7px;height:auto;padding:9px 0 11px}
.mock{border:1px solid #C3CFFA;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 10px 22px rgba(45,91,255,.14)}
.mock__bar{display:flex;gap:5px;padding:7px 9px;background:#F4F6FF;border-bottom:1px solid #DCE4FF}
.mock__bar i{width:7px;height:7px;border-radius:50%;background:#C3CBEB}
.mock__r{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:8px;align-items:center;padding:10px;border-bottom:1px solid #EEF0F8}
.mock__r:last-child{border-bottom:0}
.mock__r s{display:block;height:6px;border-radius:5px;background:#DDE3F7}
.mock__r em{display:block;height:14px;border-radius:99px;background:var(--t-green)}
.mock__r:nth-child(3) em{background:var(--t-blue)}
.is-play .mock{animation:pop .6s var(--ease) 1s both}
.is-play .mock__r{animation:pop .45s var(--ease) both}.is-play .mock__r:nth-child(2){animation-delay:1.3s}.is-play .mock__r:nth-child(3){animation-delay:1.6s}.is-play .mock__r:nth-child(4){animation-delay:1.9s}
.acct__ill{position:absolute;z-index:2;bottom:-13px;inset-inline-start:22px;margin:0;box-shadow:0 0 0 3px var(--canvas)}
.how__go{position:relative;z-index:1;margin-top:46px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.how__go span{font-size:14.5px;font-weight:600;color:var(--ink2)}
.door--q{margin-top:14px;text-align:start;font-size:1.02rem;color:var(--ink2)}
.door--q a{padding:6px 2px}
details p a{color:var(--blue-d);text-underline-offset:3px}
@media (max-width:900px){
  .how__go .btn{flex:1 1 100%}
  .how__go span{flex:1 1 100%;text-align:center}
}
@media (max-width:900px){.stp .acct{margin-top:14px}}
@media (max-width:420px){
  .doc__b{grid-template-columns:minmax(0,1fr) 118px;gap:12px}
  .doc__wa{display:none}
}