/* Compare v8: interactive, animated */
.cx{--ease:cubic-bezier(.2,.8,.2,1);--q:var(--accent)}
.cx-h2{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.035em;line-height:1.02;margin-top:10px}
.cx-fine{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.45}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* segmented control */
.cx-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--soft);border:1px solid var(--line);border-radius:12px}
.cx-seg button{border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);padding:9px 14px;border-radius:9px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.cx-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(31,23,18,.08),0 0 0 1px var(--line)}
.cx-seg button:focus-visible,.cx-tabs button:focus-visible,.cx-step button:focus-visible,.cx-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cx-seg-sm button{font-size:13px;padding:7px 11px}

/* hero scroll story */
.cx-hero{height:260vh;position:relative}
.cx-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.cx-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;width:100%}
.cx-h1{font-size:clamp(38px,5.6vw,76px);letter-spacing:-.045em;line-height:.98;display:grid}
.cx-h1 span{grid-area:1/1;transition:opacity .5s,transform .6s var(--ease)}
.cx-h1b{opacity:0;transform:translateY(18px);color:var(--accent)}
.cx-hero.done .cx-h1a{opacity:0;transform:translateY(-18px)}
.cx-hero.done .cx-h1b{opacity:1;transform:none}
.cx-lead{margin-top:22px}
.cx-scrollhint{display:flex;align-items:center;gap:10px;margin-top:28px;font-size:13px;color:var(--muted);transition:opacity .4s}
.cx-scrollhint span{width:22px;height:34px;border:2px solid var(--line-strong);border-radius:12px;position:relative}
.cx-scrollhint span:after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--accent);animation:cxwheel 1.6s infinite}
@keyframes cxwheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.cx-hero.done .cx-scrollhint{opacity:0}
.cx-stage{position:relative;height:min(560px,70vh);border-radius:24px;background:radial-gradient(ellipse at 50% 50%,var(--accent-soft),transparent 70%)}
.cx-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cx-wires path{fill:none;stroke:var(--bad);stroke-width:.35;stroke-dasharray:1.4 1.2;opacity:calc(.55*(1 - var(--p,0)*2));animation:cxdash 3s linear infinite}
@keyframes cxdash{to{stroke-dashoffset:-10}}
.cx-tool{position:absolute;left:var(--x);top:var(--y);width:150px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(31,23,18,.08);
  transform:translate(-50%,-50%) translate(calc((50% - var(--x)) * 0),0) rotate(var(--r));will-change:transform,opacity;display:grid;gap:2px}
.cx-tool b{font-size:15px}
.cx-tool small{font-size:12px;color:var(--muted)}
.cx-tool:before{content:"";position:absolute;right:10px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 0 rgba(179,55,44,.5);animation:cxping 1.8s infinite}
@keyframes cxping{0%{box-shadow:0 0 0 0 rgba(179,55,44,.45)}100%{box-shadow:0 0 0 10px rgba(179,55,44,0)}}
.cx-copychip{position:absolute;left:var(--a);top:var(--b);padding:5px 9px;border-radius:999px;background:var(--bad-soft);color:var(--bad);font-size:11.5px;font-weight:600;white-space:nowrap;transform:translate(-50%,-50%);animation:cxcopy 3.3s var(--ease) infinite;opacity:0}
@keyframes cxcopy{0%{left:var(--a);top:var(--b);opacity:0}15%{opacity:1}85%{opacity:1}100%{left:var(--c);top:var(--d);opacity:0}}
.cx-hero.merging .cx-copychip{display:none}
.cx-suite{position:absolute;left:50%;top:50%;width:min(320px,80%);padding:26px 22px 22px;border-radius:22px;background:var(--surface);border:1px solid var(--accent-line);box-shadow:0 30px 80px rgba(84,41,17,.18);text-align:center;display:grid;justify-items:center;gap:6px;
  transform:translate(-50%,-50%) scale(calc(.6 + .4*var(--s,0)));opacity:var(--s,0);will-change:transform,opacity}
