/* Services index (prefix si-) */
:root{--si-or:#FF5B1A;--si-deep:#C2410C;--si-pe:#FFA77F;--si-pan:#0B0D14;--si-ln:#22263A;--si-mut:#8C91A3}

/* ───── hero: stacking blocks ───── */
.si-bk{position:relative;max-width:640px;margin-left:auto;color:#E8EAF0;border:1px solid var(--si-ln);background:rgba(11,13,20,.78);backdrop-filter:blur(3px);box-shadow:0 40px 90px -40px rgba(255,91,26,.35)}
.si-bk-top{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--si-ln);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--si-mut)}
.si-bk-mode{color:#fff}
.si-bk-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}
.si-bk-stage svg{width:100%;display:block;overflow:visible}
.si-bk-shadow ellipse{fill:rgba(255,91,26,.12);filter:blur(10px)}
.si-bk-blk{transition:transform .9s cubic-bezier(.3,1.25,.5,1),opacity .6s;cursor:pointer;transform-box:view-box}
.si-bk-blk .si-bk-top-f{fill:#1C2030;stroke:#3A3F55;stroke-width:1}
.si-bk-blk .si-bk-l{fill:#12151F;stroke:#3A3F55;stroke-width:1}
.si-bk-blk .si-bk-r{fill:#0B0D14;stroke:#3A3F55;stroke-width:1}
.si-bk-blk .si-bk-tab{fill:#262A36;stroke:#4A4F66;stroke-width:1}
.si-bk-blk text{font-size:16px;font-weight:600;fill:#C9CBD3;letter-spacing:-.01em}
.si-bk-blk text.si-bk-n{font-size:11px;fill:#6E7286;font-weight:500}
.si-bk-blk.si-hot .si-bk-top-f{fill:#FF5B1A;stroke:#FFA77F}.si-bk-blk.si-hot .si-bk-l{fill:#C2410C;stroke:#FF5B1A}.si-bk-blk.si-hot .si-bk-r{fill:#8A2E08;stroke:#C2410C}
.si-bk-blk.si-hot .si-bk-tab{fill:#FFA77F;stroke:#fff}
.si-bk-blk.si-hot text{fill:#fff}.si-bk-blk.si-hot text.si-bk-n{fill:#FFE2D3}
.si-bk-blk.si-out{opacity:0;pointer-events:none}
.si-bk-card{padding:18px 18px 18px 6px;min-height:200px}
.si-bk-card small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--si-pe);margin-bottom:6px}
.si-bk-card b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1.2}
.si-bk-card p{font-size:13.5px;line-height:1.5;color:#A3A8B8;margin:8px 0 10px}
.si-bk-chips{display:flex;flex-wrap:wrap;gap:4px}
.si-bk-chips span{font-size:11px;padding:3px 7px;border:1px solid rgba(255,91,26,.45);color:var(--si-pe)}
.si-bk-card.si-sw>*{animation:siIn .45s both}.si-bk-card.si-sw p{animation-delay:.08s}.si-bk-card.si-sw .si-bk-chips{animation-delay:.16s}
@keyframes siIn{from{opacity:0;transform:translateY(8px)}}
.si-bk-leg{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--si-ln)}
.si-bk-leg button{all:unset;cursor:pointer;text-align:center;padding:10px 4px;font-size:12px;color:#A3A8B8;border-left:1px solid var(--si-ln);transition:background .25s,color .25s}
.si-bk-leg button:first-child{border-left:0}
.si-bk-leg button.si-on{background:rgba(255,91,26,.14);color:#fff}
.si-bk-leg button:focus-visible{outline:2px solid var(--si-pe);outline-offset:-2px}
@media (max-width:640px){.si-bk-stage{grid-template-columns:1fr}.si-bk-card{padding:0 16px 16px;min-height:150px}.si-bk-stage svg{max-height:330px}.si-bk-leg{grid-template-columns:repeat(3,1fr)}.si-bk-leg button:nth-child(4){border-left:0}.si-bk-leg button:nth-child(n+4){border-top:1px solid var(--si-ln)}}

/* ───── answers: mad-lib ───── */
.si-ml{background:#0B0D14;border-top:1px solid var(--si-ln);color:#fff;padding-block:clamp(40px,5vw,72px)}
.si-ml-p{font-size:clamp(21px,2.3vw,34px);line-height:1.9;letter-spacing:-.015em;color:#6E7286;margin:0;max-width:1100px}
.si-ml-b{position:relative;display:inline-block;border-bottom:2px solid #3A3F55;padding:0 4px;line-height:1.3;outline:none;transition:border-color .3s}
.si-ml-w{display:inline-block;color:#fff;opacity:0;transform:translateY(-22px);transition:opacity .5s calc(var(--i) * .45s + .2s),transform .6s calc(var(--i) * .45s + .2s) cubic-bezier(.3,1.5,.5,1)}
.si-ml.si-in .si-ml-w{opacity:1;transform:none}
.si-ml-b small{position:absolute;left:4px;top:100%;margin-top:3px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--si-pe);line-height:1;white-space:nowrap}
.si-ml-b:hover,.si-ml-b:focus-visible,.si-ml-b.si-on{border-color:var(--si-or)}
.si-ml-b:hover .si-ml-w,.si-ml-b:focus-visible .si-ml-w,.si-ml-b.si-on .si-ml-w{color:var(--si-pe)}
@media (max-width:600px){.si-ml-p{font-size:19px;line-height:1.5}.si-ml-s{display:block;margin-bottom:22px}.si-ml-x{display:none}.si-ml-b{display:inline}.si-ml-b small{position:static;display:block;margin-top:6px}}

/* ───── finder: combination lock ───── */
.si-lk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.si-lk-body{position:relative;padding-top:90px;max-width:560px}
.si-lk-shackle{position:absolute;top:0;left:22%;right:22%;height:150px;border:22px solid #3A3F55;border-bottom:0;border-radius:120px 120px 0 0;transition:transform .5s cubic-bezier(.3,1.6,.5,1);background:transparent;box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
.si-lk-body.si-open .si-lk-shackle{transform:translateY(-26px);border-color:var(--si-or)}
.si-lk-case{position:relative;background:linear-gradient(180deg,#161821,#0B0D14);border-radius:22px;padding:26px 24px 20px;box-shadow:0 40px 60px -30px rgba(11,12,16,.7),inset 0 1px 0 rgba(255,255,255,.06);display:grid;gap:16px}
.si-lk-w{display:grid;gap:8px}
.si-lk-q{display:flex;gap:10px;align-items:center;font-size:14px;color:#C9CBD3}
.si-lk-q b{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--si-or);color:#fff;font-size:11px}
.si-lk-row{display:grid;grid-template-columns:40px 1fr 40px;gap:8px;align-items:center}
.si-lk-row button{all:unset;cursor:pointer;height:40px;display:grid;place-items:center;border:1px solid #3A3F55;color:#C9CBD3;font-size:11px;border-radius:8px;transition:background .2s,color .2s}
.si-lk-row button:hover{background:var(--si-or);border-color:var(--si-or);color:#fff}
.si-lk-row button:focus-visible{outline:2px solid var(--si-pe)}
.si-lk-drum{height:58px;perspective:500px;border-radius:10px;background:#05060A;box-shadow:inset 0 10px 14px -8px #000,inset 0 -10px 14px -8px #000;overflow:hidden;cursor:ns-resize;outline:none;position:relative;touch-action:none}
.si-lk-drum::after{content:"";position:absolute;inset:0;border:1px solid #3A3F55;border-radius:10px;pointer-events:none;background:linear-gradient(#05060A,transparent 30%,transparent 70%,#05060A)}
.si-lk-drum:focus-visible{outline:2px solid var(--si-pe)}
.si-lk-cyl{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.3,.5,1)}
.si-lk-f{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(14px,1.3vw,16px);font-weight:500;color:#fff;background:#12151F;backface-visibility:hidden;transform:rotateX(calc(var(--f) * -90deg)) translateZ(29px);border-top:1px solid #22263A;border-bottom:1px solid #22263A;text-align:center;padding:0 8px}
.si-lk-st{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--si-mut);padding-top:6px;border-top:1px solid var(--si-ln)}
.si-lk-st i{width:10px;height:10px;border-radius:50%;background:#3A3F55;transition:background .3s}
.si-lk-body.si-open .si-lk-st i{background:var(--si-or);box-shadow:0 0 10px var(--si-or)}
.si-lk-body.si-open .si-lk-st{color:#fff}
.si-lk-out small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--si-deep)}
.si-lk-msg{font-size:clamp(18px,1.6vw,22px);line-height:1.4;font-weight:500;color:#0B0C10;margin:6px 0 16px;min-height:2.8em}
.si-lk-rs{display:flex;flex-direction:column;gap:6px}
.si-lk-r{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:10px 14px;border:1px solid #E2DAD0;background:#fff;color:#8F8A80;transition:all .45s;order:9}
.si-lk-r svg{width:34px;height:34px;fill:none;stroke:#C9C2B8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.si-lk-r b{display:block;font-size:15px;font-weight:500}
.si-lk-r small{font-size:12px}
.si-lk-r i{font-style:normal;opacity:0;transition:opacity .3s}
.si-lk-r.si-m1,.si-lk-r.si-m2,.si-lk-r.si-m3{color:#0B0C10}
.si-lk-r.si-m1{order:1;border-color:var(--si-or);background:#FFF1E9;box-shadow:0 14px 26px -18px rgba(194,65,12,.8)}
.si-lk-r.si-m2{order:2}.si-lk-r.si-m3{order:3}
.si-lk-r.si-m1 svg,.si-lk-r.si-m2 svg,.si-lk-r.si-m3 svg{stroke:var(--si-or)}
.si-lk-r.si-m1 i,.si-lk-r.si-m2 i,.si-lk-r.si-m3 i{opacity:1;color:var(--si-deep)}
.si-lk-r.si-m1 b::after{content:"Start here";margin-left:10px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--si-or);color:#fff;padding:2px 6px;vertical-align:2px}
.si-lk-r:not(.si-m1):not(.si-m2):not(.si-m3){padding-block:6px;opacity:.6}
.si-lk-r:hover{border-color:#0B0C10}
@media (max-width:900px){.si-lk{grid-template-columns:1fr}.si-lk-body{margin:auto;width:100%}}
@media (max-width:480px){.si-lk-body{padding-top:70px}.si-lk-shackle{height:110px;border-width:16px}.si-lk-case{padding:20px 14px 16px}.si-lk-row{grid-template-columns:34px 1fr 34px;gap:6px}}

/* ───── six services: cube ───── */
.si-cb{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start}
.si-cb-scene{height:360px;perspective:1000px;display:grid;place-items:center;cursor:grab;outline:none;touch-action:pan-y}
.si-cb-scene:focus-visible{outline:2px solid var(--si-pe);outline-offset:4px}
.si-cb-cube{position:relative;width:230px;height:230px;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.5,0,.25,1)}
.si-cb-f{position:absolute;inset:0;box-sizing:border-box;padding:22px;background:linear-gradient(145deg,#161821,#0B0D14);border:1px solid #3A3F55;display:flex;flex-direction:column;backface-visibility:hidden}
.si-cb-f svg{width:64px;height:64px;fill:none;stroke:var(--si-or);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:auto}
.si-cb-f small{font-size:11px;color:var(--si-mut);margin-bottom:4px}
.si-cb-f b{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1.15}
.si-cb-f span{font-size:12px;color:var(--si-pe);margin-top:4px}
.si-cb-f0{transform:translateZ(115px)}.si-cb-f1{transform:rotateY(90deg) translateZ(115px)}.si-cb-f2{transform:rotateY(180deg) translateZ(115px)}
.si-cb-f3{transform:rotateY(-90deg) translateZ(115px)}.si-cb-f4{transform:rotateX(90deg) translateZ(115px)}.si-cb-f5{transform:rotateX(-90deg) translateZ(115px)}
.si-cb-f.si-on{border-color:var(--si-or);box-shadow:inset 0 0 40px rgba(255,91,26,.18)}
.si-cb-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.si-cb-tabs button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--si-ln);font-size:13.5px;color:#A3A8B8;transition:all .25s}
.si-cb-tabs button b{font-size:11px;color:var(--si-mut)}
.si-cb-tabs button[aria-pressed=true]{border-color:var(--si-or);color:#fff;background:rgba(255,91,26,.08)}
.si-cb-tabs button[aria-pressed=true] b{color:var(--si-pe)}
.si-cb-tabs button:focus-visible{outline:2px solid var(--si-pe)}
.si-cb-p{display:none}.si-cb-p.si-on{display:block;animation:siIn .5s both}
.si-cb-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--si-pe)}
.si-cb-p h3{font-size:clamp(26px,2.6vw,38px);font-weight:600;letter-spacing:-.03em;color:#fff;margin:6px 0 10px}
.si-cb-l{font-size:16.5px;line-height:1.6;color:#C9CBD3;margin:0 0 20px;max-width:36em}
.si-cb-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--si-ln);border-bottom:1px solid var(--si-ln);margin-bottom:18px}
.si-cb-facts div{padding:12px 12px 12px 0}.si-cb-facts div+div{padding-left:14px;border-left:1px solid var(--si-ln)}
.si-cb-facts small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--si-mut);margin-bottom:4px}
.si-cb-facts b{font-size:14.5px;font-weight:500;color:#fff}
.si-cb-subs{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.si-cb-subs li{font-size:13px;padding:6px 10px;border:1px solid #2A2F44;color:#D5D8E0;animation:siIn .4s both}
.si-cb-subs li:nth-child(2){animation-delay:.05s}.si-cb-subs li:nth-child(3){animation-delay:.1s}.si-cb-subs li:nth-child(4){animation-delay:.15s}.si-cb-subs li:nth-child(5){animation-delay:.2s}.si-cb-subs li:nth-child(6){animation-delay:.25s}.si-cb-subs li:nth-child(7){animation-delay:.3s}.si-cb-subs li:nth-child(8){animation-delay:.35s}
.si-cb-go{display:inline-flex;gap:10px;align-items:center;padding:13px 20px;background:var(--si-or);color:#fff;font-size:15px;font-weight:500}
.si-cb-go i{font-style:normal}
.si-cb-go:hover{background:#E84A0C}
@media (max-width:900px){.si-cb{grid-template-columns:1fr}.si-cb-scene{height:300px}}
@media (max-width:560px){.si-cb-cube{width:190px;height:190px}.si-cb-f0{transform:translateZ(95px)}.si-cb-f1{transform:rotateY(90deg) translateZ(95px)}.si-cb-f2{transform:rotateY(180deg) translateZ(95px)}.si-cb-f3{transform:rotateY(-90deg) translateZ(95px)}.si-cb-f4{transform:rotateX(90deg) translateZ(95px)}.si-cb-f5{transform:rotateX(-90deg) translateZ(95px)}.si-cb-f b{font-size:18px}.si-cb-f svg{width:48px;height:48px}
  .si-cb-facts{grid-template-columns:1fr}.si-cb-facts div+div{padding-left:0;border-left:0;border-top:1px solid var(--si-ln)}.si-cb-tabs button{font-size:12.5px;padding:8px}}

/* ───── schematic: pan & zoom ───── */
.si-pz{display:grid;gap:12px}
.si-pz-view{position:relative;background:#FBF8F4;border:1px solid #D6D6D2;overflow:hidden}
.si-pz-svg{width:100%;display:block;aspect-ratio:1000/600}
.si-pz-wires path{fill:none;stroke:#C2410C;stroke-width:2;stroke-dasharray:6 6;animation:siDash 1.4s linear infinite}
@keyframes siDash{to{stroke-dashoffset:-24}}
.si-pz-shield{fill:none;stroke:#C9C2B8;stroke-width:2;stroke-dasharray:3 9;transition:stroke .4s,stroke-width .4s}
.si-pz-p rect,.si-pz-p circle,.si-pz-p path{fill:#fff;stroke:#0B0C10;stroke-width:2;transition:fill .4s,stroke .4s}
.si-pz-p path{fill:none}
.si-pz-p .si-pz-ln{stroke:#C9C2B8;stroke-width:6;stroke-linecap:round}
.si-pz-p .si-pz-fill{fill:#0B0C10}
.si-pz-p .si-pz-btn{fill:#FF5B1A;stroke:none}
.si-pz-p .si-pz-bar{stroke:#FF5B1A;stroke-width:10}
.si-pz-p text{font-size:13px;fill:#fff}
.si-pz-p text.si-pz-t{font-size:17px;font-weight:600;fill:#0B0C10}
.si-pz-p text.si-pz-w{font-size:11px;fill:#fff}
.si-pz-p{cursor:pointer}
.si-pz-p.si-on rect:not(.si-pz-fill):not(.si-pz-btn){stroke:#FF5B1A;fill:#FFF5EE}
.si-pz-p.si-on text.si-pz-t{fill:#C2410C}
.si-pz-view.si-shield .si-pz-shield{stroke:#FF5B1A;stroke-width:5;stroke-dasharray:14 8}
.si-pz-caps{position:absolute;left:16px;bottom:16px;width:min(360px,calc(100% - 32px))}
.si-pz-c{display:none;background:#0B0D14;color:#E8EAF0;padding:18px 20px;box-shadow:0 30px 50px -30px rgba(11,12,16,.8)}
.si-pz-c.si-on{display:block;animation:siIn .45s both}
.si-pz-c small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--si-pe)}
.si-pz-c h3{font-size:22px;font-weight:600;letter-spacing:-.02em;color:#fff;margin:4px 0 6px}
.si-pz-c p{font-size:14px;line-height:1.5;color:#C9CBD3;margin:0 0 10px}
.si-pz-c dl{margin:0 0 10px;display:grid;gap:4px}
.si-pz-c dl div{display:flex;justify-content:space-between;gap:10px;font-size:13px;border-top:1px solid #22263A;padding-top:4px}
.si-pz-c dt{color:var(--si-mut)}.si-pz-c dd{margin:0;color:#fff;text-align:right}
.si-pz-c a{font-size:14px;color:var(--si-pe)}
.si-pz-all{all:unset;cursor:pointer;position:absolute;right:16px;top:16px;padding:9px 14px;background:#0B0C10;color:#fff;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s}
.si-pz-view.si-zoom .si-pz-all{opacity:1;pointer-events:auto}
.si-pz-all:focus-visible{outline:2px solid var(--si-or);outline-offset:2px}
.si-pz-btns{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.si-pz-btns button{all:unset;cursor:pointer;padding:10px 12px;border:1px solid #D6D6D2;background:#fff;transition:all .25s}
.si-pz-btns button b{display:block;font-size:14px;font-weight:600;color:#0B0C10}
.si-pz-btns button small{font-size:12px;color:#8F8A80}
.si-pz-btns button[aria-pressed=true]{background:#0B0C10;border-color:#0B0C10}
.si-pz-btns button[aria-pressed=true] b{color:#fff}.si-pz-btns button[aria-pressed=true] small{color:var(--si-pe)}
.si-pz-btns button:focus-visible{outline:2px solid var(--si-or);outline-offset:2px}
@media (max-width:900px){.si-pz-btns{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.si-pz-svg{aspect-ratio:1/1}.si-pz-caps{position:static;width:auto}.si-pz-btns{grid-template-columns:1fr 1fr}.si-pz-all{top:10px;right:10px}}

/* ───── what you receive: file transfer ───── */
.si-tf-tabs{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--si-ln);margin-bottom:16px}
.si-tf-tabs button{all:unset;cursor:pointer;padding:12px 10px;text-align:center;font-size:13.5px;color:#A3A8B8;border-left:1px solid var(--si-ln);transition:background .25s,color .25s}
.si-tf-tabs button:first-child{border-left:0}
.si-tf-tabs button[aria-pressed=true]{background:var(--si-or);color:#fff}
.si-tf-tabs button:focus-visible{outline:2px solid var(--si-pe);outline-offset:-2px}
.si-tf-in{display:grid;grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);gap:0;align-items:stretch}
.si-tf-pane{border:1px solid var(--si-ln);background:#0B0D14;padding:16px 18px;min-height:360px}
.si-tf-you{border-color:rgba(255,91,26,.5);background:linear-gradient(180deg,rgba(255,91,26,.07),#0B0D14 40%)}
.si-tf-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--si-ln);padding-bottom:10px;margin-bottom:8px}
.si-tf-h b{font-size:15px;font-weight:600;color:#fff}.si-tf-h small{font-size:12px;color:var(--si-mut)}
.si-tf-you .si-tf-h small{color:var(--si-pe)}
.si-tf-src,.si-tf-dst{display:none;list-style:none;margin:0;padding:0}
.si-tf-src.si-on,.si-tf-dst.si-on{display:block}
.si-tf-src li,.si-tf-dst li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #161821;font-size:14px;line-height:1.35;color:#D5D8E0;transition:opacity .4s,color .4s}
.si-tf-src li i,.si-tf-dst li i{flex:none;width:16px;height:20px;border:1.5px solid #4A4F66;clip-path:polygon(0 0,70% 0,100% 28%,100% 100%,0 100%);transition:border-color .3s,background .3s}
.si-tf-src li.si-gone{opacity:.28;color:#6E7286}
.si-tf-src li.si-now i{background:var(--si-or);border-color:var(--si-or)}
.si-tf-dst li{opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .4s}
.si-tf-dst li.si-in{opacity:1;transform:none}
.si-tf-dst li i{border-color:var(--si-or);background:rgba(255,91,26,.25)}
.si-tf-dst li span{flex:1}
.si-tf-dst li em{font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--si-or);padding:2px 6px}
.si-tf-mid{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.si-tf-mid svg{width:120px;height:200px;overflow:visible}
.si-tf-mid svg path{fill:none;stroke:#3A3F55;stroke-width:1.5;stroke-dasharray:4 5;animation:siDash 1.2s linear infinite}
.si-tf-mid svg path.si-tf-alt{stroke:#22263A}
.si-tf-arc{position:relative;width:120px;height:200px}
.si-tf-fly{position:absolute;left:0;top:0;width:16px;height:20px;background:var(--si-or);clip-path:polygon(0 0,70% 0,100% 28%,100% 100%,0 100%);offset-path:path('M10 100 C40 40 80 40 110 100');offset-rotate:0deg;offset-distance:0%;opacity:0;box-shadow:0 0 12px var(--si-or)}
.si-tf-fly.si-go{animation:siFly .62s ease-in-out}
@keyframes siFly{0%{offset-distance:0%;opacity:1}100%{offset-distance:100%;opacity:1}}
.si-tf-bar{width:100px;height:6px;background:#161821;border-radius:3px;overflow:hidden}
.si-tf-bar i{display:block;height:100%;width:0;background:var(--si-or);transition:width .4s}
.si-tf-pct{font-size:12px;color:var(--si-pe)}
@media (max-width:900px){.si-tf-tabs{grid-template-columns:repeat(3,1fr)}.si-tf-tabs button:nth-child(4){border-left:0}.si-tf-tabs button:nth-child(n+4){border-top:1px solid var(--si-ln)}
  .si-tf-in{grid-template-columns:1fr}.si-tf-pane{min-height:0}.si-tf-mid{flex-direction:row;padding:14px 0}.si-tf-arc{display:none}.si-tf-bar{width:60%}}

/* ───── combos: braided rope ───── */
.si-br-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #D6D6D2;background:#fff;margin-bottom:18px}
.si-br-tabs button{all:unset;cursor:pointer;padding:14px 16px;font-size:15px;font-weight:500;color:#4B4E58;border-left:1px solid #D6D6D2;transition:background .25s,color .25s}
.si-br-tabs button:first-child{border-left:0}
.si-br-tabs button[aria-pressed=true]{background:#0B0C10;color:#fff}
.si-br-tabs button:focus-visible{outline:2px solid var(--si-or);outline-offset:-2px}
.si-br-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,3vw,48px);align-items:center}
.si-br-vis{background:#fff;border:1px solid #E2DAD0;padding:12px}
.si-br-vis svg{width:100%;display:block}
.si-br-peg{fill:#0B0C10}
.si-br-sh{fill:none;stroke:#F5F2EE;stroke-width:13;stroke-linecap:round}
.si-br-st{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke .5s}
.si-br-t{font-size:12px;font-weight:600;fill:#4B4E58;transition:fill .4s,opacity .4s}
.si-br-g.si-on .si-br-t{fill:#C2410C}
.si-br-p{display:none}.si-br-p.si-on{display:block;animation:siIn .45s both}
.si-br-p small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--si-deep)}
.si-br-p h3{font-size:clamp(24px,2.4vw,34px);font-weight:600;letter-spacing:-.03em;color:#0B0C10;margin:6px 0 10px}
.si-br-p p{font-size:16px;line-height:1.6;color:#4B4E58;margin:0 0 16px}
.si-br-s{display:flex;flex-wrap:wrap;gap:6px}
.si-br-s a{font-size:14px;padding:8px 12px;border:1px solid var(--si-or);color:var(--si-deep);background:#FFF1E9}
.si-br-s a:hover{background:var(--si-or);color:#fff}
@media (max-width:900px){.si-br-in{grid-template-columns:1fr}.si-br-tabs{grid-template-columns:1fr 1fr}.si-br-tabs button:nth-child(3){border-left:0}.si-br-tabs button:nth-child(n+3){border-top:1px solid #D6D6D2}}
@media (max-width:560px){.si-br-t{font-size:17px}}

/* ───── magnets ───── */
.si-mg-ms{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:14px}
.si-mg-m{all:unset;cursor:pointer;display:flex;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--si-ln);font-size:13.5px;color:#A3A8B8;transition:all .25s}
.si-mg-m svg{width:20px;height:20px;flex:none;fill:#3A3F55;transition:fill .25s}
.si-mg-m[aria-pressed=true]{border-color:var(--si-or);background:rgba(255,91,26,.1);color:#fff}
.si-mg-m[aria-pressed=true] svg{fill:var(--si-or)}
.si-mg-m:focus-visible{outline:2px solid var(--si-pe)}
.si-mg-field{position:relative;height:540px;border:1px solid var(--si-ln);background:radial-gradient(circle at 50% 0,rgba(255,91,26,.08),transparent 60%),#05060A;overflow:hidden}
.si-mg-c{position:absolute;box-sizing:border-box;width:8px;height:8px;border-radius:50%;background:#3A3F55;overflow:hidden;transition:left .9s cubic-bezier(.5,0,.2,1),top .9s cubic-bezier(.5,0,.2,1),width .6s,height .6s,border-radius .6s,background .5s,padding .6s;transition-delay:calc(var(--d,0) * 30ms)}
.si-mg-c b,.si-mg-c span{display:block;opacity:0;transition:opacity .3s;white-space:normal}
.si-mg-c.si-on{z-index:2;width:calc(46% - 6px);height:112px;border-radius:2px;background:#0E1018;border:1px solid #2A2F44;border-left:3px solid var(--si-or);padding:14px 16px}
.si-mg-c.si-on b,.si-mg-c.si-on span{opacity:1;transition-delay:.6s}
.si-mg-c b{font-size:15.5px;font-weight:500;color:#fff;margin-bottom:4px}
.si-mg-c span{font-size:13.5px;line-height:1.45;color:#A3A8B8}
.si-mg-c.si-on:hover{border-color:var(--si-or);background:#140D0A}
@media (max-width:900px){.si-mg-ms{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.si-mg-ms{grid-template-columns:1fr 1fr}.si-mg-m{font-size:12.5px;padding:8px}.si-mg-field{height:1060px}.si-mg-c.si-on{z-index:2;width:calc(100% - 24px);height:118px;padding:12px 14px}.si-mg-c b{font-size:14.5px}.si-mg-c span{font-size:13px}}

@media (prefers-reduced-motion:reduce){
  .si-bk *,.si-ml *,.si-lk *,.si-cb *,.si-pz *,.si-tf *,.si-br *,.si-mg *{animation:none!important;transition:none!important}
}
/* QA: phones - underline sits on the phrase itself; the inline wrapper used to leave a stray dash under each label */
@media (max-width:600px){.si-ml-b{display:block;border-bottom:0;padding:0}.si-ml-w{border-bottom:2px solid #3A3F55;padding:0 4px;transition-property:opacity,transform,border-color}.si-ml-b:hover .si-ml-w,.si-ml-b:focus-visible .si-ml-w,.si-ml-b.si-on .si-ml-w{border-color:var(--si-or)}.si-ml-b small{margin-left:4px}}
.si-pz-c a{display:inline-block;padding:4px 0}
/* QA widths 641-1100: the practice card sat on top of the zoomed diagram; show it under the diagram as on phones. 561-900: taller cube stage so the turned cube clears the practice buttons */
@media (min-width:641px) and (max-width:1100px){.si-pz-caps{position:static;width:auto}}
@media (min-width:561px) and (max-width:900px){.si-cb-scene{height:350px}}
/* phone text +3px: the rope's strand names may run into the panel padding instead of being cut at the left edge */
@media (max-width:600px){.si-br-vis svg{overflow:visible}}