/* ZERO FAFF CRM page: its own moving parts, on top of case.css and location.css. Every animation name starts with cr,
   so nothing clashes with the shared stylesheets. The page is one deal moving through a pipeline: the bar fixed at
   the top shows which stage it has reached, and each stage section plays its own demo when it's seen. */

/* ===================================================================== the opening: four enquiries, one inbox */
.ch-hv{width:108%;max-width:700px;justify-self:end;margin-right:-4%;aspect-ratio:6/5;position:relative;container-type:inline-size}
.ch-srcs{position:absolute;left:0;top:6%;bottom:6%;width:15%;display:grid;align-content:space-between}
.ch-srcs .src{display:grid;place-items:center;width:100%;aspect-ratio:1;padding:2.2cqw;border:var(--border);border-radius:3cqw;background:var(--paper);box-shadow:5px 5px 0 #000;opacity:0;transform:translateX(-20px) scale(.8)}
.ch-srcs .src svg{width:100%;height:auto}
.ch-hv.on .src{animation:crin .5s cubic-bezier(.3,1.5,.5,1) forwards,crsend .6s ease forwards;animation-delay:calc(.3s + var(--i) * .15s),calc(1.1s + var(--i) * .6s)}
@keyframes crsend{40%{transform:translateX(10px) scale(1.08);background:var(--brass)}100%{transform:none;background:var(--paper)}}
@keyframes crin{to{opacity:1;transform:none}}
.ch-wires{position:absolute;left:8%;top:0;width:20%;height:100%;overflow:visible}
.ch-wires path{fill:none;stroke:var(--brass);stroke-width:3;stroke-dasharray:6 6;vector-effect:non-scaling-stroke;opacity:0}
.ch-hv.on .ch-wires path{animation:crfade .4s ease forwards}
.ch-hv.on .ch-wires path:nth-child(1){animation-delay:1s}.ch-hv.on .ch-wires path:nth-child(2){animation-delay:1.6s}.ch-hv.on .ch-wires path:nth-child(3){animation-delay:2.2s}.ch-hv.on .ch-wires path:nth-child(4){animation-delay:2.8s}
@keyframes crfade{to{opacity:1}}
.ch-inbox{position:absolute;left:24%;right:0;top:6%;border:var(--border);border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 #000;overflow:hidden;opacity:0;transform:translateY(20px) rotate(1.5deg)}
.ch-hv.on .ch-inbox{animation:crin .6s cubic-bezier(.2,1.3,.4,1) .2s forwards;--r:1deg}
.ib-h{display:flex;align-items:center;justify-content:space-between;padding:2.4cqw 3cqw;border-bottom:2.5px solid var(--ink);background:var(--canvas)}
.ib-h > b{font-size:3cqw;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.ib-n{padding:.5cqw 1.8cqw;border:2px solid var(--ink);border-radius:999px;background:var(--brass);font-size:2.2cqw;font-weight:800}
.ib-n b{font-variant-numeric:tabular-nums}
.ib-list{list-style:none}
.ir{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2cqw;padding:2.2cqw 3cqw;border-bottom:2px solid rgba(17,23,27,.1);opacity:0;transform:translateX(-30px)}
.ir:last-child{border-bottom:0}
.ch-hv.on .ir{animation:crrow .5s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(1.2s + var(--i) * .6s)}
@keyframes crrow{0%{opacity:0;transform:translateX(-30px);background:#FFF6DC}60%{opacity:1;transform:none;background:#FFF6DC}100%{opacity:1;transform:none;background:transparent}}
.ir .ic{width:6.4cqw}
.ir .ic svg{display:block;width:100%;height:auto}
.ir .tx{display:grid;line-height:1.15;min-width:0}
.ir .tx b{font-size:2.6cqw}
.ir .tx small{font-size:2cqw;color:rgba(17,23,27,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ir .tg{padding:.4cqw 1.4cqw;border:2px solid var(--ink);border-radius:999px;font-style:normal;font-size:1.7cqw;font-weight:800;white-space:nowrap}
.t-web{background:var(--mist)}.t-fb{background:#C9D3E3}.t-phone{background:#EBDCC3}.t-wa{background:#D8E3CF}
.ch-toast{position:absolute;left:30%;bottom:2%;display:flex;align-items:center;gap:1.6cqw;padding:1.8cqw 2.6cqw 1.8cqw 2cqw;border:var(--border);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 #000;white-space:nowrap;opacity:0;transform:translateY(16px) scale(.9)}
.ch-hv.on .ch-toast{animation:crin .5s cubic-bezier(.3,1.5,.5,1) 4.2s forwards}
.ch-toast .dot{width:2.6cqw;height:2.6cqw;border:2px solid var(--ink);border-radius:50%;background:#8FD18A}
.ch-toast span{display:grid;line-height:1.1}.ch-toast b{font-size:2.4cqw}.ch-toast em{font-style:normal;font-size:1.7cqw;color:rgba(17,23,27,.62)}

/* ===================================================================== the pipeline bar */
.cp-bar{position:fixed;left:50%;top:calc(var(--fp) + 12px);z-index:90;width:min(860px,calc(100% - 2 * var(--fp) - 24px));translate:-50% -160%;transition:translate .5s cubic-bezier(.3,1.3,.5,1);pointer-events:none}
.cp-bar.show{translate:-50% 0}
.cp-in{display:flex;align-items:center;gap:14px;padding:8px 10px 8px 16px;border:var(--border);border-radius:999px;background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 #000}
.cp-lbl{flex:0 0 auto;font-size:13px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:rgba(17,23,27,.6)}
.cp-track{position:relative;flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;--s:0}
.cp-st{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:999px;font-size:14px;font-weight:850;white-space:nowrap;color:rgba(17,23,27,.45);transition:color .3s}
.cp-st i{display:grid;place-items:center;width:20px;height:20px;border:2px solid currentColor;border-radius:50%;font-style:normal;font-size:11px;font-weight:900}
.cp-st.done{color:var(--ink)}
.cp-st.done i{background:#B7E5B2;border-color:var(--ink)}
.cp-st.cur{color:transparent}
.cp-sam{position:absolute;z-index:2;left:0;top:0;width:calc((100% - 16px) / 5);height:40px;display:flex;align-items:center;gap:8px;padding:0 10px 0 4px;border:2.5px solid var(--ink);border-radius:999px;background:var(--brass);box-shadow:3px 3px 0 var(--ink);transform:translateX(calc(var(--s) * (100% + 4px)));transition:transform .7s cubic-bezier(.3,1.25,.5,1)}
.cp-sam b{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);font-size:11px;font-weight:900}
.cp-sam > span{display:grid;min-width:0;line-height:1;font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden}
.cp-sam small{font-size:10.5px;font-weight:700;opacity:.75;overflow:hidden;text-overflow:ellipsis}
.cp-sam.hop{animation:crhop .5s ease}
@keyframes crhop{40%{translate:0 -6px}}

/* ===================================================================== the stages */
.cs-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
.cs-copy h2{font-family:"Melodrama",serif;font-weight:500;font-size:clamp(40px,4.4vw,68px);line-height:.98;margin:18px 0 14px}
.cs-copy .sec-lede{margin:0 0 18px}
.cs-copy .body p{max-width:52ch}
.cs-vis{position:relative;container-type:inline-size}
.sam-av{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border:2.5px solid var(--ink);border-radius:50%;background:var(--brass);color:var(--ink);font-size:15px;font-weight:900}
.pill{padding:4px 12px;border:2px solid var(--ink);border-radius:999px;font-style:normal;font-size:13px;font-weight:900;letter-spacing:.03em;white-space:nowrap}
.p-new{background:var(--mist)}.p-quote{background:var(--brass)}

/* stage 1: the record fills itself in */
.rec{position:relative;border:var(--border);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 var(--ink);overflow:hidden;transform:rotate(-1deg)}
.rec-h{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:2.5px solid var(--ink);background:var(--canvas)}
.rec-h > span:not(.sam-av){flex:1;display:grid;line-height:1.15}.rec-h b{font-size:20px}.rec-h small{font-size:14px;color:rgba(17,23,27,.62)}
.rec-f{display:grid;margin:0;padding:6px 20px 14px}
.rec-f > div{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;padding:11px 0;border-bottom:1.5px dashed rgba(17,23,27,.18);opacity:0;transform:translateY(8px)}
.rec-f > div:last-child{border-bottom:0}
.cs-vis.on .rec-f > div{animation:crin .45s ease forwards;animation-delay:calc(.4s + var(--i) * .3s)}
.rec-f dt{font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(17,23,27,.55)}
.rec-f dd{margin:0;display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.rec-f .mini{width:22px}.rec-f .mini svg{display:block;width:100%}
.own{display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;background:var(--mist);font-size:10px;font-weight:900}
.rec-stamp{position:absolute;right:16px;bottom:16px;padding:6px 14px;border:2.5px solid var(--ink);border-radius:999px;background:#D8EFD5;font-size:14px;font-weight:900;box-shadow:3px 3px 0 var(--ink);opacity:0;transform:scale(1.5) rotate(-10deg)}
.cs-vis.on .rec-stamp{animation:crslap .4s cubic-bezier(.3,1.4,.5,1) 2.2s forwards}
@keyframes crslap{to{opacity:1;transform:rotate(-4deg)}}

/* stage 2: the reply and the timeline */
.tl{border:var(--border);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 var(--ink);overflow:hidden;width:72%}
.tl-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:2.5px solid var(--ink);background:var(--canvas)}
.tl-h b{flex:1;font-size:18px}.tl-h > span:last-child{font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(17,23,27,.55)}
.tl ol{list-style:none;padding:10px 18px 14px}
.tl li{position:relative;display:grid;grid-template-columns:44px 20px 1fr;gap:8px;align-items:start;padding:9px 0;opacity:0;transform:translateX(-14px)}
.cs-vis.on .tl li{animation:crin .45s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(.4s + var(--i) * .45s)}
.tl time{font-size:13px;font-weight:800;color:rgba(17,23,27,.55);padding-top:2px}
.tl .dt2{position:relative;width:14px;height:14px;margin-top:3px;border:2.5px solid var(--ink);border-radius:50%;background:var(--brass)}
.tl li:not(:last-child) .dt2::after{content:"";position:absolute;left:3px;top:13px;width:3px;height:34px;background:rgba(17,23,27,.2)}
.tl li span:last-child{display:grid;line-height:1.2}.tl li b{font-size:15.5px}.tl li small{font-size:13.5px;color:rgba(17,23,27,.62)}
.ph2{position:absolute;right:-2%;top:22%;width:36%;aspect-ratio:9/16;padding:8px;border:3px solid var(--ink);border-radius:28px;background:var(--ink);box-shadow:8px 8px 0 rgba(17,23,27,.35);transform:rotate(4deg);opacity:0}
.cs-vis.on .ph2{animation:crph .6s cubic-bezier(.3,1.4,.5,1) .6s forwards}
@keyframes crph{from{opacity:0;transform:translateY(30px) rotate(10deg)}to{opacity:1;transform:rotate(4deg)}}
.ph2-in{height:100%;display:flex;flex-direction:column;gap:10px;padding:16px 12px;border-radius:21px;background:var(--paper)}
.ph2-top{font-size:12px;font-weight:900;text-align:center;letter-spacing:.05em;text-transform:uppercase;color:rgba(17,23,27,.55)}
.bub{padding:10px 12px;border:2px solid var(--ink);border-radius:14px 14px 14px 4px;background:var(--mist);font-size:clamp(11px,2.2cqw,14px);font-weight:600;line-height:1.3;opacity:0;transform:scale(.85);transform-origin:0 100%}
.cs-vis.on .bub{animation:crin .4s cubic-bezier(.3,1.5,.5,1) 1.3s forwards}
.rcpt{align-self:flex-start;font-size:11px;font-weight:700;color:rgba(17,23,27,.5);opacity:0}
.cs-vis.on .rcpt{animation:crfade .3s ease 1.8s forwards}
.speed{position:absolute;left:18%;bottom:-18px;padding:8px 16px;border:2.5px solid var(--ink);border-radius:999px;background:#D8EFD5;font-size:15px;font-weight:800;box-shadow:4px 4px 0 var(--ink);opacity:0;transform:scale(.6)}
.cs-vis.on .speed{animation:crin .45s cubic-bezier(.3,1.6,.5,1) 2.6s forwards}

/* stage 3: the deal and the automation builder */
.cs-grid.dark .cs-vis{display:grid;gap:22px}
.deal{border:var(--border);border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 #000;padding:16px 18px;display:grid;gap:12px;transform:rotate(-1deg)}
.deal-h{display:flex;align-items:center;justify-content:space-between}.deal-h b{font-family:"Melodrama",serif;font-weight:700;font-size:24px}
.deal-v{display:flex;align-items:baseline;justify-content:space-between;padding:10px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--canvas)}
.deal-v span{font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(17,23,27,.55)}.deal-v b{font-size:32px;font-weight:900}
.deal-r{display:flex;align-items:center;gap:12px}.deal-r > span:nth-child(2){flex:1;display:grid;line-height:1.15;font-weight:800}.deal-r small{font-size:13px;font-weight:600;color:rgba(17,23,27,.62)}
.eye{padding:4px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--mist);font-size:13px;font-weight:800}
.ab{padding:18px;border:var(--border);border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 #000;display:grid;gap:12px}
.ab-t{font-size:13px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:rgba(17,23,27,.55)}
.ab-row{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center}
.ab-l{font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.ab-os{display:flex;flex-wrap:wrap;gap:6px}
.ab-o{padding:7px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.ab-o:hover,.ab-o:focus-visible{transform:translate(-1px,-2px);box-shadow:2px 3px 0 var(--ink)}
.ab-o.on{background:var(--brass);box-shadow:3px 3px 0 var(--ink)}
.ab-flow{display:flex;align-items:center;gap:6px;margin-top:4px;padding:12px;border:2px dashed rgba(17,23,27,.3);border-radius:14px;background:var(--canvas)}
.ab-flow .nd{flex:0 1 auto;padding:7px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);font-size:13.5px;font-weight:700;white-space:nowrap}
.ab-flow .n1{background:#FFF0C9}.ab-flow .n3{background:#D8EFD5}
.ab-flow .ar{position:relative;flex:1;min-width:18px;height:3px;background:var(--ink)}
.ab-flow .ar::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--ink);border-right:0}
.ab-flow .pk{position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--brass);border:2px solid var(--ink);animation:crpk 1.6s linear infinite}
.ab-flow .ar + .nd + .ar .pk{animation-delay:.8s}
@keyframes crpk{from{left:-4px}to{left:calc(100% - 6px)}}
.ab-flow.flash .nd{animation:crflash .5s ease}
@keyframes crflash{40%{transform:scale(1.08)}}
.ab-s{font-size:15.5px;line-height:1.4;font-weight:600}

/* stage 4: the board */
.kb{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;border:var(--border);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 var(--ink)}
.kb-c{display:grid;align-content:start;gap:8px;min-height:250px;padding:10px;border-radius:14px;background:var(--canvas)}
.kb-c p{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.kb-c p span{padding:1px 7px;border-radius:999px;background:rgba(17,23,27,.1);font-size:11px}
.kb-c.c3{background:#E3EFDC}
.kc{display:block;padding:9px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);font-size:12.5px;font-weight:700;line-height:1.2}
.kc.sam{position:absolute;left:calc(14px + 2 * (100% - 28px - 30px) / 4 + 20px + 10px);top:96px;width:calc((100% - 28px - 30px) / 4 - 20px);display:flex;align-items:center;gap:8px;padding:8px;border-width:2.5px;background:var(--brass);box-shadow:4px 4px 0 var(--ink);z-index:2}
.kc.sam .sam-av{width:28px;height:28px;font-size:10.5px;border-width:2px;background:var(--paper)}
.kc.sam > span:last-child{display:grid;line-height:1.1;font-size:12.5px;font-weight:900;min-width:0}.kc.sam small{font-size:11px;font-weight:700}
.cs-vis.on .kc.sam{animation:crdrag 1.4s cubic-bezier(.6,0,.3,1) 1s forwards}
@keyframes crdrag{0%{transform:none}20%{transform:translateY(-6px) rotate(-4deg) scale(1.05);box-shadow:10px 12px 0 rgba(17,23,27,.35)}50%{transform:translate(calc(50% + 15px),-26px) rotate(1deg) scale(1.06);box-shadow:10px 12px 0 rgba(17,23,27,.35)}80%{transform:translate(calc(100% + 30px),-4px) rotate(3deg) scale(1.05);box-shadow:10px 12px 0 rgba(17,23,27,.35)}100%{transform:translate(calc(100% + 30px),0);box-shadow:4px 4px 0 var(--ink)}}
.won-out{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.won-out span{padding:7px 14px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);font-size:14.5px;font-weight:800;box-shadow:3px 3px 0 var(--ink);opacity:0;transform:translateY(10px) scale(.8)}
.won-out .w1{background:var(--brass)}.won-out .w3{background:#D8EFD5}
.cs-vis.on .won-out span{animation:crin .4s cubic-bezier(.3,1.6,.5,1) forwards}
.cs-vis.on .won-out .w1{animation-delay:2.5s}.cs-vis.on .won-out .w2{animation-delay:2.9s}.cs-vis.on .won-out .w3{animation-delay:3.3s}
.cf{position:absolute;left:84%;top:40%;width:10px;height:14px;border:1.5px solid var(--ink);border-radius:2px;opacity:0;z-index:3}
.cf:nth-child(odd){background:var(--brass)}.cf:nth-child(even){background:var(--blue)}.cf.c3,.cf.c6{background:var(--claret)}
.cs-vis.on .cf{animation:crconf 1.2s cubic-bezier(.2,.8,.4,1) 2.4s forwards}
.cf.c1{--x:-70px;--y:-90px;--r:200deg}.cf.c2{--x:-30px;--y:-120px;--r:-160deg}.cf.c3{--x:20px;--y:-110px;--r:260deg}.cf.c4{--x:60px;--y:-80px;--r:-220deg}.cf.c5{--x:-90px;--y:-40px;--r:140deg}.cf.c6{--x:80px;--y:-30px;--r:-120deg}.cf.c7{--x:-10px;--y:-140px;--r:320deg}.cf.c8{--x:40px;--y:-60px;--r:-280deg}
@keyframes crconf{0%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 60px)) rotate(var(--r))}}

/* stage 5: the follow-ups that bring them back */
.rp{border:var(--border);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 var(--ink);overflow:hidden;transform:rotate(1deg)}
.rp-h{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:2.5px solid var(--ink);background:var(--canvas)}
.rp-h > span:nth-child(2){flex:1;display:grid;line-height:1.15}.rp-h b{font-size:19px}.rp-h small{font-size:13.5px;color:rgba(17,23,27,.62)}
.ltv{display:grid;justify-items:end;line-height:1}.ltv small{font-size:11.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.ltv b.ltv-n{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;transition:color .3s}
.ltv b.ltv-n.up{color:var(--moss)}
.rp ol{list-style:none;padding:8px 20px 16px}
.rp li{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1.5px dashed rgba(17,23,27,.18);opacity:0;transform:translateY(10px)}
.rp li:last-child{border-bottom:0}
.cs-vis.on .rp li{animation:crin .45s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(.4s + var(--i) * .55s)}
.rp time{justify-self:start;padding:4px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--canvas);font-size:12.5px;font-weight:900;white-space:nowrap}
.rp li span{display:grid;line-height:1.2}.rp li b{font-size:16px}.rp li small{font-size:14px;color:rgba(17,23,27,.65)}
.rp li.rv small{color:var(--brass);font-weight:700}
.rp li.bk{margin:6px -10px 0;padding:12px 10px;border:2.5px solid var(--ink);border-radius:14px;background:#D8EFD5}
.rp li.bk time{background:var(--brass)}

/* ===================================================================== two ways */
.cw-sw{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-bottom:30px;padding:5px;border:var(--border);border-radius:999px;background:var(--paper);box-shadow:5px 5px 0 #000}
.cw-b{position:relative;z-index:1;padding:12px 26px;border:0;border-radius:999px;background:none;color:var(--ink);font:inherit;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.cw-k{position:absolute;left:5px;top:5px;bottom:5px;width:calc(50% - 5px);border:2.5px solid var(--ink);border-radius:999px;background:var(--brass);transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.cw-sw.b2 .cw-k{transform:translateX(100%)}
.cw-p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,70px);align-items:center}
.cw-p[hidden]{display:none}
.cw-p.on{animation:fade .45s ease}
.cw-copy h3{font-family:"Melodrama",serif;font-weight:500;font-size:clamp(32px,3.2vw,50px);line-height:1}
.cw-copy p{margin-top:14px;font-size:clamp(18px,1.4vw,21px);line-height:1.45;color:var(--mute)}
.cw-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tl2{display:flex;align-items:center;gap:12px;padding:14px 18px;border:var(--border);border-radius:18px;background:var(--paper);color:var(--ink);font-size:clamp(18px,1.6vw,22px);font-weight:900;white-space:nowrap;box-shadow:5px 5px 0 #000;animation:crin .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * .08s)}
.tl2 i{width:18px;height:18px;border:2.5px solid var(--ink);border-radius:50%;background:var(--brass)}
.tl2:nth-child(2) i{background:#46553A}.tl2:nth-child(3) i{background:#7FB0CC}.tl2:nth-child(4) i{background:#6E2F40}.tl2:nth-child(5) i{background:#F2C46B}.tl2:nth-child(6) i{background:#C0485A}.tl2:nth-child(7) i{background:#26364A}.tl2:nth-child(8) i{background:#E79AA8}
.tl2.more{grid-column:1/-1;justify-content:center;background:transparent;color:var(--canvas);border-style:dashed;border-color:var(--canvas);box-shadow:none;font-size:18px}
.tl2.more i{display:none}
.cw-app{border:var(--border);border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 #000;overflow:hidden}
.ca-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:2.5px solid var(--ink);background:var(--canvas)}
.ca-bar i{width:10px;height:10px;border:2px solid var(--ink);border-radius:50%}
.ca-bar span{margin-left:8px;padding:2px 10px;border-radius:999px;background:rgba(17,23,27,.08);font-size:12px;font-weight:700}
.ca-body{display:grid;grid-template-columns:120px 1fr;min-height:250px}
.ca-body aside{display:grid;align-content:start;gap:4px;padding:14px 10px;border-right:2.5px solid var(--ink);background:#1E4F5A;color:var(--canvas)}
.ca-body aside b{margin-bottom:8px;font-size:14px;font-weight:900;letter-spacing:.05em}
.ca-body aside span{padding:6px 10px;border-radius:8px;font-size:13.5px;font-weight:700;opacity:.8}
.ca-body aside span.on{background:var(--brass);color:var(--ink);opacity:1}
.ca-main{display:grid;align-content:start;gap:8px;padding:14px}
.ca-main > p{font-size:13px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:rgba(17,23,27,.55)}
.ca-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:2px solid var(--ink);border-radius:10px;font-size:14px;font-weight:700}
.ca-row i{width:12px;height:12px;border:2px solid var(--ink);border-radius:3px;background:var(--c)}
.ca-row em{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:900;color:rgba(17,23,27,.55)}
.ca-chart{display:flex;align-items:flex-end;gap:8px;height:70px;margin-top:6px;padding:0 4px;border-bottom:2.5px solid var(--ink)}
.ca-chart i{flex:1;height:var(--h);border:2px solid var(--ink);border-bottom:0;border-radius:4px 4px 0 0;background:var(--blue);transform-origin:bottom;animation:crbar .7s cubic-bezier(.2,1.3,.4,1) both}
.ca-chart i:nth-child(5){background:var(--brass)}
@keyframes crbar{from{transform:scaleY(0)}}

/* ===================================================================== the dashboard */
.db{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:clamp(16px,2vw,24px);border:var(--border);border-radius:24px;background:var(--canvas);color:var(--ink);box-shadow:12px 12px 0 #000}
.db-k{display:grid;gap:4px;padding:16px 18px;border:2.5px solid var(--ink);border-radius:16px;background:var(--paper)}
.db-k > span{font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(17,23,27,.55)}
.db-k > b{font-size:clamp(32px,3.2vw,46px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.db-k b b{font-size:1em}
.db-k em{font-style:normal;font-size:13.5px;font-weight:800;color:var(--moss)}
.db-c,.db-f{grid-column:span 2;padding:16px 18px;border:2.5px solid var(--ink);border-radius:16px;background:var(--paper)}
.db-c > p,.db-f > p{margin-bottom:12px;font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(17,23,27,.55)}
.db-b{display:grid;grid-template-columns:86px 1fr 34px;gap:10px;align-items:center;margin-top:8px;font-size:14px;font-weight:800}
.db-b i{display:block;height:18px;width:0;border:2px solid var(--ink);border-radius:999px;background:var(--blue);transition:width 1s cubic-bezier(.2,1,.3,1);transition-delay:calc(.2s + var(--i) * .1s)}
.db-b:first-of-type i{background:var(--brass)}
.db.on .db-b i{width:var(--w)}
.db-b b{text-align:right}
.fn{display:grid;gap:8px;justify-items:center}
.fn span{display:flex;align-items:center;justify-content:space-between;width:0;height:38px;padding:0 14px;border:2.5px solid var(--ink);border-radius:10px;background:#1E4F5A;color:var(--canvas);font-size:14px;overflow:hidden;white-space:nowrap;transition:width .9s cubic-bezier(.2,1,.3,1);transition-delay:calc(.3s + var(--i) * .15s)}
.fn span:nth-child(2){background:#2E6A77}.fn span:nth-child(3){background:var(--brass);color:var(--ink)}.fn span:nth-child(4){background:#8FD18A;color:var(--ink)}
.db.on .fn span{width:var(--w)}
.fn em{font-style:normal;font-weight:900}
.db-note{margin-top:20px;font-size:14px;color:var(--mute)}

/* ===================================================================== how we set it up: the step icons */
.ci{overflow:visible}
.ci *{transform-box:fill-box;transform-origin:center}
.ci-map .b{animation:crpop 4s cubic-bezier(.3,1.5,.5,1) infinite}
.ci-map .b2{animation-delay:.3s}.ci-map .b3{animation-delay:.6s}.ci-map .b4{animation-delay:.9s}
@keyframes crpop{0%{opacity:0;transform:scale(.4)}14%,85%{opacity:1;transform:none}100%{opacity:0}}
.ci-map .l{stroke-dasharray:30;stroke-dashoffset:30;animation:crln 4s ease infinite}
.ci-map .l2{animation-delay:.3s}.ci-map .l3{animation-delay:.9s}
@keyframes crln{0%,10%{stroke-dashoffset:30}30%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.ci-pick .o{animation:crpick 3.6s ease infinite}
.ci-pick .o2{animation-name:crpick2}
@keyframes crpick{0%,30%{transform:none}50%,85%{transform:translateY(6px) scale(.94);opacity:.55}100%{transform:none;opacity:1}}
@keyframes crpick2{0%,30%{transform:none}50%,85%{transform:translateY(-6px) scale(1.06)}100%{transform:none}}
.ci-pick .tk{opacity:0;animation:crtk 3.6s cubic-bezier(.3,1.7,.5,1) infinite}
@keyframes crtk{0%,40%{opacity:0;transform:scale(.3)}52%,85%{opacity:1;transform:none}100%{opacity:0}}
.ci-set .g1{animation:crspin 5s linear infinite}.ci-set .g2{animation:crspin 3.4s linear infinite reverse}
@keyframes crspin{to{transform:rotate(360deg)}}
.ci-auto .bolt{animation:crzap 1.8s ease-in-out infinite}
@keyframes crzap{0%,100%{transform:none}10%{transform:scale(1.15) rotate(-6deg)}20%{transform:none}}
.ci-train .cv{stroke-dasharray:100;stroke-dashoffset:100;animation:crln2 3.6s ease infinite}
@keyframes crln2{0%,10%{stroke-dashoffset:100;opacity:1}55%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.ci-care .heart{animation:crbeat 1.4s ease-in-out infinite}
.ci-care .beat{stroke-dasharray:100;stroke-dashoffset:100;animation:crline 2.4s linear infinite}
@keyframes crline{0%{stroke-dashoffset:100}60%,100%{stroke-dashoffset:0}}
@keyframes crbeat{0%,100%{transform:none}15%{transform:scale(1.08)}30%{transform:none}45%{transform:scale(1.05)}}
.ci-yours .cd{animation:crdrop 2.8s cubic-bezier(.5,0,.4,1) infinite}
@keyframes crdrop{0%{transform:translateY(-16px);opacity:0}15%{opacity:1}45%,82%{transform:translateY(26px);opacity:1}95%,100%{transform:translateY(26px);opacity:0}}
.ci-yours .bd{animation:crbadge 2.8s cubic-bezier(.3,1.7,.5,1) infinite}
@keyframes crbadge{0%,42%{transform:scale(0)}52%,80%{transform:none}92%,100%{transform:scale(0)}}

/* ===================================================================== the closing: the clipboard's ticks */
.cta-peek .ck1,.cta-peek .ck2,.cta-peek .ck3{stroke-dasharray:12;stroke-dashoffset:12;animation:crck 3.6s ease infinite}
.cta-peek .ck2{animation-delay:.4s}.cta-peek .ck3{animation-delay:.8s}
@keyframes crck{0%,10%{stroke-dashoffset:12}25%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.cta-ch .cta-sub{max-width:58ch;text-wrap:balance}

/* ===================================================================== smaller screens */
@media (max-width:980px){
  .ch-hv{width:100%;max-width:600px;margin:clamp(10px,3vw,30px) auto 0;justify-self:center}
  .crm-hero .scroll-cue{display:none}
}
@media (max-width:1000px){
  .cs-grid,.cw-p{grid-template-columns:1fr}
  .db{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .ch-hv{max-width:460px}
  .cp-bar{width:calc(100% - 2 * var(--fp) - 16px);top:calc(var(--fp) + 8px)}
  .cp-in{padding:6px;gap:0}
  .cp-lbl{display:none}
  .cp-st{height:34px;font-size:0;gap:0}
  .cp-st i{width:22px;height:22px;font-size:11px}
  .cp-sam{height:34px;padding:0 4px;justify-content:center}
  .cp-sam > span{display:none}
  .cp-sam b{width:26px;height:26px}
  .tl{width:100%}
  .ph2{display:none}
  .speed{left:auto;right:10px}
  .rec-f > div{grid-template-columns:96px 1fr}
  .kb{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px}
  .kb-c{min-height:210px;padding:6px;gap:6px}
  .kb-c p{font-size:10px;flex-direction:column;align-items:flex-start;gap:2px}
  .kc{padding:6px;font-size:10.5px}
  .kc.sam{left:calc(10px + 2 * (100% - 20px - 18px) / 4 + 12px + 6px);top:86px;width:calc((100% - 20px - 18px) / 4 - 12px);padding:6px;flex-direction:column;align-items:flex-start;gap:4px}
  @keyframes crdrag{0%{transform:none}20%{transform:translateY(-6px) rotate(-4deg)}80%{transform:translate(calc(100% + 18px),-4px) rotate(3deg)}100%{transform:translate(calc(100% + 18px),0)}}
  .ab-row{grid-template-columns:1fr}
  .ab-flow{flex-wrap:wrap}
  .rp li{grid-template-columns:1fr;gap:6px}
  .cw-tools{grid-template-columns:1fr 1fr}
  .tl2{font-size:16px;padding:12px}
  .db{grid-template-columns:1fr}
  .db-c,.db-f{grid-column:auto}
  .ca-body{grid-template-columns:90px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .ch-hv *,.cs-vis *,.cp-sam,.db *,.ci *,.cw-p,.tl2,.ca-chart i{animation:none!important;transition:none!important}
  .ch-hv *,.cs-vis *{opacity:1!important}
  .ch-srcs .src,.ir,.ch-inbox,.ch-toast,.rec-f > div,.tl li,.ph2,.bub,.speed,.won-out span,.rp li{transform:none!important}
  .ch-wires path{opacity:1}
  .cf{display:none}
  .db-b i{width:var(--w)}.fn span{width:var(--w)}
  .cta-peek .ck1,.cta-peek .ck2,.cta-peek .ck3{animation:none;stroke-dashoffset:0}
}