.cx-suite b{font-size:20px;letter-spacing:-.01em}
.cx-suite small{font-size:13px;color:var(--muted)}
.cx-orbit{position:absolute;inset:-46px;pointer-events:none;animation:cxspin 26s linear infinite}
.cx-orbit img{position:absolute;left:50%;top:50%;width:30px;height:36px;margin:-18px 0 0 -15px;transform:rotate(calc(var(--k)*60deg)) translateY(-200px) rotate(calc(var(--k)*-60deg));filter:drop-shadow(0 4px 8px rgba(31,23,18,.15))}
@keyframes cxspin{to{transform:rotate(360deg)}}
.cx-orbit img{animation:cxcounter 26s linear infinite}
@keyframes cxcounter{from{rotate:0deg}to{rotate:-360deg}}
@media (max-width:860px){
  .cx-hero{height:220vh}
  .cx-hero-in{grid-template-columns:1fr;gap:18px}
  .cx-stage{height:min(380px,48vh)}
  .cx-tool{width:118px;padding:9px 10px}.cx-tool b{font-size:13px}.cx-tool small{font-size:11px}
  .cx-orbit{inset:-30px}.cx-orbit img{width:24px;height:29px;transform:rotate(calc(var(--k)*60deg)) translateY(-140px) rotate(calc(var(--k)*-60deg))}
  .cx-lead{font-size:16px}
}

/* proof */
.cx-proof{padding:30px 0 10px}
.cx-proof-g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cx-proof-g div{padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.cx-proof-g b{display:block;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--accent)}
.cx-proof-g span{display:block;margin-top:4px;font-size:13px;color:var(--muted);line-height:1.35}
@media (max-width:900px){.cx-proof-g{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-proof-g div:last-child{grid-column:1/-1}}

/* buyers demo */
.cx-buyers{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:start;padding:28px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.cx-buyers-ctl{display:grid;gap:14px;align-content:start}
.cx-buyers-read{display:grid;gap:8px;margin-top:6px}
.cx-big b{font-size:clamp(56px,7vw,88px);letter-spacing:-.05em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.cx-big span{display:block;margin-top:6px;color:var(--ink-2);font-size:15px}
.cx-vs{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:14px}
.cx-vs.q{background:var(--accent-soft);color:var(--accent);font-weight:600}
.cx-dots{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center}
.cx-toprow{position:absolute;left:-6px;right:-6px;top:-6px;height:calc(10% + 12px);border:2px dashed var(--accent-line);border-radius:12px;background:var(--accent-soft)}
.cx-toprow span{position:absolute;right:8px;top:-22px;font-size:12px;font-weight:600;color:var(--accent)}
.cx-dot{position:absolute;width:7.4%;aspect-ratio:1;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);transition:left .9s var(--ease),top .9s var(--ease),background .4s,border-color .4s,transform .4s}
.cx-dot.c{background:var(--accent);border-color:var(--accent)}
.cx-dot.c.hit{transform:scale(1.18);box-shadow:0 0 0 4px var(--accent-soft)}
@media (max-width:860px){.cx-buyers{grid-template-columns:1fr;padding:18px}}

.cx-twin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width:860px){.cx-twin{grid-template-columns:1fr}}
.cx-loopcard,.cx-timecard{padding:24px;display:grid;gap:10px;align-content:start}
.cx-loop{width:100%;max-width:360px;justify-self:center;overflow:visible}
.cx-ring{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:4 6}
.cx-core{fill:var(--accent-soft);stroke:var(--accent-line)}
.cx-core-t{font-size:17px;font-weight:700;fill:var(--accent)}
.cx-core-s{font-size:12px;fill:var(--muted)}
.cx-runner{fill:var(--accent)}
.cx-ln{cursor:pointer}
.cx-ln circle{fill:var(--surface);stroke:var(--line-strong);stroke-width:2;transition:fill .3s,stroke .3s,r .3s}
.cx-ln text{font-size:11.5px;fill:var(--ink-2);font-weight:600}
.cx-ln.on circle{fill:var(--accent);stroke:var(--accent)}
.cx-ln.on text{fill:var(--accent)}
.cx-loopread{min-height:44px;font-size:14px;color:var(--ink-2)}
.cx-tl{position:relative;margin-top:8px;padding:10px 0 4px}
.cx-tl-axis{display:grid;grid-template-columns:repeat(var(--m),1fr);font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:6px}
.cx-tl-row{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.cx-tl-row span{color:var(--ink-2)}
.cx-tl-track{position:relative;height:18px;background:var(--soft);border-radius:6px;overflow:hidden}
.cx-tl-bar{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--accent);opacity:.85;transform-origin:left;transform:scaleX(0);transition:left .7s var(--ease),width .7s var(--ease),transform .8s var(--ease)}
.cx-tl-bar.pt{background:var(--accent);opacity:.35}
.cx-tl-bar.go{transform:scaleX(1)}
.cx-tl-bar i{position:absolute;right:-1px;top:-3px;bottom:-3px;width:3px;border-radius:2px;background:var(--ink)}
.cx-tl-lab{position:absolute;left:0;top:-1px;font-size:11px;font-weight:600;color:#fff;padding:2px 6px;white-space:nowrap}

/* module tabs */
.cx-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cx-tabs button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 14px 9px 10px;font:inherit;font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--ink-2);cursor:pointer;transition:all .25s var(--ease)}
.cx-tabs button img{width:18px;height:22px}
.cx-tabs button[aria-selected="true"]{border-color:var(--c);color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent);transform:translateY(-2px)}
.cx-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:28px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);min-height:420px}
@media (max-width:860px){.cx-panel{grid-template-columns:1fr;padding:20px}}
.cx-pl{display:grid;gap:12px;align-content:start;animation:cxin .55s var(--ease)}
.cx-pl h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.1}
.cx-pl .tag{justify-self:start}
.cx-pl ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.cx-pl li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-2);line-height:1.45;opacity:0;animation:cxin .5s var(--ease) forwards}
.cx-pl li:before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--c,var(--accent));opacity:.9}
@keyframes cxin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cx-pv{position:relative;border-radius:18px;background:var(--paper);border:1px solid var(--line);padding:18px;overflow:hidden;min-height:340px;animation:cxin .6s var(--ease)}
.cx-pv .cx-ill{position:absolute;right:12px;bottom:10px;font-size:11px;color:var(--faint)}

