/* R10 Ecommerce CRM retention guide — flow specs, stop rules, test cases */
.page-crr main>section{overflow-x:clip}
.page-crr{--ok:#1c9d61;--okb:#e6f7ee;--ex:#c2570c;--exb:#fff4e6;--no:#c8324f;--nob:#fdecef}
.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:18px}
.crumbs a:hover{color:var(--p3)}.crumbs b{color:var(--p3);font-weight:600}
.rt-hd{max-width:820px;margin-bottom:34px}
.rt-hd .lead,.rt-2 .lead{margin-top:16px;max-width:none}
.rt-2{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}.rt-2.top{align-items:start}
.rt-2>*{min-width:0}
.rt-2>div>p:not(.lead){margin-top:16px;font-size:16.5px}

/* hero */
.rt-hero{position:relative;padding:56px 0 84px;background:radial-gradient(900px 500px at 85% 30%,#efe7ff 0,transparent 60%),linear-gradient(180deg,#faf8ff,#fff)}
.rt-hin{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.rt-hin>*{min-width:0}
.rt-tag{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:var(--p3);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.rt-tag i{width:11px;height:14px;border:2px solid var(--p);border-radius:2px;position:relative}
.rt-tag i:after{content:"";position:absolute;left:1px;right:1px;top:3px;height:2px;background:var(--p);box-shadow:0 3px 0 var(--p)}
.rt-h1{font-size:clamp(32px,3.35vw,48px)}
.rt-h1 .gr{background:linear-gradient(90deg,var(--p3),var(--p) 50%,var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rt-sa{background:#fff;border:1px solid var(--line);border-left:4px solid var(--p);border-radius:14px;padding:18px 22px;max-width:600px;box-shadow:var(--sh)}
.rt-sa p{margin:8px 0 0;line-height:1.65;font-size:15.5px}
.rt-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.rt-vis{position:relative;height:540px}
.rt-tl{position:absolute;left:0;top:10px;width:70%;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 60px rgba(23,22,52,.13);padding:18px 18px 8px;z-index:2}
.rt-tlh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rt-live{font-size:11.5px;font-weight:700;color:var(--p3);background:var(--lav);border-radius:999px;padding:4px 10px}
.rt-ev{position:relative;display:flex;align-items:center;gap:14px;padding:12px 4px 12px 0;opacity:0;transform:translateY(8px);animation:rtIn .5s var(--ease) forwards;animation-delay:calc(.7s + var(--k)*.55s)}
.rt-ev+.rt-ev:before{content:"";position:absolute;left:8px;top:-12px;height:24px;width:2px;background:#e1d6f8}
.rt-dot{flex:none;width:18px;height:18px;border-radius:50%;border:3px solid var(--p);background:#fff;position:relative;z-index:1}
.rt-ev b{display:block;font-size:14.5px;line-height:1.3}
.rt-ev small{display:block;font-size:12px;color:var(--mut)}
.rt-ev>div{flex:1;min-width:0}
.rt-msg{border-radius:12px}
.rt-msg .rt-dot{border-color:var(--p2);border-style:dashed}
.rt-msg>div{position:relative}
.rt-msg>div:after{content:"";position:absolute;left:0;top:10px;height:2px;width:100%;background:var(--no);transform:scaleX(0);transform-origin:left;animation:rtStrike .45s var(--ease) 2.9s forwards}
.rt-x{flex:none;font-style:normal;font:700 11px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--no);border:2px solid var(--no);border-radius:6px;padding:3px 7px;transform:rotate(-6deg) scale(1.8);opacity:0;animation:rtStamp .45s cubic-bezier(.2,1.6,.4,1) 3.1s forwards}
.rt-buy .rt-dot{border-color:var(--ok);background:var(--ok)}
.rt-buy b{color:var(--ok)}
.rt-stop{background:var(--lav2);border:1px solid #e1d6f8;border-radius:12px;padding:12px;margin:4px 0 10px}
.rt-stop:before{display:none}
.rt-stop .rt-dot{background:var(--p);border-color:var(--p)}
.rt-stop .rt-dot:after{content:"";position:absolute;inset:3px;background:#fff;border-radius:2px}
.rt-spec{position:absolute;left:8%;bottom:26px;z-index:3;width:260px;background:var(--ink);color:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 26px 50px rgba(23,22,52,.3);opacity:0;animation:rtIn .6s var(--ease) 3.4s forwards}
.rt-spec .mono{color:#c9b8ff}
.rt-spec ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:10px}
.rt-spec li{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;opacity:.35;animation:rtOn .35s ease forwards;animation-delay:calc(3.8s + var(--k)*.18s)}
.rt-spec li:before{content:"✓";flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--p2);font-size:10px;color:#fff}
.rt-eagle{position:absolute;right:-24px;bottom:-10px;width:300px;height:auto;z-index:1;filter:drop-shadow(0 18px 26px rgba(23,22,52,.2));animation:floaty 7s ease-in-out infinite}
@keyframes rtIn{to{opacity:1;transform:none}}
@keyframes rtStrike{to{transform:scaleX(1)}}
@keyframes rtStamp{to{opacity:1;transform:rotate(-6deg) scale(1)}}
@keyframes rtOn{to{opacity:1}}

/* events table */
.rt-evt{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);overflow-x:auto}
.rt-evt table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.rt-evt th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);padding:14px 16px;border-bottom:1px solid var(--line);background:var(--lav2)}
.rt-evt td{padding:13px 16px;border-bottom:1px dashed var(--line);vertical-align:top;color:var(--mut);line-height:1.45}
.rt-evt tr:last-child td{border-bottom:0}
.rt-evt td b{color:var(--ink)}
.rt-evt td:last-child{color:var(--ex);font-weight:600}

/* flow specs */
.rt-sw{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start}
.rt-tabs{display:flex;flex-direction:column;gap:8px;position:sticky;top:110px}
.rt-tb{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:15px;transition:border-color .25s,background .25s,transform .3s var(--ease),box-shadow .3s}
.rt-tb:hover{border-color:#cdb6fb}
.rt-tbn{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--lav);color:var(--p3);font:700 12px "JetBrains Mono",monospace}
.rt-tb.on{border-color:var(--p);background:#fff;box-shadow:0 10px 24px rgba(127,66,244,.14);transform:translateX(6px)}
.rt-tb.on .rt-tbn{background:var(--p);color:#fff}
.rt-pn{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh);padding:26px}
.rt-pn[hidden]{display:none}
.rt-pn.on{animation:rtPane .4s var(--ease)}
@keyframes rtPane{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rt-ph{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.rt-ph h3{font-size:26px;margin:6px 0 8px}
.rt-ph p{font-size:15.5px}
.rt-cpy{flex:none;font-size:13.5px;font-weight:700;color:var(--p3);border:1.5px solid #cdb6fb;border-radius:10px;padding:9px 14px;transition:background .2s}
.rt-cpy:hover{background:var(--lav)}
.rt-cpy.done{color:var(--ok);border-color:#bfe8d3;background:var(--okb)}
.rt-dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rt-dl>div{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--lav2)}
.rt-dl dt{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--p3);margin-bottom:5px}
.rt-dl dd{font-size:14.5px;line-height:1.5;color:var(--ink)}
.rt-dl .ex{background:var(--exb);border-color:#f0c592}.rt-dl .ex dt{color:var(--ex)}
.rt-dl .st{background:var(--nob);border-color:#f3c0ca}.rt-dl .st dt{color:var(--no)}
.rt-dl .ow{background:#f4efff;border-color:#d9c8fb}
.rt-dl .oc{background:var(--okb);border-color:#bfe8d3}.rt-dl .oc dt{color:var(--ok)}
.rt-note{margin-top:22px;font-size:14.5px;padding:14px 18px;border-radius:14px;border:1px dashed #d8cdea;background:#fff;max-width:980px}

/* simulator */
.rt-simw{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:stretch}
.rt-simw>*{min-width:0}
.rt-prof{background:var(--ink);color:#fff;border-radius:22px;padding:24px;display:flex;flex-direction:column}
.rt-prof .mono{color:#c9b8ff}
.rt-pname{display:block;font-size:20px;margin:4px 0 16px;letter-spacing:-.02em}
.rt-tg{display:flex;flex-direction:column;gap:8px}
.rt-tg label{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);cursor:pointer;font-size:14.5px;font-weight:600;transition:background .2s}
.rt-tg label:hover{background:rgba(255,255,255,.1)}
.rt-tg input{appearance:none;-webkit-appearance:none;flex:none;width:38px;height:22px;border-radius:22px;background:#4a4575;position:relative;cursor:pointer;transition:background .25s}
.rt-tg input:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}
.rt-tg input:checked{background:var(--p2)}
.rt-tg input:checked:after{transform:translateX(16px)}
.rt-tg input:focus-visible{outline:3px solid #c9b8ff;outline-offset:2px}
.rt-reset{align-self:flex-start;margin-top:14px;font-size:13.5px;font-weight:700;color:#c9b8ff;text-decoration:underline;text-underline-offset:3px}
.rt-run{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh);padding:20px;display:flex;flex-direction:column;gap:10px}
.rt-step{display:grid;grid-template-columns:86px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px;border-radius:16px;border:1.5px solid var(--line);transition:background .3s,border-color .3s}
.rt-when{color:var(--mut)}
.rt-sb b{display:block;font-size:15.5px}
.rt-why{display:block;font-size:13px;color:var(--mut);margin-top:2px}
.rt-res{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap}
.rt-step.is-send{border-color:#bfe8d3;background:var(--okb)}
.rt-step.is-send .rt-res{background:var(--ok);color:#fff}
.rt-step.is-skip{border-color:#f3c0ca;background:var(--nob)}
.rt-step.is-skip .rt-res{background:#fff;color:var(--no);border:1px solid #f3c0ca}
.rt-step.is-skip .rt-sb b{text-decoration:line-through;text-decoration-color:rgba(200,50,79,.55)}
.rt-step.is-exit{border-style:dashed;background:#faf9fc;opacity:.75}
.rt-step.is-exit .rt-res{background:var(--lav);color:var(--p3)}
.rt-step.flash{animation:rtFlash .5s var(--ease)}
@keyframes rtFlash{50%{transform:scale(1.015)}}
.rt-sum{margin-top:auto;padding:14px 16px;border-radius:14px;background:var(--lav2);border:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--ink)}

/* tests */
.rt-tbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.rt-cnt{font-size:14px;font-weight:600;color:var(--mut);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.rt-cnt b{color:var(--ok);font-size:15px}
.rt-cnt.fail b{color:var(--no)}.rt-cnt.nt b{color:var(--p3)}
.rt-filt{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.rt-filt button{font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;transition:.2s}
.rt-filt button:hover{border-color:#cdb6fb}
.rt-filt button.on{background:var(--p);border-color:var(--p);color:#fff}
.rt-tw{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);overflow-x:auto}
.rt-tt{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px}
.rt-tt th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);padding:14px 16px;border-bottom:1px solid var(--line);background:var(--lav2)}
.rt-tt td{padding:14px 16px;border-bottom:1px dashed var(--line);vertical-align:middle;color:var(--mut);line-height:1.45}
.rt-tt td b{color:var(--ink)}
.rt-tt tr:last-child td{border-bottom:0}
.rt-tt tr.gone{display:none}
.rt-tt tr{transition:background .25s}
.rt-tt tr.p{background:#f3fbf7}.rt-tt tr.f{background:#fdf5f7}
.rt-tt td.mono{color:var(--p3);font-size:12px}
.rt-rc{white-space:nowrap}
.rt-rb{font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:8px;border:1.5px solid var(--line);background:#fff;color:var(--mut);margin-right:4px;transition:.2s}
.rt-rb:hover{border-color:#cdb6fb}
.rt-rb[aria-pressed=true].ps{background:var(--ok);border-color:var(--ok);color:#fff}
.rt-rb[aria-pressed=true].fl{background:var(--no);border-color:var(--no);color:#fff}

/* measurement */
.rt-ml{list-style:none;margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rt-ml li{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:14px;color:var(--mut);line-height:1.45}
.rt-ml b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}
.rt-att{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh);padding:26px}
.rt-grp{margin-top:18px}
.rt-grp small{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.rt-bar{display:flex;height:34px;border-radius:10px;background:var(--lav2);border:1px solid var(--line);overflow:hidden}
.rt-bar i{display:block;height:100%;width:0;transition:width 1.2s var(--ease) .3s}
.rt-bar .base{background:repeating-linear-gradient(135deg,#d9cdf5 0 8px,#cfc0f1 8px 16px)}
.rt-bar .lift{background:linear-gradient(90deg,var(--p),var(--p2));transition-delay:.7s}
.rt-att.vis .rt-bar .base{width:56%}
.rt-att.vis .rt-bar .lift{width:14%}
.rt-key{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-size:13px;font-weight:600;color:var(--mut)}
.rt-key span{display:inline-flex;align-items:center;gap:8px}
.rt-key i{width:14px;height:14px;border-radius:4px}
.rt-key .base{background:repeating-linear-gradient(135deg,#d9cdf5 0 4px,#cfc0f1 4px 8px)}
.rt-key .lift{background:var(--p)}
.rt-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.rt-cmp>div{padding:14px;border-radius:14px;border:1px solid var(--line)}
.rt-cmp>div:first-child{background:var(--exb);border-color:#f0c592}
.rt-cmp>div:last-child{background:var(--okb);border-color:#bfe8d3}
.rt-cmp b{font-size:15px}.rt-cmp p{font-size:13.5px;margin-top:4px}

/* launch */
.rt-sticky{position:sticky;top:110px}
.rt-ls{list-style:none;display:flex;flex-direction:column;gap:10px}
.rt-ls li{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),border-color .3s}
.rt-ls li:hover{border-color:#cdb6fb}
.rt-ls li>span{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(140deg,#caa6ff,#7f42f4);color:#fff;font:700 12.5px "JetBrains Mono",monospace}
.rt-ls b{display:block;font-size:16px;margin-bottom:3px}
.rt-ls p{font-size:14.5px}

/* keep reading */
.rt-nx{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.nx{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;transition:transform .3s,box-shadow .3s,opacity .9s var(--ease) var(--d,0s)}
.nx:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.nx h3{font-size:18px;margin:8px 0 12px}
.nxa{color:var(--p3);font-weight:700;font-size:14px}
.nx.dk{background:var(--ink);color:#fff;border-color:var(--ink)}
.nx.dk .mono,.nx.dk .nxa{color:#c9b8ff}

@media (max-width:1100px){
 .rt-nx{grid-template-columns:1fr 1fr}
 .rt-sw{grid-template-columns:1fr}
 .rt-tabs{position:static;flex-direction:row;flex-wrap:wrap}
 .rt-tb{flex:1 1 180px}
 .rt-tb.on{transform:none}
}
@media (max-width:1000px){
 .rt-hin,.rt-2,.rt-simw{grid-template-columns:1fr;gap:34px}
 .rt-sticky{position:static}
 .rt-vis{max-width:620px;width:100%}
}
@media (max-width:600px){
 .rt-hero{padding:30px 0 56px}
 .rt-h1{font-size:clamp(28px,8vw,36px)}
 .rt-vis{height:auto;padding-bottom:190px}
 .rt-tl{position:relative;width:100%;top:0}
 .rt-spec{left:0;bottom:10px;width:220px}
 .rt-eagle{width:190px;right:-18px;bottom:-14px}
 .rt-dl,.rt-ml,.rt-cmp,.rt-nx{grid-template-columns:1fr}
 .rt-ph{flex-direction:column}
 .rt-tb{flex:1 1 100%}
 .rt-step{grid-template-columns:1fr auto;gap:6px 12px}
 .rt-when{grid-column:1/-1}
 .rt-filt{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
 .rt-ev,.rt-spec,.rt-spec li,.rt-x{animation:none;opacity:1;transform:none}
 .rt-x{transform:rotate(-6deg)}
 .rt-msg>div:after{animation:none;transform:scaleX(1)}
 .rt-eagle{animation:none}
 .rt-bar i{transition:none}
}