/* P15 CRM Automation — journey canvas / flow builder */
.page-crm 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{--ok:#1c9d61;--okb:#e6f7ee;--ex:#c2570c;--exb:#fff4e6;--red:#c8324f}
.dotbg{background-image:radial-gradient(rgba(127,66,244,.16) 1.2px,transparent 1.2px);background-size:22px 22px}

/* hero */
.cr-hero{position:relative;padding:56px 0 96px;background:radial-gradient(rgba(127,66,244,.14) 1.2px,transparent 1.2px) 0 0/22px 22px,radial-gradient(700px 480px at 78% 45%,#efe4ff,transparent 70%),#fff}
.cr-hin{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center}
.cr-hin>*{min-width:0}
.cr-h1{font-size:clamp(32px,3.6vw,52px);margin:18px 0 22px;max-width:660px}
.wire-t{position:relative;color:var(--p3);white-space:nowrap}
.wire-t:after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 C 40 0, 60 10, 100 5 S 160 0, 200 5' fill='none' stroke='%239c67ff' stroke-width='2.5'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;clip-path:inset(0 100% 0 0);animation:wireIn 1s var(--ease) 1.1s forwards}
@keyframes wireIn{to{clip-path:inset(0 0 0 0)}}
.cr-vis{position:relative;min-height:520px}
.cr-loop{position:absolute;right:-20px;top:30px;width:88%;max-width:560px;filter:drop-shadow(0 30px 40px rgba(90,40,200,.2));animation:floaty 8s ease-in-out infinite}
.tl{position:absolute;left:0;bottom:30px;width:min(300px,56%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 26px 56px rgba(60,30,130,.16);z-index:2}
.tl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tl-top b{font-size:15px}.tl-top em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--mut);border:1px solid var(--line);border-radius:10px;padding:2px 7px}
.ev{position:relative;display:flex;gap:12px;padding:8px 0 8px 2px;opacity:0;transform:translateY(8px);animation:evIn .45s var(--ease) forwards;animation-delay:calc(.9s + var(--k)*.35s)}
@keyframes evIn{to{opacity:1;transform:none}}
.ev i{flex:none;position:relative;width:12px;height:12px;margin-top:4px;border-radius:50%;background:var(--p);box-shadow:0 0 0 4px #efe7ff}
.ev:not(:last-child) i:after{content:"";position:absolute;left:5px;top:14px;width:2px;height:34px;background:#e3d8fb}
.ev b{display:block;font-size:13.5px}.ev small{font-size:11.5px;color:var(--mut)}
.ev.nx i{background:#fff;border:2px dashed var(--p);box-shadow:none;animation:pulse 2.4s infinite}
.ev.nx b{color:var(--p3)}
.consent{position:absolute;right:4%;bottom:0;display:flex;flex-direction:column;gap:8px;z-index:2}
.cs{padding:8px 13px;border-radius:12px;font-size:12.5px;font-weight:800;background:#fff;box-shadow:0 12px 26px rgba(60,30,130,.12);opacity:0;animation:evIn .5s var(--ease) 2.4s forwards}
.cs.ok{color:var(--ok);border:1px solid #bfe8d3}.cs.ok:before{content:"✓ "}
.cs.no{color:var(--red);border:1px solid #f4c7d0;animation-delay:2.7s}.cs.no:before{content:"⦸ "}

/* ease */
.ez-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.ez-in>*{min-width:0}
.q3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.q3c{padding:20px 18px;border-radius:18px;background:var(--lav2);border:1px solid var(--line)}
.q3c span{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,var(--p),var(--p3));-webkit-background-clip:text;background-clip:text;color:transparent}
.q3c b{font-size:15px}
.dup{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:18px;border-radius:18px;border:1px dashed #f4c7d0;background:#fff8f9}
.dup p{font-size:14.5px;color:var(--mut)}
.dup-cards{position:relative;width:196px;height:106px}
.dc{position:absolute;left:0;width:170px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:700;box-shadow:0 8px 18px rgba(60,30,130,.08)}
.dc small{display:block;font-size:11px;color:var(--mut);font-weight:500}
.d1{top:0}.d2{top:50px;left:24px;border-color:#f4c7d0;color:var(--red)}
.dup.vis .d2{animation:dupJit 3s ease-in-out infinite}
@keyframes dupJit{0%,70%,100%{transform:none}74%{transform:translate(-3px,1px)}78%{transform:translate(3px,-1px)}82%{transform:translate(-2px,0)}86%{transform:none}}

/* lifecycle canvas */
.lf-head{max-width:720px;margin-bottom:26px}
.flowimg{margin:0 auto 28px;max-width:900px}
.flowimg img{width:100%;height:auto;display:block}
.canvas{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 34px;padding:30px;border-radius:24px;background:radial-gradient(rgba(127,66,244,.16) 1.2px,transparent 1.2px) 0 0/22px 22px,#fff;border:1px solid var(--line)}
.wn{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 18px 18px;box-shadow:0 12px 26px rgba(60,30,130,.08);opacity:0;transform:scale(.94);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .3s,box-shadow .3s;transition-delay:calc(var(--i)*.1s)}
.canvas.vis .wn{opacity:1;transform:none}
.wn:hover{border-color:var(--p);box-shadow:0 18px 36px rgba(90,40,200,.16)}
.wn-h{position:relative;margin:0 -18px 14px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--lav2);border-radius:16px 16px 0 0}
.wn-port{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;border:2px solid var(--p)}
.wn-port.pl{left:-7px}.wn-port.pr{right:-7px;background:var(--p)}
.wn:not(:nth-child(3n)) .wn-h:after{content:"";position:absolute;top:50%;right:-42px;width:34px;height:2px;background:repeating-linear-gradient(90deg,var(--p2) 0 5px,transparent 5px 9px);background-size:18px 2px;animation:wireFlow 1s linear infinite}
@keyframes wireFlow{to{background-position:18px 0}}
.wn h3{font-size:17px;margin-bottom:6px}.wn p{font-size:14px;color:var(--mut)}

/* rules */
.rl-in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.rl-in>*{min-width:0}
.law{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;margin-top:26px;padding:16px 18px 16px 0;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden}
.law img{width:150px;height:auto;display:block;margin-bottom:-16px;align-self:end}
.law p{font-size:14.5px;font-weight:600}
.spec{background:var(--ink);color:#fff;border-radius:24px;padding:24px;box-shadow:0 30px 60px rgba(20,16,50,.25)}
.sp-top{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.sp-top .mono{color:#c9b3ff}.sp-top b{font-size:20px}
.sp-f{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
.sp-f span{color:#a9a3cc;font-size:12.5px;font-weight:600}
.pre{margin-top:16px;padding:14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.pre .mono{color:#c9b3ff;display:block;margin-bottom:6px}
.pc{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px;color:#cfcae3;transition:color .3s;transition-delay:calc(.5s + var(--k)*.45s)}
.pc i{flex:none;position:relative;width:18px;height:18px;border-radius:5px;border:2px solid #5b5485;transition:.3s;transition-delay:inherit}
.pc i:after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s;transition-delay:inherit}
.spec.vis .pc{color:#fff}
.spec.vis .pc i{background:#4fd197;border-color:#4fd197}
.spec.vis .pc i:after{transform:rotate(45deg) scale(1)}
.act-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.act-row small{font-size:12px;color:#a9a3cc}
.actv{padding:11px 18px;border-radius:12px;font-weight:800;font-size:14px;background:#3a3462;color:#8f89b2;transition:.5s var(--ease) 2.5s}
.spec.vis .actv{background:var(--p);color:#fff;box-shadow:0 10px 24px rgba(127,66,244,.45)}

/* test runner */
.cr-test{background:linear-gradient(180deg,#fff,var(--lav2))}
.ts-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.ts-in>*{min-width:0}
.ts-strong{font-weight:700;margin-top:14px}
.runner{background:#0f0d24;color:#e8e4f7;border-radius:20px;padding:0 0 10px;box-shadow:0 30px 60px rgba(20,16,50,.25);overflow:hidden;font-size:13.5px}
.rn-top{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#1a1638;border-bottom:1px solid rgba(255,255,255,.08)}
.rn-top .mono{color:#a9a3cc}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#ff6b86}.dots i:nth-child(2){background:#f5c451}.dots i:nth-child(3){background:#4fd197}
.rn-st{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:#f5c451}
.runner.done .rn-st{color:#4fd197}
.tr{display:grid;grid-template-columns:1fr 1.25fr 96px;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.tr.th{font-family:"JetBrains Mono",monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#8f89b2}
.tr-c{font-weight:700}.tr-r{color:#b5afd3}
.tr-s{justify-self:start;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;padding:4px 8px;border-radius:8px;background:#2a2550;color:#6e6896;transition:.35s;transition-delay:calc(.4s + var(--k)*.5s)}
.tr-s:before{content:"● ";}
.runner.vis .tr-s{background:rgba(79,209,151,.14);color:#6fe0ae}
.runner.vis .tr:nth-child(4) .tr-s{background:rgba(255,107,134,.14);color:#ff8ea3}
.runner.vis .tr:nth-child(5) .tr-s{background:rgba(245,196,81,.14);color:#f5c451}
.tr:not(.th){opacity:.45;transition:opacity .35s;transition-delay:calc(.4s + var(--k)*.5s)}
.runner.vis .tr{opacity:1}

/* reporting */
.rp-head{max-width:820px;margin-bottom:30px}
.rp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px}
.rp-grid>*{min-width:0}
.track3,.holdout{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--sh)}
.t3{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px}
.t3 span{padding:12px 16px;border-radius:12px;background:var(--lav2);border:1px solid var(--line);font-weight:700;font-size:15px}
.t3 span:last-child{background:var(--p);border-color:var(--p);color:#fff}
.t3 i{font-style:normal;font-weight:800;color:var(--p);padding-left:18px}
.ho-row{display:grid;grid-template-columns:170px 1fr;gap:14px;align-items:center;margin-top:18px;font-size:14px;font-weight:600}
.ho-bar{height:18px;border-radius:9px;background:#f1ecf9;overflow:hidden}
.ho-bar i{display:block;height:100%;width:0;border-radius:9px;transition:width 1.4s var(--ease) .3s}
.hb1{background:linear-gradient(90deg,var(--p2),var(--p))}.hb2{background:#b9b2cf}
.holdout.vis .hb1{width:68%}.holdout.vis .hb2{width:52%}
.ho-diff{margin:14px 0 0 184px;position:relative}
.ho-diff span{display:inline-block;font-size:12.5px;font-weight:800;color:var(--p3);background:var(--lav);padding:6px 10px;border-radius:10px;opacity:0;transition:opacity .5s 1.6s}
.holdout.vis .ho-diff span{opacity:1}
.holdout small{display:block;margin-top:14px;font-size:12px;color:var(--mut)}

/* AI band */
.ai-band{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;padding:40px;border-radius:26px;background:linear-gradient(135deg,#1b1640,#2d2270);color:#fff}
.ai-band>*{min-width:0}
.ai-band .eb{color:#c9b3ff}.ai-band .svh{color:#fff}
.ai-use{display:flex;flex-wrap:wrap;gap:8px}
.ai-use span{padding:8px 13px;border-radius:30px;border:1px solid rgba(201,179,255,.4);font-size:13px;font-weight:700;color:#e6dcff}
.ai-r p{color:#c4bfdc;margin-top:14px;font-size:15px}
.txt-link{display:inline-flex;gap:8px;margin-top:14px;font-weight:700;color:var(--p3)}
.ai-band .txt-link{color:#c9b3ff}
.txt-link span{transition:transform .3s var(--ease)}.txt-link:hover span{transform:translateX(5px)}

/* faq */
.cfq-head{max-width:700px;margin-bottom:30px}
.cfq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
.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}

@media (max-width:1100px){
 .cr-hin{grid-template-columns:1fr}
 .cr-vis{max-width:640px}
 .ez-in,.rl-in,.ts-in,.rp-grid,.ai-band{grid-template-columns:1fr;gap:30px}
 .canvas{grid-template-columns:1fr 1fr}
 .wn:not(:nth-child(3n)) .wn-h:after{display:none}
 .wn:nth-child(odd) .wn-h:after{display:block}
}
@media (max-width:700px){
 .cr-hero{padding:34px 0 64px}
 .cr-vis{min-height:0;padding-top:250px}
 .cr-loop{top:0;right:0;width:100%}
 .tl{position:relative;width:100%;bottom:0}
 .consent{position:relative;right:auto;flex-direction:row;flex-wrap:wrap;margin-top:12px}
 .q3{grid-template-columns:1fr}
 .dup{grid-template-columns:1fr}
 .canvas{grid-template-columns:1fr;padding:18px}
 .wn .wn-h:after{display:none!important}
 .law{grid-template-columns:100px 1fr}.law img{width:100px}
 .sp-f{grid-template-columns:1fr;gap:2px}
 .tr{grid-template-columns:1fr 84px;gap:4px 10px}
 .tr-r{grid-column:1;grid-row:2;font-size:12.5px}
 .tr-s{grid-column:2;grid-row:1/3;align-self:center}
 .tr.th .tr-r,.tr.th span:nth-child(2){display:none}
 .ho-row{grid-template-columns:1fr;gap:6px}
 .ho-diff{margin-left:0}
 .ai-band{padding:26px}
 .cfq-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 .cr-loop,.ev.nx i,.dup.vis .d2,.wn .wn-h:after{animation:none}
 .ev,.cs{animation:none;opacity:1;transform:none}
 .wire-t:after{animation:none;clip-path:none}
}