/* mini visuals */
.mv-map{position:absolute;inset:0}
.mv-map i{position:absolute;width:8px;height:8px;border-radius:50%;background:#017FFD;opacity:0;transform:scale(0);animation:mvpop .6s var(--ease) forwards}
@keyframes mvpop{60%{opacity:1;transform:scale(1.6)}100%{opacity:.75;transform:scale(1)}}
.mv-count{position:absolute;left:18px;top:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.mv-count b{font-size:28px;letter-spacing:-.03em;color:#017FFD;font-variant-numeric:tabular-nums}
.mv-count span{display:block;font-size:12px;color:var(--muted)}
.mv-mail{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:14px;line-height:1.55;min-height:150px;white-space:pre-wrap}
.mv-mail .caret{display:inline-block;width:2px;height:16px;background:var(--ink);vertical-align:-3px;animation:mvblink 1s steps(1) infinite}
@keyframes mvblink{50%{opacity:0}}
.mv-checks{display:grid;gap:8px;margin-top:12px}
.mv-check{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2);opacity:.35;transition:opacity .3s}
.mv-check b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line-strong);font-size:12px;color:#fff;transition:all .3s}
.mv-check.ok{opacity:1}.mv-check.ok b{background:var(--good);border-color:var(--good)}
.mv-check.bad{opacity:1}.mv-check.bad b{background:var(--bad);border-color:var(--bad)}
.mv-src{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.mv-src mark{background:transparent;border-radius:4px;padding:0 2px;transition:background .4s}
.mv-src mark.on{background:#fde3d8}
.mv-facts{display:grid;gap:6px;margin-top:12px}
.mv-fact{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;opacity:0;transform:translateX(16px);transition:all .45s var(--ease)}
.mv-fact.in{opacity:1;transform:none}
.mv-fact span{color:var(--muted)}
.mv-fact em{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--good-soft);color:var(--good)}
.mv-fact.flag em{background:var(--bad-soft);color:var(--bad)}
.mv-doc{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:start}
.mv-page{height:150px;border-radius:8px;background:var(--surface);border:1px solid var(--line);padding:10px;display:grid;gap:6px;align-content:start;position:relative;overflow:hidden}
.mv-page i{height:5px;border-radius:3px;background:var(--line)}
.mv-page:after{content:"";position:absolute;left:0;right:0;height:26px;background:linear-gradient(transparent,rgba(107,79,216,.18),transparent);animation:mvscan 2.4s linear infinite}
@keyframes mvscan{from{top:-26px}to{top:150px}}
.mv-rules{display:grid;gap:7px}
.mv-rule{background:var(--surface);border:1px solid var(--line);border-left:3px solid #6B4FD8;border-radius:8px;padding:8px 10px;font-size:13px;opacity:0;transform:translateY(8px);transition:all .45s var(--ease)}
.mv-rule.in{opacity:1;transform:none}
.mv-rule span{display:block;font-size:11.5px;color:var(--muted)}
.mv-plan{position:relative;height:220px;display:flex;align-items:flex-end;gap:5px;padding:0 4px;border-bottom:1px solid var(--line)}
.mv-plan i{flex:1;background:#F7BB17;border-radius:4px 4px 0 0;transition:height .8s var(--ease);opacity:.9}
.mv-plan i.cut{background:#e9d08a}
.mv-cap{position:absolute;left:0;right:0;border-top:2px dashed var(--bad);transition:bottom .8s var(--ease)}
.mv-cap span{position:absolute;right:4px;top:-20px;font-size:11.5px;font-weight:600;color:var(--bad);background:var(--paper);padding:0 4px}
.mv-planctl{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px;flex-wrap:wrap}
.mv-planctl b{font-size:14px}
.mv-dec{display:grid;gap:8px}
.mv-decrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px}
.mv-pill{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--muted);transition:all .4s;min-width:76px;text-align:center}
.mv-pill.w{background:var(--good-soft);color:var(--good)}
.mv-pill.n{background:var(--soft);color:var(--ink-2)}
.mv-pill.b{background:var(--bad-soft);color:var(--bad)}
.mv-dechead{display:grid;grid-template-columns:1fr auto auto;gap:10px;font-size:11.5px;color:var(--muted);padding:0 12px}
.mv-dechead span:not(:first-child){min-width:76px;text-align:center}

/* builder */
.cx-build{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:20px;align-items:start}
@media (max-width:960px){.cx-build{grid-template-columns:1fr}}
.cx-build-l{display:grid;gap:14px}
.cx-steppers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cx-step{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:6px}
.cx-step>span{font-size:13px;color:var(--muted)}
.cx-step div{display:flex;align-items:center;justify-content:space-between}
.cx-step button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--soft);font:inherit;font-size:18px;cursor:pointer;color:var(--ink);transition:transform .15s}
.cx-step button:active{transform:scale(.92)}
.cx-step b{font-size:24px;font-variant-numeric:tabular-nums}
.cx-rev{display:grid;gap:6px}.cx-rev>span{font-size:13px;color:var(--muted)}
.cx-job{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;gap:10px;transition:border-color .3s,box-shadow .3s}
.cx-job.on{border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.cx-job-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cx-job-h div{display:flex;align-items:center;gap:10px}
.cx-job-h img{width:20px;height:24px}
.cx-job-h b{font-size:15px}
.cx-job-h small{display:block;font-size:12px;color:var(--muted);font-weight:400}
.cx-job-cost{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.cx-chips{display:flex;flex-wrap:wrap;gap:6px}
.cx-chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 11px;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;transition:all .2s}
.cx-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cx-build-r{position:sticky;top:88px;display:grid;gap:14px;padding:22px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.cx-sumrow{display:grid;gap:6px}
.cx-sumrow>div{display:flex;justify-content:space-between;align-items:baseline}
.cx-sumrow span{font-size:14px;color:var(--ink-2)}
.cx-sumrow b{font-size:28px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cx-sumrow.q b{color:var(--accent)}
.cx-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--soft)}
.cx-bar i{display:block;height:100%;transition:width .7s var(--ease)}
.cx-delta{padding:14px;border-radius:14px;font-weight:600;font-size:15px;line-height:1.4;transition:background .3s,color .3s}
.cx-delta.save{background:var(--good-soft);color:var(--good)}
.cx-delta.more{background:var(--accent-soft);color:var(--accent)}
.cx-delta b{font-size:22px;display:block;letter-spacing:-.02em}
.cx-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cx-mini div{background:var(--soft);border-radius:12px;padding:10px 12px}
.cx-mini b{font-size:20px;font-variant-numeric:tabular-nums}
.cx-mini span{display:block;font-size:12px;color:var(--muted)}
.cx-plan{font-size:13px;color:var(--ink-2);line-height:1.5}
.cx-tog{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.cx-tog input{width:18px;height:18px;accent-color:var(--accent)}

/* flow */
.cx-flowwrap{display:grid;gap:16px;justify-items:start}
.cx-flow{width:100%;height:auto;background:var(--surface);border:1px solid var(--line);border-radius:22px}
.cx-fn rect{fill:var(--surface);stroke:var(--line);stroke-width:1.5;transition:stroke .4s}
.cx-fn .bar{transition:fill .4s}
.cx-fn text.n{font-size:16px;font-weight:700;fill:var(--ink);transition:opacity .35s}
.cx-fn text.s{font-size:12.5px;fill:var(--muted);transition:opacity .35s}
.cx-fn image{transition:opacity .35s}
.cx-fe{fill:none;stroke:var(--line-strong);stroke-width:2;transition:stroke .4s,stroke-dasharray .4s}
.sep .cx-fe{stroke:#e8b9b3;stroke-dasharray:6 6}
.cx-wall{opacity:0;transition:opacity .4s}
.sep .cx-wall{opacity:1}
.cx-hub{transition:opacity .5s,transform .5s var(--ease);transform-origin:430px 210px}
.sep .cx-hub{opacity:0;transform:scale(.6)}
.cx-pulse{fill:var(--accent)}
.cx-pulse.stuck{fill:var(--bad)}
.cx-flowstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.cx-flowstats div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.cx-flowstats b{font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cx-flowstats span{display:block;font-size:12.5px;color:var(--muted)}

/* coverage */
.cx-cov-ctl{margin-bottom:18px}
.cx-cov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;perspective:1000px}
@media (max-width:760px){.cx-cov{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cx-tile{position:relative;padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--line);min-height:140px;display:grid;gap:8px;align-content:start;transition:transform .6s var(--ease),opacity .4s,border-color .4s,box-shadow .4s,background .4s}
.cx-tile img{width:30px;height:36px;transition:filter .4s,opacity .4s}
.cx-tile b{font-size:16px}
.cx-tile span{font-size:13px;color:var(--muted)}
.cx-tile em{position:absolute;right:14px;top:14px;font-style:normal;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.cx-tile.y{border-color:color-mix(in srgb,var(--c) 50%,var(--line));box-shadow:0 12px 30px color-mix(in srgb,var(--c) 18%,transparent)}
.cx-tile.y em{background:var(--good-soft);color:var(--good)}
.cx-tile.p em{background:var(--warn-soft);color:var(--warn)}
.cx-tile.n{opacity:.45;transform:rotateX(14deg) scale(.96)}
.cx-tile.n img{filter:grayscale(1);opacity:.5}
.cx-tile.n em{background:var(--soft);color:var(--muted)}
.cx-tile.flip{animation:cxflip .6s var(--ease)}
@keyframes cxflip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
.cx-covread{margin-top:16px;font-size:16px;color:var(--ink-2);min-height:48px}
.cx-covread b{color:var(--accent)}

/* rules */
.cx-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:r}
@media (max-width:760px){.cx-rules{grid-template-columns:1fr}}
.cx-rule{position:relative;padding:24px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:grid;gap:8px}
.cx-rule span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700}
.cx-rule:not(:last-child):after{content:"";position:absolute;right:-12px;top:40px;width:8px;height:8px;border-top:2px solid var(--line-strong);border-right:2px solid var(--line-strong);transform:rotate(45deg)}
@media (max-width:760px){.cx-rule:after{display:none}}
.cx-next{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.cx-next h2{font-size:clamp(22px,3vw,32px);margin-top:8px;letter-spacing:-.02em}
.cx-next p{margin-top:10px;max-width:640px}
.cx-next img{animation:cxfloat 4s ease-in-out infinite}
@keyframes cxfloat{50%{transform:translateY(-8px) rotate(4deg)}}
@media (max-width:600px){.cx-next img{display:none}}
.cx-src summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.cx-src ul{margin:10px 0;padding-left:18px;display:grid;gap:4px}
.cx-src a{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .cx-hero{height:auto}.cx-sticky{position:relative;height:auto;padding:80px 0 40px}
  .cx-tool,.cx-wires,.cx-copychip{display:none}.cx-suite{--s:1}
  .cx-orbit,.cx-orbit img,.cx-next img,.cx-scrollhint span:after,.cx-wires path,.cx-tool:before,.mv-page:after{animation:none}
  .cx-h1a{display:none}.cx-h1b{opacity:1;transform:none}
}
.cx-tl-row .cx-tl-lab{color:#fff}
.cx-h1b{align-self:center}
@media (max-width:600px){
  .cx-suite{width:200px;padding:18px 14px 16px}
  .cx-suite b{font-size:17px}.cx-suite small{font-size:11.5px}
  .cx-orbit img{transform:rotate(calc(var(--k)*60deg)) translateY(-150px) rotate(calc(var(--k)*-60deg))}
}