/* p8 - "The race": THE EXISTING WORKFLOW (ten named tool windows, a 40-minute bar of ten proportional segments, the clock counts
   to 40 MIN) against DEALCLOSER (six steps light fast beside a 4-minute bar, 4 MIN); the left pane shatters and the 2x card slams in. Fixed design stage (760x650 wide,
   360x330 phone, stacked) scaled by p8.js. Focus-stage glass: near-solid, blue hairline. */
.p8r{position:absolute;inset:0;overflow:hidden}
.p8r .stg{position:absolute;left:0;top:0;width:760px;height:650px;transform-origin:0 0}
.p8r.ptr .stg{width:360px;height:330px}
.p8r .idl{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 45%;transform-origin:50% 45%}

/* the two panes */
.p8r .pane{position:absolute;padding:0;border-radius:6px;overflow:hidden;background:rgba(8,10,14,.88);border:1px solid rgba(47,107,255,.42);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.p8r .pane .gl{position:absolute;top:-30%;bottom:-30%;left:0;width:22%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.07),rgba(255,255,255,0));transform:translateX(-300%) skewX(-16deg)}
.p8r .pane .hd{position:absolute;left:16px;top:18px;font-size:14px;letter-spacing:.26em;color:#f5f7f7}
.p8r .pr .hd{color:#5A8CFF}
.p8r .clk{position:absolute;left:14px;right:14px;top:50px;height:100px}
.p8r .dial{position:absolute;left:0;top:4px;width:92px;height:92px;overflow:visible}
.p8r .dial .trk{fill:none;stroke:rgba(225,229,229,.13);stroke-width:5}
.p8r .dial .tks line{stroke:rgba(225,229,229,.45);stroke-width:2}
.p8r .dial .arc{fill:none;stroke:#e6eaea;stroke-width:5;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;filter:drop-shadow(0 0 4px rgba(255,255,255,.5))}
.p8r .dial .hand{stroke:#f5f7f7;stroke-width:3;stroke-linecap:round}
.p8r .dial .cap{fill:#f5f7f7}
.p8r .dial.dr .arc{stroke:#2F6BFF;filter:drop-shadow(0 0 5px rgba(90,140,255,.9))}
.p8r .dial.dr .hand,.p8r .dial.dr .cap{stroke:#5A8CFF;fill:#5A8CFF}
.p8r .clk .cn{position:absolute;left:108px;top:50%;margin-top:-24px;font-size:40px;line-height:48px;white-space:nowrap;transform-origin:0 50%}
.p8r .pr .clk .cn{font-size:34px;filter:drop-shadow(0 0 16px rgba(90,140,255,.55))}

/* LEFT: the tool windows */
.p8r .tws{position:absolute;inset:0;perspective:900px;perspective-origin:50% 40%}
.p8r .tw{position:absolute;border-radius:4px;overflow:hidden;background:linear-gradient(180deg,#15181d,#0d0f13);
  border:1px solid rgba(225,229,229,.34);box-shadow:0 10px 26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.p8r .tw .tb{height:16px;display:flex;align-items:center;gap:4px;padding:0 7px;background:linear-gradient(180deg,#3a3f44,#1d2024);border-bottom:1px solid rgba(225,229,229,.2)}
.p8r .tw .tb i{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#f5f7f7,#7d8286)}
.p8r .tw .nm{display:block;margin:9px 8px 0;font-family:var(--tech);font-weight:600;font-size:12px;letter-spacing:.03em;color:#f5f7f7;white-space:nowrap;line-height:1.2}
.p8r .tw .sk{display:none}
.p8r .tw.wk{border-color:rgba(245,247,247,.85);box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 0 1px rgba(245,247,247,.35),inset 0 1px 0 rgba(255,255,255,.2)}
/* the minute bars: ten segments in proportion to the founder's per-tool times (left); a tenth of that length for DealCloser (right) */
.p8r .tl{position:absolute;left:14px;right:14px;top:162px;height:16px;display:flex;gap:2px}
.p8r .tl .sg{position:relative;flex:1 1 0;min-width:0;display:block;overflow:hidden;border-radius:2px;border:1px solid rgba(225,229,229,.34);background:rgba(225,229,229,.1)}
.p8r .tl .sf{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#9aa0a4,#f5f7f7)}
.p8r .tl.tr .b4{flex:0 0 10%;border-color:rgba(90,140,255,.8)}
.p8r .tl.tr .b4 .sf{background:linear-gradient(90deg,#2F6BFF,#9cbaff);box-shadow:0 0 10px rgba(90,140,255,.9)}
.p8r .tl.tr .gh{flex:1 1 0;background:none;border:1px dashed rgba(225,229,229,.2)}
.p8r .tw .pg{position:absolute;left:8px;right:8px;bottom:10px;height:5px;border-radius:3px;background:rgba(225,229,229,.12);overflow:hidden}
.p8r .tw .pg i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#9aa0a4,#f5f7f7)}
.p8r .tw .fl{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 1px #fff,inset 0 0 22px rgba(255,255,255,.45)}
.p8r .tw.dn .nm{color:rgba(225,229,229,.62)}

/* the cracks and the shards */
.p8r .crk{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;visibility:hidden;filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
.p8r .crk line{stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.p8r .shs{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d}
.p8r .sh{position:absolute;inset:0;visibility:hidden;will-change:transform}
.p8r .sh .pane{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,12,16,.97);box-shadow:none}
.p8r .sh .shn{position:absolute;inset:0;opacity:0;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 60%)}

/* RIGHT: the six steps */
.p8r .sts{position:absolute;left:14px;right:14px;top:194px;height:376px;display:flex;flex-direction:column;gap:10px;perspective:900px}
.p8r .st{position:relative;flex:1;display:flex;align-items:center;gap:16px;padding:0 16px;border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.035);border:1px solid rgba(225,229,229,.16)}
.p8r .st.lit{border-color:rgba(90,140,255,.75);background:rgba(47,107,255,.09)}
.p8r .st .nd{position:relative;flex:none;width:22px;height:22px;border-radius:50%;border:2px solid rgba(225,229,229,.5)}
.p8r .st .on{position:absolute;inset:-2px;border-radius:50%;opacity:0;background:radial-gradient(circle at 35% 30%,#9cbaff,#2F6BFF 60%);box-shadow:0 0 16px rgba(90,140,255,.95)}
.p8r .st .nm{font-family:var(--tech);font-weight:600;font-size:20px;letter-spacing:.14em;color:#fff;opacity:.4}
.p8r .st .ck{position:absolute;right:14px;top:50%;width:24px;height:24px;margin-top:-12px;overflow:visible}
.p8r .st .ck path{fill:none;stroke:#5A8CFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.p8r .st .ln{position:absolute;left:0;right:0;bottom:0;height:2px;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#2F6BFF,#9cbaff);box-shadow:0 0 10px rgba(90,140,255,.9)}
.p8r .pr .rf{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(80% 50% at 55% 18%,rgba(90,140,255,.55),rgba(47,107,255,0) 70%)}
.p8r .bu{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(90,140,255,.6) 0%,rgba(47,107,255,.26) 32%,rgba(47,107,255,0) 66%)}
.p8r .rg{position:absolute;width:160px;height:160px;border-radius:50%;pointer-events:none;opacity:0;border:2px solid rgba(140,175,255,.95);box-shadow:0 0 24px rgba(90,140,255,.8)}

/* the 2x card, its shockwave and the flash */
.p8r .fls{position:absolute;inset:-10%;pointer-events:none;opacity:0;
  background:radial-gradient(55% 45% at 50% 62%,rgba(255,255,255,.75),rgba(90,140,255,.35) 45%,rgba(47,107,255,0) 75%)}
.p8r.ptr .fls{background:radial-gradient(60% 40% at 50% 76%,rgba(255,255,255,.75),rgba(90,140,255,.35) 45%,rgba(47,107,255,0) 75%)}
.p8r .sw{position:absolute;width:220px;height:220px;border-radius:50%;pointer-events:none;opacity:0;border:3px solid rgba(225,235,255,.95);
  box-shadow:0 0 30px rgba(90,140,255,.9),inset 0 0 26px rgba(90,140,255,.6)}
.p8r .hx{position:absolute;padding:0;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:rgba(8,10,14,.92);border:1px solid rgba(90,140,255,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0}
.p8r .hx .num{font-size:130px;line-height:.95;filter:drop-shadow(0 0 24px rgba(90,140,255,.45))}
.p8r .hx .lbs{position:relative;height:52px;width:100%;margin-top:14px;padding:0 16px;font-size:18px;display:flex;flex-direction:column;gap:6px}
.p8r .hx .lbs .lab{display:block;color:#f5f7f7;font-size:inherit;letter-spacing:.2em;padding-left:.2em;white-space:normal;line-height:1.4;opacity:0}
.p8r .hx .lbs .condition{font-family:var(--body);font-size:.6em;font-weight:400;text-transform:none;letter-spacing:.01em;padding-left:0}

/* phone: stacked, larger type relative to the stage */
.p8r.ptr .pane .hd{left:12px;top:10px;font-size:12px;letter-spacing:.2em}
.p8r.ptr .clk{left:12px;right:12px;top:24px;height:34px}
.p8r.ptr .tl{left:12px;right:12px;top:62px;height:9px}
.p8r.ptr .dial{left:auto;right:0;top:-18px;width:44px;height:44px}
.p8r.ptr .clk .cn{left:0;margin-top:-17px;font-size:30px;line-height:34px}
.p8r.ptr .pr .clk .cn{font-size:28px}
.p8r.ptr .tw .tb{display:none}
.p8r.ptr .tw .nm{margin:0;padding:0 8px;font-size:11px;line-height:16px;letter-spacing:.02em}
.p8r.ptr .tw .pg{left:0;right:0;bottom:0;height:2px;border-radius:0}
.p8r.ptr .sts{left:12px;right:12px;top:78px;height:48px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:4px}
.p8r.ptr .st{gap:6px;padding:0 6px}
.p8r.ptr .st .nd{width:10px;height:10px;border-width:1.5px}
.p8r.ptr .st .nm{font-size:12.5px;letter-spacing:.04em}
.p8r.ptr .st .ck{display:none}
.p8r.ptr .bu{width:300px;height:300px}
.p8r.ptr .rg{width:110px;height:110px}
.p8r.ptr .sw{width:150px;height:150px}
.p8r.ptr .hx .num{font-size:78px}
.p8r.ptr .hx .lbs{height:44px;margin-top:6px;padding:0 10px;font-size:15px;gap:4px}
.p8r.ptr .hx .lbs .lab:not(.condition){letter-spacing:.12em;padding-left:.12em}