/* ============================================================ redesign.css - standalone stylesheet for redesign.html. Deliberately does NOT load webflow.css / custom.css so the draft can't collide with the live site's cascade. ============================================================ */ :root{ --bg:#000; --panel:#0e0e10; --panel-2:#101013; --line:#222226; --ink:#fff; --mute:#9a988f; --faint:#6f6d66; --gold:#ffeb8c; --gold-dim:rgba(255,235,140,.12); --up:#8fd694; --down:#e08a8a; --sans:"Inter","Segoe UI",system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5} img{max-width:100%;display:block} a{text-decoration:none;color:inherit} a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .rd-container{max-width:1180px;margin:0 auto;padding:0 24px} /* ---------- type ---------- */ .rd-h1{ font-size:clamp(38px,5.6vw,68px);font-weight:800;letter-spacing:-.03em;line-height:1.09; text-align:center;max-width:none;margin:0 auto; } /* each word rides in its own clip box; the box carries extra depth so descenders survive */ .rd-hw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.3em;margin-bottom:-.3em} .rd-hw i{ display:inline-block;font-style:normal; /* the gradient is clipped to the text, and it can only paint inside this box - so the box needs to reach past the baseline or descenders come out invisible. The negative margin cancels the padding for layout, leaving the paint area alone. */ padding-bottom:.26em;margin-bottom:-.26em; background-image:linear-gradient(#e2dcdc,#fff); -webkit-background-clip:text;background-clip:text;color:transparent; } @media (max-width:900px){ .rd-h1-br{display:none} .rd-h1{max-width:17ch;text-wrap:balance} } .rd-h2{ font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.08; text-align:center;text-wrap:balance;max-width:20ch;margin:0 auto; background-image:linear-gradient(#e2dcdc,#fff); -webkit-background-clip:text;background-clip:text;color:transparent; } .rd-eyebrow{ display:block;text-align:center;font-size:12px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px; } .rd-sechead{padding:0 24px;margin-bottom:26px} .rd-sec-sub{text-align:center;font-size:16px;color:var(--mute);max-width:54ch;margin:16px auto 0;text-wrap:balance} /* ---------- buttons ---------- */ .rd-btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:800;transition:transform .15s ease,box-shadow .15s ease} .rd-btn-gold{background:var(--gold);color:#000;font-size:17px;padding:14px 30px} .rd-btn-gold:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(255,235,140,.25)} .rd-btn-ghost{border:1px solid #3a3a40;color:#fff;font-weight:600;font-size:16px;padding:13px 26px} .rd-btn-ghost:hover{border-color:#55555e} .rd-btn-sm{font-size:14px;padding:8px 18px} /* ---------- nav ---------- */ .rd-nav{position:sticky;top:14px;z-index:100;padding:0 24px} .rd-nav-pill{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px; max-width:1132px;margin:0 auto; background:rgba(14,14,16,.78);backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.08);border-radius:20px; padding:10px 12px 10px 24px; box-shadow:0 12px 40px rgba(0,0,0,.45); } .rd-logo-link{justify-self:start;display:flex;align-items:center} .rd-logo{height:18px;width:auto} .rd-nav-links{display:flex;gap:26px;font-size:14.5px;color:#cfcdc5} .rd-nav-links a{transition:color .2s ease} .rd-nav-links a:hover{color:#fff} .rd-nav-right{justify-self:end;display:flex;align-items:center} @media (max-width:860px){ .rd-nav-links{display:none} .rd-nav-pill{grid-template-columns:auto 1fr} } /* ---------- hero ---------- */ .rd-hero{padding:96px 0 90px;overflow:hidden} /* two-tone subline: the phrases that carry the promise stay bright, the joins recede */ .rd-hero-sub{ font-size:clamp(19px,2.2vw,26px);font-weight:500;line-height:1.5; color:#d9d9d9;text-align:center;max-width:none;margin:26px auto 0;text-wrap:balance; } .rd-hero-sub .d{color:#737373} .rd-ctas{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:40px;flex-wrap:wrap} .rd-cta-caption{text-align:center;font-size:13px;color:var(--faint);margin-top:12px} .rd-proofline{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px} .rd-stat-chip{ display:inline-flex;align-items:center;font-size:13px;color:var(--gold); background:var(--gold-dim);border:1px solid rgba(255,235,140,.25);border-radius:999px;padding:6px 15px; } .rd-proof-logos{display:inline-flex;align-items:center;gap:14px;font-size:13px;color:var(--faint)} .rd-proof-logos b{color:#b9b7ae;font-weight:600;letter-spacing:.04em} /* client logo marquee - three identical runs, translateX(-100%) loop, masked edges */ .rd-logos{margin-top:76px} .rd-logos-label{ text-align:center;font-size:clamp(17px,1.6vw,20px);font-weight:650;letter-spacing:-.01em; background-image:linear-gradient(#e2dcdc,#fff); -webkit-background-clip:text;background-clip:text;color:transparent; margin-bottom:26px; } .rd-logos-row{ display:flex;gap:3.5rem;align-items:center;overflow:hidden;padding:1.1rem 0; -webkit-mask:linear-gradient(90deg,transparent,#000 10% 90%,transparent); mask:linear-gradient(90deg,transparent,#000 10% 90%,transparent); } .rd-logos-run{display:flex;gap:3.5rem;align-items:center;flex:none;min-width:max-content;animation:rd-marquee 30s linear infinite} .rd-logo-img{height:auto;width:auto;object-fit:contain;opacity:.9} /* per-logo optical normalization: wordmarks sized by their visual mass, not a uniform height */ .rd-lg1{height:26px} /* compact slanted mark */ .rd-lg2{height:22px} /* very wide wordmark */ .rd-lg3{height:26px} .rd-lg4{height:22px} /* wide wordmark */ .rd-lg5{height:24px} .rd-lg6{height:24px} /* INCO wordmark */ .rd-lg7{height:36px} /* University of California boxed lockup, three lines */ .rd-lg8{height:30px} /* micropsi industries, two lines */ .rd-lg9{height:28px} /* Orcrist wordmark, sword mark extends above cap height */ @keyframes rd-marquee{to{transform:translateX(-100%)}} /* hero entrance: armed inline before first paint, released on the next frame. Hiding is instant; only the forward play transitions. */ .rd-hero-anim .rd-hw i{opacity:0;transform:translateY(130%);transition:none} .rd-hero-anim .rd-hero-sub, .rd-hero-anim .rd-ctas, .rd-hero-anim .rd-embed{opacity:0;transform:translateY(20px);transition:none} .rd-hero-anim.rd-hero-in .rd-hw i{ opacity:1;transform:none; transition:opacity .85s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*90ms), transform .85s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*90ms); } .rd-hero-anim.rd-hero-in .rd-hero-sub, .rd-hero-anim.rd-hero-in .rd-ctas, .rd-hero-anim.rd-hero-in .rd-embed{ opacity:1;transform:none; transition:opacity .75s cubic-bezier(.16,1,.3,1) var(--hd,0s), transform .75s cubic-bezier(.16,1,.3,1) var(--hd,0s); } .rd-hero-anim .rd-hero-sub{--hd:.52s} .rd-hero-anim .rd-ctas{--hd:.68s} .rd-hero-anim .rd-embed{--hd:.86s} /* ---------- hero embed (the gym) ---------- */ .rd-embed{position:relative;margin-top:62px} .rd-window{ background: radial-gradient(60% 38% at 12% 0%, rgba(255,235,140,.06) 0%, rgba(255,235,140,0) 60%), radial-gradient(90% 90% at 90% 100%, rgba(96,144,255,.09) 0%, rgba(96,144,255,0) 70%), var(--panel); border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.6); position:relative; /* anchors the closing-beat report overlay */ } .rd-panel{background:var(--panel-2);border:1px solid var(--line);border-radius:10px} /* One live scene: the Team game board + the team chat, playing itself. Fixed height - the chat scrolls inside its panel, never grows the window. */ /* like the How-it-works card: the board sits bare on the window, only the chat is panelled */ .rd-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;padding:16px;height:440px; transition:opacity .55s ease} /* when the run finishes the scene steps aside and the report takes the whole window */ .rd-stage.rd-resolved{opacity:0;pointer-events:none} .rd-hero-report .rd-btable{min-width:470px} .rd-stage-board{display:flex;flex-direction:column;min-width:0;min-height:0} .rd-stage-center{flex:1;display:flex;align-items:center;justify-content:center;min-height:0} .rd-hexboard{position:relative} /* bubbles: muted rd-dot palette mapped to the Team game's move types (walk edge dark, delegate green, 1:1 teal, push tan, meeting sand, praise rose) */ .rd-bub{position:absolute;border-radius:50%;background:#37373d;transition:box-shadow .3s ease} .rd-bub.rd-b1{background:#7f9a72} .rd-bub.rd-b2{background:#6f979c} .rd-bub.rd-b3{background:#a8865f} .rd-bub.rd-b4{background:#c2b489} .rd-bub.rd-b5{background:#a87f8a} .rd-bub.rd-claimed{box-shadow:0 0 0 2px var(--pc,#ffeb8c),0 0 12px var(--pc,#ffeb8c)} /* teammate cursors glide between the bubbles they press */ .rd-cursor{position:absolute;z-index:6;pointer-events:none;opacity:0;transition:left .7s cubic-bezier(.5,0,.3,1),top .7s cubic-bezier(.5,0,.3,1),opacity .3s ease} .rd-cursor.on{opacity:1} .rd-cursor svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))} .rd-nametag{position:absolute;left:12px;top:13px;font-size:9.5px;font-weight:700;color:#000;background:var(--pc);border-radius:999px;padding:1px 7px;white-space:nowrap} .rd-cursor.press svg{animation:rd-press .35s ease} @keyframes rd-press{40%{transform:scale(.8)}} /* floating point popups */ .rd-pt{position:absolute;z-index:5;font-size:10.5px;font-weight:700;color:var(--gold); background:#0c0c0e;border:1px solid rgba(255,235,140,.5);border-radius:999px;padding:1px 8px; pointer-events:none;opacity:0;white-space:nowrap;transform:translate(-50%,0)} .rd-pt.fly{animation:rd-ptfly 1.7s ease forwards} .rd-pt.neg{color:var(--down);border-color:rgba(224,138,138,.5)} @keyframes rd-ptfly{8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}} /* team chat: fixed column, messages scroll inside */ .rd-stage-chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel-2);border:1px solid var(--line);border-radius:10px} .rd-tmsgs{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:9px;padding:12px;font-size:12.5px;line-height:1.45;scroll-behavior:smooth} .rd-tmsgs::-webkit-scrollbar{display:none} .rd-tmsg{border-radius:10px;padding:8px 12px;max-width:94%;background:#17171b;border:1px solid #232327;color:#d6d4cc;align-self:flex-start;flex-shrink:0} .rd-tmsg-who{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#b9b7ae;margin-bottom:3px} .rd-tmsg-who i{width:7px;height:7px;border-radius:50%;background:var(--pc,#fff);display:inline-block} .rd-tmsg.rd-evaluating{border-style:dashed;border-color:rgba(255,235,140,.45)} .rd-evalline{display:flex;gap:6px;align-items:center;margin-top:7px;font-size:10.5px;color:#8b8a7f;letter-spacing:.04em} .rd-evalline .rd-edots i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#6f6d66;margin-right:3px;animation:rd-blink 1.1s infinite} .rd-evalline .rd-edots i:nth-child(2){animation-delay:.18s} .rd-evalline .rd-edots i:nth-child(3){animation-delay:.36s} @keyframes rd-blink{0%,60%,100%{opacity:.25}30%{opacity:1}} /* a message can earn several skills at once, so chips wrap in their own row */ .rd-verdicts{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} .rd-verdict{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;color:var(--gold); border:1px solid rgba(255,235,140,.45);background:rgba(255,235,140,.07);border-radius:999px;padding:3px 10px; opacity:0;transform:translateY(3px);transition:opacity .45s ease,transform .45s ease} .rd-verdict.in{opacity:1;transform:none} .rd-caret{display:inline-block;width:1px;height:12px;background:#cfcdc5;vertical-align:-2px;animation:rd-blink 1s infinite} .rd-inputrow{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding:10px 12px;margin-top:auto;flex-shrink:0} .rd-fake-input{flex:1;background:#0c0c0e;border:1px solid #232327;border-radius:9px;padding:8px 12px;font-size:12px;color:var(--faint);min-height:34px} .rd-icon-btn{width:28px;height:28px;border-radius:50%;border:1px solid #33333a;color:#b9b7ae;font-size:12px;display:flex;align-items:center;justify-content:center} .rd-icon-send{background:var(--gold);color:#000;border:none;font-weight:700} @media (max-width:900px){ .rd-stage{grid-template-columns:1fr;height:auto} .rd-stage-board{height:400px} .rd-stage-chat{height:340px} /* stacked, the window is as tall as board + chat; once the report takes over, drop the scene from the flow and put the report in it so the window shrinks to fit instead of centring the table in a screen of empty space */ .rd-stage.rd-resolved{display:none} .rd-hero-report.on{position:relative} } /* ---------- how it works ---------- */ .rd-hiw{padding:110px 0 40px} .rd-rail{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 48px;margin-top:44px;align-items:start} .rd-steps{display:flex;flex-direction:column} .rd-step{opacity:.32;transition:opacity .35s ease;min-height:44vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0} .rd-step.on{opacity:1} /* The card is 440px tall and sticks at 50vh - 220px, so its centre is the viewport centre. Giving the last step the same height makes its half-height 220px too, so when the rail releases, step 05's centre lands exactly on the card's - at any viewport height. */ .rd-step:last-child{min-height:440px} .rd-step-eyebrow{font-size:15px;font-weight:600;letter-spacing:.08em;color:#77756d;font-variant-numeric:tabular-nums;transition:color .35s ease} .rd-step.on .rd-step-eyebrow{color:var(--gold)} .rd-step h3{font-size:clamp(22px,2.4vw,30px);font-weight:750;letter-spacing:-.02em;line-height:1.15;margin-top:10px;text-wrap:balance} .rd-step p{font-size:16px;color:var(--mute);margin-top:8px} .rd-step-visslot{display:none} /* One constant gradient card (the frame); the five visuals swap INSIDE it. Gradient recipe: warm gold breath top-left, cool pool bottom-right, over the dark base. */ .rd-visual-col{ position:sticky;top:calc(50vh - 220px);height:440px; background: radial-gradient(55% 40% at 16% 4%, rgba(255,235,140,.10) 0%, rgba(255,235,140,0) 65%), radial-gradient(95% 100% at 86% 96%, rgba(96,144,255,.16) 0%, rgba(96,144,255,.05) 48%, rgba(96,144,255,0) 78%), var(--panel); border:1px solid rgba(255,255,255,.08);border-radius:28px;overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5); } .rd-vis{ position:absolute;inset:0;display:flex;flex-direction:column; opacity:0;transform:translateY(10px);pointer-events:none; transition:opacity .4s ease,transform .4s ease; } .rd-vis.on{opacity:1;transform:none;pointer-events:auto} /* ---------- the five visual states (1:1 recreations of the old site's images) ---------- */ .rd-vis>div{flex:1;display:flex;gap:16px;padding:20px;min-height:0} /* staggered reveal */ .rda{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease} .rd-vis.on .rda{opacity:1;transform:none} .rd-vis.on .d1{transition-delay:.15s} .rd-vis.on .d2{transition-delay:.4s} .rd-vis.on .d3{transition-delay:.65s} .rd-vis.on .d4{transition-delay:.9s} .rd-vis.on .d5{transition-delay:1.15s} .rd-vis.on .d6{transition-delay:1.4s} /* value colors (same semantics as the old dashboards) */ .val-g{color:#8fd694}.val-y{color:#e6d97a}.val-o{color:#e0a35c}.val-r{color:#e08a8a} .val-mute{color:#77756d} .val-link{color:#8b897f;text-decoration:underline} .rd-pink{color:#e08a8a;font-style:italic} /* tag cards (V2 + V4) */ .rd-tag{ display:flex;flex-direction:column;gap:3px; background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);border-radius:10px; padding:9px 13px;font-size:11px;color:#cfcdc5; } .rd-tag b{font-size:11.5px;font-weight:700;color:#f0eee7} .rd-tag-green{border-color:rgba(143,214,148,.5)} .rd-tag-red{border-color:rgba(224,138,138,.5)} .rd-tag-cream{border-color:rgba(230,217,122,.4)} /* V1: the gym loop, compact - board + chat share the card */ .rd-v1{position:relative;align-items:stretch} .rd-v1-board{flex:1.3;display:flex;align-items:center;justify-content:center;min-width:0} .rd-v1-board .rd-hexboard{position:relative} .rd-v1-chat{width:250px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;background:var(--panel-2);border:1px solid var(--line);border-radius:10px} @media (max-width:900px){ .rd-v1{flex-direction:column} .rd-v1-board{flex:none;height:260px} .rd-v1-chat{width:auto;flex:1;min-height:200px} } /* V2: transcript with skill tags - anchored annotations */ .rd-v2{position:relative} .rd-v2-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0} .rd-audio{display:flex;align-items:center;gap:9px;font-size:10.5px;color:#a3a198;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 12px;width:fit-content} .rd-audio-play{width:16px;height:16px;border-radius:50%;background:var(--gold);color:#000;font-size:8px;display:flex;align-items:center;justify-content:center} .rd-audio-wave{display:flex;align-items:flex-end;gap:2px;height:11px} .rd-audio-wave i{width:2px;background:#5d5b55;border-radius:2px} .rd-audio-wave i:nth-child(1){height:4px}.rd-audio-wave i:nth-child(2){height:9px}.rd-audio-wave i:nth-child(3){height:6px} .rd-audio-wave i:nth-child(4){height:11px}.rd-audio-wave i:nth-child(5){height:5px}.rd-audio-wave i:nth-child(6){height:8px}.rd-audio-wave i:nth-child(7){height:4px} .rd-audio-time{font-family:ui-monospace,Consolas,monospace;font-size:9.5px;color:#77756d} .rd-v2-quote{font-size:13px;font-style:italic;line-height:2.2;color:#cfcdc5} /* pen-drawn underline: the stroke sweeps left to right, sentence by sentence */ .rd-u{ background-repeat:no-repeat;background-position:0 96%;background-size:0% 1.5px; padding-bottom:3px;-webkit-box-decoration-break:slice;box-decoration-break:slice; transition:background-size 1.4s cubic-bezier(.45,.05,.35,1); } .u-g{background-image:linear-gradient(rgba(143,214,148,.55),rgba(143,214,148,.55))} .u-y{background-image:linear-gradient(rgba(230,217,122,.5),rgba(230,217,122,.5))} .u-r{background-image:linear-gradient(rgba(224,138,138,.55),rgba(224,138,138,.55))} .rd-vis.on .rd-u{background-size:100% 1.5px} /* the pen moves through the passage: each sentence starts as the previous one finishes */ .rd-vis.on .rd-u.d1{transition-delay:.3s} .rd-vis.on .rd-u.d2{transition-delay:1.85s} .rd-vis.on .rd-u.d3{transition-delay:3.4s} .rd-vis.on .rd-u.d4{transition-delay:4.95s} .rd-vis.on .rd-u.d5{transition-delay:6.5s} /* each chip pops right as its sentence's stroke completes */ .rd-vis.on .rd-vchip.d1{transition-delay:1.65s} .rd-vis.on .rd-vchip.d2{transition-delay:3.2s} .rd-vis.on .rd-vchip.d3{transition-delay:4.75s} .rd-vis.on .rd-vchip.d4{transition-delay:6.3s} .rd-vis.on .rd-vchip.d5{transition-delay:7.85s} .rd-vchip{ display:inline-flex;align-items:center;gap:7px;vertical-align:middle;position:relative;cursor:default; font-size:10px;font-style:normal;border:1px solid rgba(255,255,255,.14);border-radius:8px; padding:4px 9px;background:rgba(0,0,0,.5);white-space:nowrap;margin:0 5px; } .rd-vchip b{font-weight:700;color:#f0eee7;font-size:10px} /* rubric tooltip: what this mark means, straight from the evaluation rubric */ .rd-vchip .rd-vtip{ position:absolute;top:calc(100% + 9px);left:50%;transform:translate(-50%,-3px); width:238px;white-space:normal;text-align:left; background:#141417;border:1px solid #2e2e33;border-radius:10px;padding:9px 12px 10px; font-size:10.5px;line-height:1.55;color:#9a988f; opacity:0;pointer-events:none;z-index:20; box-shadow:0 12px 34px rgba(0,0,0,.55); transition:opacity .2s ease,transform .2s ease; } .rd-vchip .rd-vtip.rd-vtip-r{left:auto;right:-6px;transform:translate(0,-3px)} /* chips near the frame bottom open upward so the frame's overflow never clips them */ .rd-vchip .rd-vtip.rd-vtip-up{top:auto;bottom:calc(100% + 9px);transform:translate(-50%,3px)} .rd-vchip .rd-vtip b{display:block;font-family:ui-monospace,Consolas,monospace;font-weight:600;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#cfcdc5;margin-bottom:4px} .rd-vchip:hover .rd-vtip{opacity:1;transform:translate(-50%,0)} .rd-vchip:hover .rd-vtip.rd-vtip-r{transform:translate(0,0)} .rd-vchip:hover .rd-vtip.rd-vtip-up{transform:translate(-50%,0)} .chip-g{border-color:rgba(143,214,148,.5)}.chip-g>span{color:#8fd694} .chip-y{border-color:rgba(230,217,122,.4)}.chip-y>span{color:#e6d97a} .chip-r{border-color:rgba(224,138,138,.5)}.chip-r>span{color:#e08a8a} /* V3: progress dashboard - banded bars (bands: <40 Low, 40-60 Medium, 60-70 High, >=70 Ready) */ .rd-v3{flex-direction:column;gap:12px;justify-content:center} /* header: score ring + dashboard title */ .rd-hC{display:flex;align-items:center;gap:16px} .rd-hC-text{min-width:0;flex:1} .rd-ring{position:relative;width:58px;height:58px;flex-shrink:0} .rd-ring svg{transform:rotate(-90deg);display:block} .rd-ring-bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:5} .rd-ring-fill{fill:none;stroke:#8fd694;stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.3,.1,.25,1) .3s} .rd-vis.on .rd-ring-fill{stroke-dashoffset:27} .rd-ring-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#8fd694;font-variant-numeric:tabular-nums} .rd-hC-text{min-width:0} .rd-hC-title{display:block;font-size:14px;font-weight:700;color:#f0eee7} .rd-hC-sub{display:block;font-size:11px;color:#8b897f;margin-top:2px} .rd-hC-sub b{color:#8fd694;font-weight:700} .rd-focus-chip{margin-left:auto;display:inline-flex;flex-direction:column;gap:1px;border:1px solid rgba(224,163,92,.4);border-radius:10px;padding:7px 13px;flex-shrink:0} .rd-focus-chip small{font-size:8.5px;font-family:ui-monospace,Consolas,monospace;letter-spacing:.1em;color:#77756d;text-transform:uppercase} .rd-focus-chip b{font-size:12px;color:#e0a35c} .rd-v3-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none} .rd-v3-scroll::-webkit-scrollbar{display:none} .rd-btable{width:100%;border-collapse:collapse;font-size:10.5px} .rd-btable th{font-size:9px;font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em;color:#77756d;font-weight:500;text-align:left;padding:4px 6px} .rd-btable td{padding:5px 6px;color:#cfcdc5} .rd-btable tbody tr{border-top:1px solid rgba(255,255,255,.05)} .rd-bar{position:relative;display:inline-block;vertical-align:middle;width:74px;height:16px;border-radius:4px;background:rgba(255,255,255,.05);overflow:hidden} .rd-bar i{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:4px;transition:width .65s cubic-bezier(.3,.1,.25,1)} .rd-bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:5px;font-size:9px;color:#e8e6df;font-variant-numeric:tabular-nums} .b-r{background:rgba(224,138,138,.4)}.b-o{background:rgba(224,163,92,.4)} .b-y{background:rgba(230,217,122,.35)}.b-g{background:rgba(143,214,148,.4)} /* the four session waves */ .rd-vis.on .rd-bar i{width:var(--w)} .rd-vis.on .bc1{transition-delay:.3s} .rd-vis.on .bc2{transition-delay:1.1s} .rd-vis.on .bc3{transition-delay:1.9s} .rd-vis.on .bc4{transition-delay:2.7s} /* session-4 bars that reached Ready get a one-time glow after the last wave */ .rd-vis.on .bglow{transition:width .65s cubic-bezier(.3,.1,.25,1) 2.7s,box-shadow .6s ease 3.6s;box-shadow:0 0 10px rgba(143,214,148,.45)} /* V4: coaching conversation - coach questions typed, answers typed back */ .rd-v4{flex-direction:column;gap:10px;justify-content:flex-start} .rd-v4-head{display:flex;align-items:center;gap:8px;font-size:11px;color:#a3a198;flex-wrap:wrap} .rd-v4-head b{color:#f0eee7;font-weight:700;font-size:12px} .rd-v4-pill{margin-left:auto;font-size:9px;font-family:ui-monospace,Consolas,monospace;letter-spacing:.08em;color:#ffeb8c;border:1px solid rgba(255,235,140,.3);border-radius:999px;padding:3px 9px} /* the conversation scrolls like a chat window; JS keeps it pinned to the newest bubble */ .rd-arows{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none} .rd-arows::-webkit-scrollbar{display:none} /* steps take no space until revealed - the chat starts empty and grows */ .rd-arow{display:none;grid-template-columns:26px 1fr;gap:0 12px;position:relative;padding-bottom:9px} .rd-arow.in{display:grid;animation:rd-fade .35s ease} .rd-arow::before{content:"";position:absolute;left:12px;top:24px;bottom:0;width:1px;background:#232327} .rd-arow:last-child{padding-bottom:0} .rd-arow:last-child::before{display:none} .rd-anode{width:25px;height:25px;border-radius:50%;background:#141417;border:1px solid rgba(255,235,140,.5);color:#ffeb8c;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1} .rd-alabel{display:flex;align-items:center;min-height:25px} .rd-alabel b{font-family:ui-monospace,Consolas,monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#ffeb8c} .rd-abody{grid-column:2;margin-top:2px;display:flex;flex-direction:column;gap:4px} .rd-tb{display:none} .rd-tb.show{display:inline-block;animation:rd-fade .3s ease} @keyframes rd-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .rd-bc,.rd-by{display:inline-block;font-size:10px;line-height:1.4;border-radius:9px;padding:5px 9px;max-width:92%} .rd-bc{background:#17171b;border:1px solid #232327;color:#b4b2a9;align-self:flex-start} .rd-by{background:rgba(255,235,140,.08);border:1px solid rgba(255,235,140,.2);color:#e8e6df;align-self:flex-end} .rd-aplan{border:1px solid rgba(143,214,148,.4);background:rgba(143,214,148,.05);border-radius:10px;padding:7px 11px;font-size:10px;color:#cfcdc5} .rd-aplan b{color:#8fd694;font-size:9px;font-family:ui-monospace,Consolas,monospace;letter-spacing:.1em;display:block;margin-bottom:2px} .rd-caret{display:inline-block;width:1px;height:10px;background:#a3a198;margin-left:2px;vertical-align:-1px;animation:rd-caret .9s steps(2) infinite} @keyframes rd-caret{50%{opacity:0}} /* V5: leadership readiness - the bench (goal line at 60%, sorted by readiness) */ .rd-v5{flex-direction:column;gap:10px;justify-content:center} .rd-v5-head{display:flex;align-items:center;gap:8px;font-size:11px;color:#a3a198;flex-wrap:wrap} .rd-v5-head b{color:#f0eee7;font-weight:700;font-size:12px} .rd-v5-note{margin-left:auto;font-family:ui-monospace,Consolas,monospace;font-size:8.5px;letter-spacing:.08em;color:#77756d} .rd-v5-note i{color:#ffeb8c;font-style:normal} .rd-v5-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none} .rd-v5-scroll::-webkit-scrollbar{display:none} .rd-bench{display:flex;flex-direction:column} .rd-brow{display:grid;grid-template-columns:140px minmax(0,1fr) 56px 170px;gap:10px;align-items:center;padding:6px 8px;border-top:1px solid rgba(255,255,255,.05);border-radius:8px} .rd-bhead{border-top:none;padding-bottom:2px} .rd-bhead span{font-family:ui-monospace,Consolas,monospace;font-size:8px;letter-spacing:.1em;color:#5d5b55;text-transform:uppercase} .rd-bnext{border:1px solid transparent;transition:background-color .5s ease,border-color .5s ease} .rd-vis.on .rd-bnext{background:rgba(255,235,140,.05);border-color:rgba(255,235,140,.28)} .rd-vis.on .rd-bnext{transition-delay:1.9s} .rd-bwho{display:flex;align-items:center;gap:8px;min-width:0} .rd-bmin{min-width:0} .rd-bava{width:24px;height:24px;border-radius:50%;background:#1c1c20;border:1px solid #2c2c31;color:#d9d7cf;font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0} .rd-bname{display:block;font-size:11px;color:#e8e6df;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rd-bbadge{display:block;font-family:ui-monospace,Consolas,monospace;font-size:7.5px;letter-spacing:.08em;margin-top:1px;white-space:nowrap} .bd-y{color:#e6d97a}.bd-o{color:#e0a35c}.bd-r{color:#e08a8a}.bd-g{color:#8fd694} /* READY tier, score >= 70% */ .rd-btrack{position:relative;height:15px;border-radius:999px;background:rgba(255,255,255,.05)} .rd-bfill{position:absolute;top:0;bottom:0;left:0;border-radius:999px;width:0;transition:width .7s cubic-bezier(.3,.1,.25,1)} .rd-vis.on .rd-bfill{width:var(--w)} .f-y{background:rgba(230,217,122,.4)}.f-o{background:rgba(224,163,92,.4)}.f-r{background:rgba(224,138,138,.4)}.f-g{background:rgba(143,214,148,.4)} /* READY tier fill */ .rd-bgoal{position:absolute;top:-3px;bottom:-3px;left:60%;width:1.5px;background:#ffeb8c;opacity:.8} .rd-bgoal::after{content:"GOAL";display:none;position:absolute;top:-11px;left:-11px;font-family:ui-monospace,Consolas,monospace;font-size:6.5px;letter-spacing:.08em;color:#ffeb8c;opacity:.9} .rd-brow:nth-child(2) .rd-bgoal::after{display:block} .rd-bval{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:8.5px;color:#e8e6df;font-variant-numeric:tabular-nums} .rd-bimp{font-size:9.5px;color:#8fd694;font-variant-numeric:tabular-nums;white-space:nowrap} .rd-bareas{display:flex;gap:5px;flex-wrap:wrap} .rd-achip{font-size:8px;border:1px solid;border-radius:999px;padding:2px 7px;white-space:nowrap} .a-imp{color:#e0a35c;border-color:rgba(224,163,92,.35)} .a-lev{color:#8fd694;border-color:rgba(143,214,148,.3)} /* the team total is the seventh bench row - same grammar, stronger divider */ .rd-trow{border-top:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.3);margin-top:4px} .rd-trow .rd-bname{color:#f0eee7} /* bar cascade, top of the bench first */ .rd-vis.on .rd-brow:nth-child(2) .rd-bfill{transition-delay:.25s} .rd-vis.on .rd-brow:nth-child(3) .rd-bfill{transition-delay:.5s} .rd-vis.on .rd-brow:nth-child(4) .rd-bfill{transition-delay:.75s} .rd-vis.on .rd-brow:nth-child(5) .rd-bfill{transition-delay:1s} .rd-vis.on .rd-brow:nth-child(6) .rd-bfill{transition-delay:1.25s} .rd-vis.on .rd-brow:nth-child(7) .rd-bfill{transition-delay:1.5s} .rd-vis.on .rd-brow:nth-child(8) .rd-bfill{transition-delay:1.75s} /* ---------- hero: Leadership Readiness layer (headline bar + competency cards + drill-down) ---------- */ .rd-lr{flex-direction:column;justify-content:center;gap:0} .rd-lrmain{display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:10px;align-items:center;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)} .rd-lrtitle{display:block;font-size:15px;font-weight:700;color:#f0eee7;white-space:nowrap} .rd-lrsub{display:block;font-family:ui-monospace,Consolas,monospace;font-size:7.5px;letter-spacing:.08em;color:#77756d;margin-top:2px;white-space:nowrap} .rd-lrmain .rd-btrack{height:18px} /* the overall bar sits one notch above the competency bars */ .rd-lrmain .rd-bgoal::after{display:block;content:"GOAL 60%";left:-16px;font-size:7.5px;white-space:nowrap} /* the readiness bars read at true hue; the session table below keeps the muted fills */ .rd-lr .f-g{background:rgba(143,214,148,.65)} .rd-lr .f-y{background:rgba(230,217,122,.6)} .rd-lr .f-o{background:rgba(224,163,92,.65)} .rd-lr .f-r{background:rgba(224,138,138,.65)} .rd-lrstrip{display:flex;gap:8px;margin-top:8px} .rd-lrcard{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:9px 12px;cursor:pointer;background:var(--panel-2)} .rd-lrcard:not(.sel):hover{border-color:#2c2c31} .rd-lrcard.sel{background:rgba(255,235,140,.06)} .rd-lrcard:focus-visible{outline:1.5px solid rgba(255,235,140,.6);outline-offset:1px} .rd-lrcname{display:block;font-size:11.5px;color:#e8e6df;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rd-lrcard.sel .rd-lrcname{color:#f0eee7} .rd-lrcard .rd-bbadge{margin-top:1px} .rd-lrcard .rd-btrack{display:block;margin-top:8px} .rd-lrcmeta{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px} .rd-lrcpct{color:#e8e6df;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums} .rd-lrdrill{border-top:1px solid rgba(255,255,255,.08);margin-top:8px;padding-top:8px} .rd-lr .rd-focus-chip small{font-size:7.5px} /* the 442px hero window is tighter than the step cards: compact table */ .rd-lr .rd-btable th{padding:3px 6px} .rd-lr .rd-btable td{padding:4px 6px} /* entrance: fills wave in after the sections fade */ .rd-hero-report.on .rd-lrmain .rd-bfill{transition-delay:.3s} .rd-hero-report.on .rd-lrcard:nth-child(1) .rd-bfill{transition-delay:.55s} .rd-hero-report.on .rd-lrcard:nth-child(2) .rd-bfill{transition-delay:.75s} .rd-hero-report.on .rd-lrcard:nth-child(3) .rd-bfill{transition-delay:.95s} /* competency switch: the swapped drill re-enters from zero, then the standard waves play */ .rd-lrdrill.rd-swap .rd-bar i{width:0;transition:none} @media (max-width:700px){ .rd-lrmain{grid-template-columns:minmax(0,1fr) auto} .rd-lrmain .rd-lrwho{grid-column:1/-1} .rd-lrstrip{flex-direction:column} } /* ---------- what we teach: before/after transformation cards, stacking on scroll ---------- */ .rd-stages{padding:110px 0 60px} .rd-stack{display:flex;flex-direction:column;gap:28px;margin-top:44px;position:relative;padding-top:40px} /* the rail bounds the ladder's sticky range so it releases together with the last card; its height is set by JS from live geometry */ .rd-ladder-rail{position:absolute;left:0;right:0;top:0;z-index:10;pointer-events:none;display:flex;flex-direction:column;align-items:center;padding:0 24px} .rd-ladder-stack{max-width:100%} .rd-scard{ position:sticky;top:128px; display:flex;flex-direction:column;justify-content:center;gap:20px; background: radial-gradient(55% 40% at 16% 4%, rgba(255,235,140,.10) 0%, rgba(255,235,140,0) 65%), radial-gradient(95% 100% at 86% 96%, rgba(96,144,255,.14) 0%, rgba(96,144,255,0) 78%), var(--panel); border:1px solid rgba(255,255,255,.09);border-radius:24px; padding:clamp(24px,3vw,44px); box-shadow:0 -18px 60px rgba(0,0,0,.55); } .rd-scard-eyebrow{font-family:ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.14em;color:var(--gold)} /* the ladder: one sticky line above the stack; the gold rung follows the card sliding in */ /* the rail is pointer-events:none so it never blocks the cards; the bar itself takes clicks back */ .rd-ladder{display:flex;align-items:center;gap:12px;font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;flex-wrap:wrap;pointer-events:auto} .rd-ladder-stack{position:sticky;top:96px;justify-content:center} .rd-lstep{color:#4c4a45;white-space:nowrap;transition:color .35s ease;cursor:pointer;-webkit-tap-highlight-color:transparent} .rd-lstep:hover{color:#cfcdc5} .rd-lstep.done{color:#84827a} .rd-lstep.on{color:var(--gold)} .rd-lstep.on:hover{color:var(--gold)} .rd-lline{width:34px;height:1px;background:#26262b;transition:background-color .35s ease} .rd-lline.done{background:#4c4a45} .rd-scard-title{font-size:clamp(24px,2.6vw,32px);font-weight:750;letter-spacing:-.02em;color:#f0eee7;line-height:1.15;margin-top:8px;text-wrap:balance} /* stage number carries the same gold the ladder gives the active step */ .rd-stage-no{color:var(--gold)} .rd-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch} .rd-half{border-radius:14px;padding:26px 26px 22px;display:flex;flex-direction:column;gap:12px} .rd-half-tag{font-family:ui-monospace,Consolas,monospace;font-size:10px;letter-spacing:.16em} .rd-half-quote{font-size:clamp(16px,1.7vw,20px);font-style:italic;line-height:1.55} .rd-before{background:rgba(224,138,138,.05);border:1px solid rgba(224,138,138,.22)} .rd-before .rd-half-tag{color:#e08a8a} .rd-before .rd-half-quote{color:#8b897f} /* the AFTER half starts dark and illuminates once the card stacks in */ .rd-after{background:rgba(143,214,148,.02);border:1px solid rgba(143,214,148,.1);transition:background-color .7s ease,border-color .7s ease} .rd-after .rd-half-tag{color:rgba(143,214,148,.45);transition:color .7s ease} .rd-after .rd-half-quote{color:#6f6d66;transition:color .7s ease} .rd-scard.lit .rd-after{background:rgba(143,214,148,.06);border-color:rgba(143,214,148,.3)} .rd-scard.lit .rd-after .rd-half-tag{color:#8fd694} .rd-scard.lit .rd-after .rd-half-quote{color:#e8e6df} /* the weakest phrase gets struck as the AFTER lights up */ .rd-strike{ background-image:linear-gradient(transparent 46%,rgba(224,138,138,.65) 46% 56%,transparent 56%); background-repeat:no-repeat;background-size:0% 100%; transition:background-size .45s ease .3s; } .rd-scard.lit .rd-strike{background-size:100% 100%} /* skill references: phrases in the AFTER quote link to the chips below */ .rd-skref{border-bottom:1px dashed transparent;transition:border-color .35s ease} .rd-scard.lit .rd-skref{border-bottom-color:rgba(143,214,148,.35)} .rd-skref.hl{border-bottom-style:solid;border-bottom-color:#8fd694;color:#f0eee7} .rd-schip{transition:border-color .25s ease,color .25s ease,box-shadow .25s ease} .rd-schip.hl{border-color:rgba(255,235,140,.6);color:var(--gold);box-shadow:0 0 12px rgba(255,235,140,.15)} .rd-skdesc{min-height:22px;font-size:13.5px;font-style:italic;color:#8b897f;opacity:0;transition:opacity .25s ease;margin-top:-10px} .rd-skdesc.show{opacity:1} /* the five method chips live inside a labeled enclosure */ .rd-chipgroup{position:relative;display:inline-flex;gap:7px;flex-wrap:wrap;border:1px dashed rgba(255,235,140,.28);border-radius:14px;padding:13px 10px 9px;margin-top:8px} .rd-chipgroup-label{position:absolute;top:-8px;left:12px;font-style:normal;font-family:ui-monospace,Consolas,monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:#101013;padding:0 7px;border-radius:4px} /* loose chips align with the group's bubbles when both share a row */ .rd-tfoot:has(.rd-chipgroup)>.rd-schip{transform:translateY(6px)} /* when the chip group is present, drop the footer label to the bubbles' optical center */ .rd-tfoot:has(.rd-chipgroup)>small{transform:translateY(7px)} .rd-tfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .rd-tfoot small{font-family:ui-monospace,Consolas,monospace;font-size:9px;letter-spacing:.12em;color:#5d5b55;text-transform:uppercase} .rd-schip{display:inline-block;font-size:11px;color:#cfcdc5;background:#141417;border:1px solid #232327;border-radius:999px;padding:4px 10px;white-space:nowrap} /* stage 1: two paths replace the quotes - same endpoints, different middles */ .rd-flow{display:flex;flex-direction:column;align-items:center;height:260px;margin-top:6px} .rd-half:has(.rd-flow){padding:18px 20px 16px} .rd-fnode{display:flex;flex-direction:column;align-items:center;gap:0;background:#141417;border:1px solid #232327;border-radius:11px;padding:4px 12px;text-align:center} .rd-fnode b{font-size:11.5px;font-weight:650;color:#cfcdc5;line-height:1.3} .rd-fnode i{font-style:normal;font-size:9px;color:#77756d;white-space:nowrap;line-height:1.35} .rd-fnode-bad{border-color:rgba(224,138,138,.45)} .rd-fnode-good{border-color:rgba(143,214,148,.5)} .rd-fnode.hl{border-color:rgba(255,235,140,.55)} .rd-fmk{font-style:normal;display:inline-block} .rd-fnode-bad .rd-fmk{color:#e08a8a} .rd-fnode-good .rd-fmk{color:#8fd694} .rd-fln{width:0;flex:1;min-height:6px;border-left:2px solid rgba(143,214,148,.35);transform-origin:top} .rd-fln-leap{border-left:2px dashed rgba(224,138,138,.55)} .rd-srclink{width:21px;height:21px;border-radius:50%;border:1px solid #2a2a2e;display:inline-grid;place-items:center;font-size:10.5px;color:#9a988f} .rd-srclink:hover{border-color:#3f3f45;color:#cfcdc5} /* stage 2: the objective graph - the chain plus managing-up side cards; edges measured by JS */ .rd-graph{position:relative;padding-right:158px} .rd-graph-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .rd-fedge{fill:none;stroke:rgba(255,235,140,.45);stroke-width:1.5;stroke-dasharray:3 4} .rd-fnode-stack{box-shadow:0 4px 0 -2px #141417,0 4px 0 -1px #2a2a2e,0 8px 0 -4px #101013,0 8px 0 -3px #232327} .rd-stg1{position:absolute;top:-8px;right:-10px;font-family:ui-monospace,Consolas,monospace;font-style:normal;font-size:7.5px;letter-spacing:.1em;color:var(--gold);background:#101013;border:1px solid rgba(255,235,140,.4);border-radius:999px;padding:1px 7px} .rd-mu{position:absolute;right:2px;width:152px;background:#141417;border:1px solid rgba(255,235,140,.28);border-radius:11px;padding:5px 10px;text-align:center} .rd-mu b{display:block;font-size:9.5px;font-weight:650;color:#cfcdc5;line-height:1.35} .rd-mu i{display:block;font-style:normal;font-size:8.5px;color:#77756d;line-height:1.35} .rd-mulabel{position:absolute;right:2px;width:152px;text-align:center;font-family:ui-monospace,Consolas,monospace;font-size:8.5px;letter-spacing:.14em;color:#77756d;text-transform:uppercase} .rd-ways{display:flex;gap:7px;justify-content:center;padding:3px 0} .rd-way{display:inline-block;height:12px;border-radius:999px;background:#1c1c20;border:1px solid #26262a} /* ---------- mobile stage cards: the two-column diagram gives way to the skills it teaches, grouped into families, with one line on what changes ---------- */ .rd-mflow{display:none} .rd-mgrp{display:flex;width:100%;margin-top:20px} .rd-mpayoff{font-size:13.5px;color:#b9b7ae;line-height:1.55;margin-top:18px} .rd-mpayoff b{color:#e8e6df;font-weight:600} /* stage 3: scatter vs orchestration - both halves are positioned canvases with measured edges */ .rd-g3{position:relative} .rd-g3svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .rd-gpos{position:absolute;transform:translateX(-50%);width:max-content} .rd-gpc{left:34%} .rd-gc1{left:11%} .rd-gc2{left:34%} .rd-gc3{left:57%} .rd-fnode-sm{padding:4px 8px} .rd-fnode-sm b{font-size:10.5px} .rd-mu3{width:140px} .rd-fnode-stack2{box-shadow:0 4px 0 -2px #141417,0 4px 0 -1px #2a2a2e,0 8px 0 -4px #101013,0 8px 0 -3px #232327} .rd-pdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#77756d;margin-right:4px;vertical-align:1px} .rd-tm{position:absolute;transform:translateX(-50%);width:64px;height:16px;border-radius:999px;background:#1c1c20;border:1px solid rgba(224,138,138,.35)} .rd-mu3-a{top:56px} .rd-mu3-b{bottom:0} .rd-fedge-r{stroke:rgba(224,138,138,.5);stroke-dasharray:4 4} .rd-fedge-stub{stroke:rgba(224,138,138,.35);stroke-width:1.3;stroke-dasharray:3 4} .rd-fedge-g{stroke:rgba(143,214,148,.4);stroke-dasharray:none} /* scroll animation: armed by JS (skipped for reduced motion / no JS, leaving the flows visible). Hiding and rewinding are instant; transitions only run on the forward play. */ .rd-flow-anim .rd-fnode{opacity:0;transform:scale(.88);transition:none} .rd-flow-anim .rd-fln{opacity:0;transform:scaleY(0);transition:none} .rd-flow-anim .rd-fmk{opacity:0;transform:scale(2);transition:none} .rd-flow-anim .rd-mu,.rd-flow-anim .rd-mulabel,.rd-flow-anim .rd-way,.rd-flow-anim .rd-fedge,.rd-flow-anim .rd-tm{opacity:0;transition:none} .rd-flow-anim.rd-flow-on .rd-fnode{opacity:1;transform:scale(1);transition:opacity .4s ease var(--d,0s),transform .4s ease var(--d,0s)} .rd-flow-anim.rd-flow-on .rd-fln{opacity:1;transform:scaleY(1);transition:opacity .3s ease var(--d,0s),transform .35s ease var(--d,0s)} .rd-flow-anim.rd-flow-on .rd-fmk{opacity:1;transform:scale(1);transition:opacity .3s ease var(--d,0s),transform .3s ease var(--d,0s)} .rd-flow-anim.rd-flow-on .rd-mu,.rd-flow-anim.rd-flow-on .rd-mulabel{opacity:1;transition:opacity .45s ease var(--d,0s)} .rd-flow-anim.rd-flow-on .rd-way{opacity:1;transition:opacity .3s ease var(--d,0s)} .rd-flow-anim.rd-flow-on .rd-tm{opacity:1;transition:opacity .3s ease var(--d,0s)} .rd-flow-anim.rd-flow-on .rd-fedge{opacity:1;transition:opacity .35s ease var(--d,0s)} /* capstone: the final card in the stack - the ROI chart. Both bars share the same grey base (the same person); what differs is the cost stacked on top. */ .rd-scard-cap{ flex-direction:row;align-items:center;flex-wrap:wrap;gap:clamp(28px,4vw,52px);padding:clamp(40px,5vw,60px) clamp(28px,4vw,56px); background: linear-gradient(180deg,rgba(255,235,140,.10),rgba(255,235,140,.03)), var(--panel); border-color:rgba(255,235,140,.35); } .rd-cap-body{flex:1;min-width:260px} .rd-cap-lead{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;color:#f0eee7;margin-top:10px} .rd-cap-text{font-size:15.5px;color:#b9b7ae;margin-top:8px;max-width:56ch} .rd-cap-text b{color:#e8e6de;font-weight:600} .rd-roi{display:flex;flex-direction:column;align-items:center;gap:10px} .rd-roi-chart{display:flex;align-items:flex-end;gap:clamp(22px,2.6vw,44px)} .rd-roi-col{display:flex;flex-direction:column;align-items:center;gap:10px} .rd-roi-lab{display:flex;flex-direction:column;align-items:center;gap:8px} .rd-roi-pre{font-size:11px;color:#84827a;line-height:1;margin-bottom:-2px} .rd-roi-num{font-size:clamp(20px,1.9vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums} /* the premium is what bringing a leader in COSTS you, so it reads as a negative */ .rd-roi-num-r{color:var(--down)} .rd-roi-num-gold{color:var(--gold)} .rd-roi-cap{font-size:11px;color:#84827a;max-width:16ch;text-align:center;line-height:1.4} .rd-roi-stack{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;width:54px;margin-top:4px} .rd-roi-stack-a{height:217px} .rd-roi-stack-b{height:109px} .rd-roi-prem{height:111px;background:var(--down);border-radius:9px 9px 3px 3px} .rd-roi-base{height:103px;background:#2f2f34;border-radius:3px 3px 9px 9px} .rd-roi-sliver{height:3px;background:var(--gold);border-radius:2px;box-shadow:0 0 12px rgba(255,235,140,.6)} .rd-roi-side{align-self:flex-end;display:flex;align-items:center;gap:12px;height:103px;margin-bottom:25px} .rd-roi-sidetxt{text-align:right;font-size:11px;color:#84827a;max-width:15ch;line-height:1.45} .rd-roi-sidetxt b{display:block;color:#cfcdc5;font-weight:600} .rd-roi-bkt{width:8px;height:100%;border:2px solid #55534d;border-right:0} .rd-roi-tag{font-family:ui-monospace,Consolas,monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#84827a;margin-top:2px} .rd-roi-foot{flex-basis:100%;font-style:italic;color:#6f6d66;font-size:9px;line-height:1.65;margin-top:2px} /* scroll animation: armed by JS (skipped for reduced motion / no JS, leaving the full chart visible). The grey bases stay static; only the cost of the difference builds up slowly. */ .rd-roi-anim .rd-roi-prem{height:0;opacity:0;transition:none} .rd-roi-anim .rd-roi-sliver{opacity:0;transition:none} .rd-roi-anim .rd-roi-lab{opacity:0;transition:none} .rd-roi-anim.rd-roi-on .rd-roi-prem{height:111px;opacity:1;transition:height 2.2s cubic-bezier(.4,0,.2,1) .4s,opacity .4s ease .4s} .rd-roi-anim.rd-roi-on .rd-roi-sliver{opacity:1;transition:opacity .5s ease 2.8s} .rd-roi-anim.rd-roi-on .rd-roi-lab{opacity:1;transition:opacity .6s ease .35s} .rd-roi-anim.rd-roi-on .rd-roi-lab-b{transition-delay:2.85s} @media (max-width:900px){ /* the two-column diagram gives way to the compressed paths */ .rd-split{display:none} .rd-mflow{display:block} /* clearance under the nav pill, and room between the ladder and the card below it */ .rd-stack{padding-top:58px} .rd-scard{min-height:0;top:122px} .rd-ladder-stack{top:88px} .rd-split{grid-template-columns:1fr} .rd-scard-cap{flex-direction:column;align-items:flex-start;gap:24px} .rd-roi{align-self:center} } @media (max-width:1100px){ .rd-mu3{width:116px} .rd-mu3 b{font-size:9px} .rd-mu3 i{font-size:8px} .rd-fnode-sm{padding:3px 6px} .rd-fnode-sm b{font-size:10px} } @media (max-width:640px){ /* the ladder still has to hold one line on a phone, so the connectors and gaps pay for the larger type rather than the labels shrinking */ .rd-ladder{font-size:10px;gap:5px;justify-content:center} .rd-lline{width:8px} } @media (max-width:560px){ .rd-roi-chart{gap:16px} .rd-roi-sidetxt{max-width:11ch} .rd-roi-stack{width:46px} .rd-flow{height:230px} } /* ---------- proof wall ---------- */ .rd-proof{padding:110px 0 60px} .rd-wall{position:relative;overflow:hidden;margin-top:40px} .rd-wall::before,.rd-wall::after{content:"";position:absolute;top:0;bottom:0;width:max(120px,12vw);z-index:10;pointer-events:none} .rd-wall::before{left:0;background:linear-gradient(90deg,#000,transparent)} .rd-wall::after{right:0;background:linear-gradient(270deg,#000,transparent)} .rd-track{display:flex;align-items:stretch;gap:20px;width:max-content;padding:4px 0} .rd-wall.rd-anim .rd-track{animation:rd-wall 60s linear infinite} .rd-wall.rd-anim:hover .rd-track{animation-play-state:paused} @keyframes rd-wall{to{transform:translateX(-50%)}} /* Card recipe: measure-driven width (quote locked to 30ch), roomy 2rem padding, 1.5rem internal rhythm, hairline border that warms to gold on hover. */ .rd-tcard{ flex-shrink:0;display:flex;flex-direction:column;gap:24px; background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:32px; cursor:pointer;transition:border-color .25s ease; } .rd-tcard:hover{border-color:rgba(255,235,140,.45)} /* width:0 + min-width:100% zeroes the row's intrinsic-width contribution, so the quote alone sets card width; a top row wider than that wraps its role instead of widening the card */ .rd-tcard-top{display:flex;align-items:center;gap:14px;width:0;min-width:100%} /* align-self keeps the avatar level with the name when a wrapped role makes the row taller */ .rd-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#1c1c20;align-self:flex-start} .rd-tnames{min-width:min-content} /* floor at the name's width: the role wraps first, the name never truncates */ .rd-tname{display:block;font-size:15.5px;font-weight:650;color:#f0eee7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rd-trole{display:block;font-size:12.5px;color:#8b897f;margin-top:2px} .rd-comark{ margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.12em;color:#a3a198; border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:7px 13px;flex-shrink:0; } /* company logos on cards: same gray marks as the marquee, lifted a touch for the dark panel */ /* max-width:none opts out of the global img{max-width:100%} - a %-max-width makes the card's intrinsic width ignore the logo, so wide marks (Smartproxy) bleed past the card */ .rd-comark-img{margin-left:auto;flex-shrink:0;width:auto;max-width:none;opacity:.55} .rd-cm-choco{height:17px} .rd-cm-micropsi{height:22px} .rd-cm-inco{height:14px} .rd-cm-uc{height:26px} .rd-cm-smartproxy{height:11px} .rd-tquote{font-size:15.5px;line-height:1.55;color:#d6d4cc;min-width:30ch;max-width:30ch} .rd-tquote b{color:#fff;font-weight:600} .rd-tmore{font-size:12px;color:#77756d;margin-top:auto;transition:color .25s ease} .rd-tmore span{color:var(--gold)} .rd-tcard:hover .rd-tmore{color:#b9b7ae} .rd-statcard{ width:260px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;gap:10px;text-align:center; background:linear-gradient(180deg,rgba(255,235,140,.10),rgba(255,235,140,.03)); border:1px solid rgba(255,235,140,.35);border-radius:16px;padding:32px; } .rd-statcard b{font-size:44px;font-weight:800;color:var(--gold);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .rd-statcard span{font-size:13.5px;color:#b9b7ae;line-height:1.45} /* ---------- FAQ ---------- */ .rd-faq{padding:40px 0 60px} .rd-faq-list{max-width:820px;margin:36px auto 0} .rd-faq-item{border-bottom:1px solid rgba(255,255,255,.08)} .rd-faq-q{ display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%; background:none;border:none;cursor:pointer;text-align:left; font-family:var(--sans);font-size:19px;font-weight:450;color:#f0eee7; padding:22px 4px; } .rd-faq-icon{ width:10px;height:10px;flex-shrink:0;margin-top:-4px; border-right:2px solid #9a988f;border-bottom:2px solid #9a988f; transform:rotate(45deg);transition:transform .25s ease; } .rd-faq-item.open .rd-faq-icon{transform:rotate(-135deg);margin-top:4px} .rd-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease} .rd-faq-item.open .rd-faq-a{grid-template-rows:1fr} .rd-faq-a-inner{overflow:hidden} .rd-faq-a-inner p{font-size:15px;line-height:1.65;color:var(--mute);padding:0 4px 18px;max-width:70ch} .rd-faq-a-inner p strong{color:#d6d4cc} .rd-faq-more{text-align:center;font-size:15px;color:var(--mute);margin-top:32px} .rd-faq-more a{ color:#f0eee7;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3); text-underline-offset:4px;transition:text-decoration-color .2s ease; } .rd-faq-more a:hover{text-decoration-color:rgba(255,255,255,.7)} /* ---------- closing + footer ---------- */ .rd-close{padding:50px 0 110px;text-align:center} .rd-close-card{ position:relative;border-radius:28px;overflow:hidden; border:1px solid rgba(255,255,255,.08); padding:clamp(80px,11vw,140px) 32px; background: radial-gradient(60% 95% at 50% 0%, rgba(255,235,140,.13) 0%, rgba(255,235,140,0) 62%), radial-gradient(70% 90% at 12% 100%, rgba(96,144,255,.13) 0%, rgba(96,144,255,0) 70%), radial-gradient(70% 90% at 88% 100%, rgba(96,144,255,.10) 0%, rgba(96,144,255,0) 70%), var(--panel); box-shadow:0 30px 90px rgba(0,0,0,.5); } .rd-close .rd-ctas{margin-top:30px} .rd-footer{border-top:1px solid rgba(255,255,255,.06);padding:28px 0} .rd-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .rd-footer-links{display:flex;gap:22px;font-size:13px;color:var(--faint)} .rd-footer-links a:hover{color:var(--mute)} /* ---------- modal ---------- */ .rd-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px} .rd-modal.open{display:flex} .rd-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)} .rd-modal-card{ position:relative;max-width:560px;width:100%;max-height:80vh;overflow-y:auto; background:var(--panel);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:32px; box-shadow:0 40px 100px rgba(0,0,0,.7); } .rd-modal-close{ position:absolute;top:12px;right:14px;background:none;border:none;color:var(--faint); font-size:24px;line-height:1;cursor:pointer;padding:4px; } .rd-modal-close:hover{color:#fff} .rd-modal-text{font-size:14.5px;line-height:1.65;color:#cfcdc5;margin-top:16px;white-space:pre-line} /* ---------- booking modal: the cal.com calendar, opened in place ---------- */ /* one scroll container, not two: the card itself never scrolls, the calendar absorbs the leftover height, and its own bar is hidden the way the other panels do it */ /* The card is the only scroller. The calendar box is never capped, so cal.com's iframe always gets its full natural height and their page never scrolls inside itself - which is the one scrollbar we cannot style, because it lives in a cross-origin frame. */ .rd-book-card{ max-width:1000px;width:100%;padding:22px 22px 16px; max-height:92vh;overflow-y:auto;display:flex;flex-direction:column; scrollbar-width:none;-ms-overflow-style:none; } .rd-book-card::-webkit-scrollbar{display:none;width:0;height:0} .rd-book-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding-right:34px;flex:none} .rd-book-head b{font-size:17px;font-weight:750;letter-spacing:-.01em;color:#f0eee7} .rd-book-head span{font-size:13px;color:var(--faint)} .rd-book-cal{ /* no cap and no scrolling here: whatever height cal.com asks for, it gets. No border or background either - cal's own booker card already draws one, and two nested rounded rectangles read as a mistake. */ flex:none;height:auto; overflow:visible;background:transparent;border:0; scrollbar-width:none;-ms-overflow-style:none; } .rd-book-cal::-webkit-scrollbar{display:none} /* cal.com stamps its own class on this div and injects a