/* P10 Small-Business BPO — delegation fit */
.page-bpo main>section{overflow-x:clip}
.mono{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--p3)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--mut);margin-bottom:22px}
.crumbs a:hover{color:var(--p3)}.crumbs b{color:var(--p3);font-weight:600}
:root{--amb:#f59e2b;--amb2:#fff4e3;--grn:#1c9d61;--red:#c8324f}

/* hero */
.bp-hero{position:relative;padding:58px 0 96px;background:linear-gradient(180deg,#fff 0%,#fdfbff 60%,var(--lav2) 100%);overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none}
.b1{width:460px;height:460px;right:6%;top:40px;background:#e6d9ff;animation:blobA 14s ease-in-out infinite alternate}
.b2{width:320px;height:320px;right:30%;bottom:-80px;background:#ffe7c7;animation:blobA 18s ease-in-out -5s infinite alternate-reverse}
@keyframes blobA{to{transform:translate(-40px,30px) scale(1.1)}}
.bp-hin{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.bp-hin>*{min-width:0}
.bp-h1{font-size:clamp(36px,4vw,56px);margin:18px 0 22px;max-width:640px}
.mark{color:var(--p3);background:linear-gradient(90deg,#ffd79a,#ffc46b) no-repeat 0 88%/0% .34em;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 4px;margin:0 -4px;animation:markIn .9s var(--ease) 1.1s forwards}
.bp-h1 .ln{position:relative;z-index:0}
@keyframes markIn{to{background-size:100% .34em}}
.fit-stage{position:relative;padding:20px 175px 20px 0}
.fitcard{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px;box-shadow:0 30px 70px rgba(64,30,140,.14);transition:border-color .5s}
.fitcard.bad{border-color:#f3c1c9}
.fc-top{display:flex;justify-content:space-between;align-items:center}
.fc-tabs{display:flex;gap:6px}.fc-tabs i{width:22px;height:5px;border-radius:3px;background:var(--line);transition:background .4s}.fc-tabs i.on{background:var(--p)}
.fc-proc{margin:18px 0 16px;padding:14px 16px;border-radius:14px;background:var(--lav2);border:1px solid var(--line)}
.fc-proc small{display:block;font-size:12px;color:var(--mut)}
.fc-name{font-size:20px;display:block;margin-top:3px;transition:opacity .3s}
.fc-name.sw{opacity:0}
.crit{list-style:none;display:grid;gap:10px}
.crit li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-weight:600;font-size:15px;transition:border-color .35s,background .35s}
.crit .cb{flex:none;width:24px;height:24px;border-radius:8px;border:2px solid #d9cdf3;display:grid;place-items:center;transition:.35s}
.crit .cb svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .35s .1s}
.crit li.y{border-color:#bfe8d3;background:#f6fcf9}.crit li.y .cb{background:var(--grn);border-color:var(--grn)}.crit li.y .cb svg{stroke-dashoffset:0}
.crit li.n{border-color:#f3c1c9;background:#fff7f8}.crit li.n .cb{background:var(--red);border-color:var(--red)}
.crit li.n .cb svg{display:none}.crit li.n .cb:after{content:"×";color:#fff;font-weight:800;font-size:16px;line-height:1}
.crit .ct{transition:opacity .25s}.crit .ct.sw{opacity:0}
.gauge{margin-top:20px}
.g-track{height:12px;border-radius:8px;background:var(--lav);overflow:hidden}
.g-fill{height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#4fd197,var(--grn));transition:width .55s var(--ease),background .4s}
.fitcard.bad .g-fill{background:linear-gradient(90deg,#ffb36b,var(--red))}
.g-lbl{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.verd{font-weight:800;font-size:15px;color:var(--grn);opacity:0;transform:translateY(6px);transition:.4s var(--ease)}
.fitcard.done .verd{opacity:1;transform:none}.fitcard.bad .verd{color:var(--red)}
.g-pct{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--mut)}
.bp-eagle{position:absolute;right:-50px;bottom:-60px;width:min(235px,40%);z-index:2;filter:drop-shadow(0 20px 28px rgba(50,20,110,.2));animation:bob 5.5s ease-in-out infinite;pointer-events:none}

/* when: sorter */
.wh-head{max-width:760px;margin-bottom:40px}
.sorter{display:grid;grid-template-columns:1fr 80px 1fr;gap:18px;align-items:stretch}
.sorter>*{min-width:0}
.bin{border-radius:22px;padding:24px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh)}
.bin.good{border-color:#bfe8d3;background:linear-gradient(180deg,#f4fbf7,#fff 50%)}
.bin.hard{border-color:#f6d8bb;background:linear-gradient(180deg,#fff8ef,#fff 50%)}
.bin-h{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.bin-ic{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-weight:800;font-size:18px}
.good .bin-ic{background:#e2f6ec;color:var(--grn)}.hard .bin-ic{background:var(--amb2);color:#c2570c}
.bin-h b{font-size:19px;display:block}.bin-h small{font-size:13px;color:var(--mut)}
.sort-chips{display:flex;flex-wrap:wrap;gap:9px}
.sort-chips span{padding:10px 14px;border-radius:12px;font-size:14px;font-weight:600;background:#fff;border:1px solid var(--line);opacity:0;transform:translateX(var(--from,40px)) scale(.9);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(.35s + var(--i)*.18s)}
.good .sort-chips span{--from:60px;border-color:#cfeede}
.hard .sort-chips span{--from:-60px;border-color:#f6d8bb;color:#8a3c05}
.sorter.vis .sort-chips span{opacity:1;transform:none}
.bin-note{font-size:14px;color:var(--mut);margin-top:16px;padding-top:14px;border-top:1px dashed #f0d2b3}
.chute{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.chute span{width:12px;height:12px;border-radius:50%;background:var(--p2);animation:chute 2.4s ease-in-out infinite}
.chute span:nth-child(2){animation-delay:.3s;background:var(--amb)}.chute span:nth-child(3){animation-delay:.6s}
@keyframes chute{0%,100%{transform:translateX(-22px);opacity:.3}50%{transform:translateX(22px);opacity:1}}

/* one process */
.one-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.one-in>*{min-width:0}
.narrow{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;align-items:center}
.narrow>*{min-width:0}
.tlist{background:#fff;border:1px dashed #d8cdea;border-radius:18px;padding:18px}
.tlist .mono{color:var(--mut)}
.tlist ul{list-style:none;margin-top:10px;display:grid;gap:6px}
.tlist li{font-size:13px;padding:7px 10px;border-radius:8px;background:var(--lav2);color:var(--mut);transition:opacity .5s,transform .5s,background .4s,color .4s}
.narrow.vis .tlist li:not(:nth-child(3)){opacity:.28;transform:translateX(-4px)}
.narrow.vis .tlist li:nth-child(3){background:var(--p);color:#fff;font-weight:700;transition-delay:.3s}
.narrow.vis .tlist li:nth-child(1){transition-delay:.15s}.narrow.vis .tlist li:nth-child(2){transition-delay:.25s}.narrow.vis .tlist li:nth-child(4){transition-delay:.35s}.narrow.vis .tlist li:nth-child(5){transition-delay:.45s}.narrow.vis .tlist li:nth-child(6){transition-delay:.55s}.narrow.vis .tlist li:nth-child(7){transition-delay:.65s}.narrow.vis .tlist li:nth-child(8){transition-delay:.75s}
.pcard{background:#fff;border:1px solid #cdb6fb;border-radius:20px;box-shadow:0 24px 50px rgba(90,40,200,.15);overflow:hidden;opacity:0;transform:translateX(-24px) scale(.96);transition:opacity .7s var(--ease) .8s,transform .7s var(--ease) .8s}
.narrow.vis .pcard{opacity:1;transform:none}
.pc-top{padding:16px 18px;background:linear-gradient(120deg,var(--p3),var(--p2));color:#fff}
.pc-top .mono{color:#e6dbff;display:block}.pc-top b{font-size:18px;display:block;margin-top:3px}
.pcard dl{padding:6px 18px}
.pcard dl>div{display:grid;grid-template-columns:78px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(8px);transition:.5s var(--ease);transition-delay:calc(1.2s + var(--i)*.15s)}
.narrow.vis .pcard dl>div,.narrow.vis .owner{opacity:1;transform:none}
.pcard dt{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--p3);padding-top:2px}
.pcard dd{font-size:14px;font-weight:600}
.owner{display:flex;gap:12px;align-items:center;margin:4px 18px 18px;padding:12px;border-radius:14px;background:var(--amb2);opacity:0;transform:translateY(8px);transition:.5s var(--ease) 1.9s}
.av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--amb);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center}
.owner b{font-size:14px;display:block}.owner small{font-size:12px;color:#8a5a1d}

/* agreement */
.ag-head{max-width:760px;margin-bottom:40px}
.ag-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.ag-grid>*{min-width:0}
.doc{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh);overflow:hidden}
.doc-top{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--lav2)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#e2d9f3}
.clauses{list-style:none;counter-reset:cl;padding:8px 20px 14px}
.clauses li{counter-increment:cl;position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:10px;padding:13px 10px;border-radius:12px;transition:background .4s}
.clauses li:before{content:counter(cl,decimal-leading-zero);grid-row:span 2;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--p);padding-top:3px}
.clauses li b{font-size:15px}.clauses li span{font-size:13px;color:var(--mut)}
.clauses li:after{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--p);transform:scaleY(0);transition:transform .4s var(--ease)}
.clauses li.act{background:var(--lav)}.clauses li.act:after{transform:scaleY(1)}
.ag-side{display:grid;gap:24px;align-content:start}
.dial-card,.exit{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--sh)}
.dial-card{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center}
.dial{width:150px;height:150px;transform:rotate(-90deg)}
.dial text{transform:rotate(90deg);transform-origin:100px 100px;text-anchor:middle;font-family:Inter,sans-serif}
.d-t1{font-size:17px;font-weight:800;fill:var(--ink)}.d-t2{font-size:14px;fill:var(--mut)}
.d-bg{fill:none;stroke:var(--lav);stroke-width:16}
.d-win{fill:none;stroke:var(--p);stroke-width:16;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.4s var(--ease) .3s}
.dial-card.vis .d-win{stroke-dasharray:38 100}
.ticks line{stroke:#cbbdea;stroke-width:1.5}
.nope{display:inline-block;font-weight:800;font-size:26px;color:#b7b1c9;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px}
.dial-card p{font-size:14px;color:var(--mut);margin:6px 0 8px}
.exit p{font-size:14px;color:var(--mut);margin-top:14px}
.ex-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.ex-n{padding:8px 13px;border-radius:10px;border:1px solid var(--line);font-weight:700;font-size:13px;background:var(--lav2)}
.ex-n.you{background:var(--p);border-color:var(--p);color:#fff}
.ex-or{font-size:12px;color:var(--mut)}
.ex-ln{position:relative;width:54px;height:2px;background:repeating-linear-gradient(90deg,var(--p2) 0 6px,transparent 6px 10px)}
.ex-ln i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--p);animation:exMove 2s linear infinite}
@keyframes exMove{to{left:calc(100% - 10px)}}

/* compare: router */
.cmp-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.cmp-in>*{min-width:0}
.muted-s{font-size:14px;color:var(--mut);margin-top:14px}
.router{display:grid;grid-template-columns:1fr 70px 1fr;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--sh)}
.router>*{min-width:0}
.r-tasks,.r-dest{display:grid;grid-template-rows:repeat(3,1fr);gap:12px}
.rt{text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--lav2);font-weight:700;font-size:15px;line-height:1.3;transition:.35s var(--ease)}
.rt small{display:block;font-size:11px;font-weight:600;color:var(--mut);margin-bottom:3px;font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.06em}
.rt:hover{border-color:#cdb6fb}
.rt.on{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 12px 26px rgba(23,22,52,.2)}.rt.on small{color:#bfa6ff}
.r-wires{width:100%;height:100%}
.r-wires path{fill:none;stroke:#e3daf5;stroke-width:2;vector-effect:non-scaling-stroke}
.r-wires .hot{stroke:var(--p);stroke-width:3;stroke-dasharray:6 6;animation:wireRun .8s linear infinite}
@keyframes wireRun{to{stroke-dashoffset:-12}}
.rd{display:block;padding:14px 16px;border-radius:14px;border:1px dashed #ddd3ef;opacity:.45;transition:.4s var(--ease)}
.rd small{display:block;font-size:11px;color:var(--mut);font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.06em}
.rd b{display:block;font-size:16px;margin:2px 0}.rd span{font-size:13px;color:var(--mut)}
.rd.on{opacity:1;border:1px solid #cdb6fb;background:var(--lav);transform:translateX(4px);box-shadow:0 10px 24px rgba(90,40,200,.12)}
a.rd.on span{color:var(--p3);font-weight:600}

/* faq */
.fq-head{text-align:center;margin:0 auto 36px;max-width:680px}
.fq-head .svh{margin-left:auto;margin-right:auto}
.fq-list{max-width:820px;margin:0 auto}
.qn{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--p);margin-right:14px;flex:none}
.qa button{justify-content:flex-start}.qa button .pm{margin-left:auto}
.judge{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-bottom:6px}
.judge span{padding:6px 11px;border-radius:20px;font-size:12.5px;font-weight:600;background:#fff;border:1px solid var(--line)}
.judge .hl{background:var(--amb2);border-color:#f6d8bb;color:#8a3c05}
.brief{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.brief span{padding:8px 13px;border-radius:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:13px;font-weight:600}

@media (max-width:1100px){
 .bp-hin{grid-template-columns:1fr;gap:40px}
 .fit-stage{max-width:620px}
 .one-in,.cmp-in{grid-template-columns:1fr;gap:40px}
 .ag-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
 .bp-hero{padding:34px 0 70px}
 .fit-stage{padding:0 0 150px}
 .bp-eagle{width:150px;right:-6px;bottom:-10px}
 .sorter{grid-template-columns:1fr}
 .chute{flex-direction:row;height:30px}
 @keyframes chute{0%,100%{transform:translateY(-8px);opacity:.3}50%{transform:translateY(8px);opacity:1}}
 .narrow{grid-template-columns:1fr}
 .dial-card{grid-template-columns:1fr;justify-items:start}
 .router{grid-template-columns:1fr;gap:10px;padding:14px}
 .r-wires{display:none}
 .r-tasks,.r-dest{grid-template-rows:none}
 .rd:not(.on){display:none}.rd.on{transform:none}
}
@media (prefers-reduced-motion:reduce){
 .blob,.bp-eagle,.chute span,.ex-ln i,.r-wires .hot{animation:none}
 .mark{animation:none;background-size:100% .34em}
}
.one-in p+p,.cmp-in p+p{margin-top:14px}