/* dolvero.com/affiliates - page layer on top of base.css + company.css (gen_affiliates.py). */

/* ---------- hero scene v2: a partner dashboard that is never empty ---------- */
.cs-k-aff{--glow:rgba(79,125,240,.5);background:radial-gradient(120% 90% at 85% 0%,#3a67e6 0%,rgba(58,103,230,0) 55%),linear-gradient(160deg,#0b1430 0%,#132552 60%,#1c3a8a 100%)}
.aff-sc{position:absolute;inset:0;padding:clamp(14px,1.8vw,22px);display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto 1fr auto;gap:10px 14px;font-family:Inter,system-ui,sans-serif;color:#fff}
.aff-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}
.aff-top b{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.aff-tier{position:relative;display:flex;align-items:center;gap:8px}
.aff-ring{width:34px;height:34px;transform:rotate(-90deg)}
.aff-ring circle{fill:none;stroke-width:3.5}
.aff-ring .bg{stroke:rgba(255,255,255,.14)}
.aff-ring .fg{stroke:var(--tc,#b07a4f);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:.3;transition:stroke-dashoffset .6s,stroke .5s}
.aff-ring-n{position:absolute;left:0;top:0;width:34px;height:34px;display:grid;place-items:center;font:600 10.5px "JetBrains Mono",monospace}
.aff-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:#fff;background:var(--tc,#b07a4f);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -8px var(--tc,#b07a4f);transition:background .5s}
.aff-chip small{font-weight:600;opacity:.85}
.aff-main{display:flex;flex-direction:column;min-width:0}
.aff-kpi small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.aff-kpi b{display:inline-block;margin-top:4px;font:600 clamp(26px,2.8vw,40px)/1 "JetBrains Mono",monospace;letter-spacing:-.02em;text-shadow:0 0 30px rgba(147,184,255,.35)}
.aff-delta{display:inline-block;margin-left:8px;vertical-align:6px;padding:3px 8px;border-radius:999px;font:600 12px "JetBrains Mono",monospace;color:#0b3d2c;background:#7ee2b8}
.aff-chart{flex:1;min-height:60px;margin-top:8px;position:relative}
.aff-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.aff-chart .ar{fill:url(#affg)}
.aff-chart .ln{fill:none;stroke:#93b8ff;stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(147,184,255,.7))}
.aff-chart .pt{fill:#fff;stroke:#4f7df0;stroke-width:3}
.aff-feed{display:flex;flex-direction:column;gap:7px;min-width:0;overflow:hidden}
.aff-row{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.aff-row i{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.14)}
.aff-row i svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aff-row span{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.aff-row span em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aff-row span strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aff-row b{font:600 12.5px "JetBrains Mono",monospace;color:#7ee2b8}
.aff-row.is-sub i{background:linear-gradient(180deg,#4f7df0,#2554d4)}
.aff-row.is-new{border-color:rgba(126,226,184,.5);box-shadow:0 0 0 1px rgba(126,226,184,.25),0 8px 20px -10px rgba(126,226,184,.5)}
.aff-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.96);color:#0f172a}
.aff-foot small{display:block;font-size:11px;color:rgba(15,23,42,.55);font-weight:600}
.aff-foot b{font:600 18px "JetBrains Mono",monospace}
.aff-foot a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(180deg,#4f7df0,#2554d4);text-decoration:none;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(37,84,212,.8)}
.aff-foot a small{display:inline;color:rgba(255,255,255,.8);font-size:10.5px}
.aff-fly{position:absolute;z-index:4;pointer-events:none;font:700 13px "JetBrains Mono",monospace;color:#7ee2b8;text-shadow:0 0 12px rgba(126,226,184,.8)}
.aff-toast{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);opacity:0;padding:14px 20px;border-radius:18px;background:#fff;color:#0f172a;font-weight:700;font-size:15px;box-shadow:0 30px 60px -16px rgba(0,0,0,.6);display:flex;align-items:center;gap:12px;z-index:5;white-space:nowrap}
.aff-toast i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#a9b8cf,#7f8fa8);color:#fff;font-style:normal;font-size:17px}
.aff-toast small{display:block;font-size:12px;font-weight:600;color:rgba(15,23,42,.55)}
.aff-spark{position:absolute;width:6px;height:6px;border-radius:50%;z-index:4;pointer-events:none}

/* ---------- comparison ---------- */
.af-cmp{margin-top:clamp(28px,4vw,44px);border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(15,23,42,.35);overflow:hidden}
.af-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.15fr);align-items:stretch;border-top:1px solid var(--line-2)}
.af-row--h{border-top:0;background:rgba(15,23,42,.025)}
.af-row--h>div{padding:16px 22px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.af-row--h .af-us{display:flex;align-items:center}
.af-row--h .af-us img{height:19px;width:auto}
.af-row>div{padding:18px 22px;display:flex;align-items:center;gap:12px}
.af-k b{font-family:var(--font-display);font-weight:600;font-size:16.5px;color:var(--ink-1)}
.af-k .cot-ico{flex:none;margin:0;width:38px;height:38px}
.af-them{color:var(--ink-3);font-size:15px;line-height:1.5}
.af-them i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;color:#b91c1c;background:rgba(185,28,28,.08)}
.af-us{background:linear-gradient(90deg,rgba(79,125,240,.07),rgba(79,125,240,.02));color:var(--ink-1);font-size:15.5px;font-weight:600;line-height:1.5}
.af-us i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#4f7df0,#2554d4);box-shadow:0 6px 14px -6px rgba(37,84,212,.7)}
.af-us i svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
  .af-row{grid-template-columns:1fr}
  .af-row--h{display:none}
  .af-row>div{padding:12px 18px}
  .af-row .af-k{padding-top:18px}
  .af-row .af-us{padding-bottom:18px}
}

/* ---------- tiers ---------- */
.af-tiers{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:end}
.af-tier{position:relative;padding:22px 20px 20px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px -36px rgba(15,23,42,.4);display:flex;flex-direction:column;gap:6px;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.af-tier:hover{transform:translateY(-4px);box-shadow:0 32px 60px -34px rgba(15,23,42,.45)}
.af-tier:nth-child(2){min-height:calc(100% + 0px)}
.af-tier::before{content:"";position:absolute;left:20px;right:20px;top:0;height:3px;border-radius:0 0 4px 4px;background:var(--tc)}
.af-tier-b{position:absolute;top:-12px;right:16px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.af-tier.is-top{background:linear-gradient(165deg,#1b2d5c 0%,#2554d4 70%,#4f7df0 100%);border-color:transparent;color:#fff;box-shadow:0 34px 70px -30px rgba(37,84,212,.7)}
.af-tier.is-top .af-tier-b{background:linear-gradient(180deg,#4f7df0,#2554d4);color:#fff;border-color:transparent}
.af-tier-n{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--tc)}
.af-tier.is-top .af-tier-n{color:#cfe0ff}
.af-tier-cl{font-size:14px;color:var(--ink-3)}
.af-tier-cl b{font-family:"JetBrains Mono",monospace;font-weight:600;color:var(--ink-1)}
.af-tier.is-top .af-tier-cl,.af-tier.is-top small{color:rgba(255,255,255,.75)}
.af-tier.is-top .af-tier-cl b{color:#fff}
.af-tier-rate{display:flex;align-items:flex-start;margin-top:10px;line-height:1}
.af-tier-rate b{font-family:var(--font-display);font-weight:600;font-size:clamp(54px,5vw,72px);letter-spacing:-.04em}
.af-tier-rate i{font-style:normal;font-family:var(--font-display);font-weight:600;font-size:26px;margin:8px 0 0 4px;opacity:.6}
.af-tier small{font-size:13.5px;color:var(--ink-3);margin-top:-2px}
.af-tier-sub{margin-top:12px;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(15,23,42,.035);font-size:13.5px;color:var(--ink-2)}
.af-tier-sub b{font-family:"JetBrains Mono",monospace;color:var(--ink-1)}
.af-tier.is-top .af-tier-sub{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
.af-tier.is-top .af-tier-sub b{color:#fff}
.af-tier-bar{margin-top:14px;height:6px;border-radius:99px;background:rgba(15,23,42,.07);overflow:hidden}
.af-tier-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--tc)}
.af-tier.is-top .af-tier-bar{background:rgba(255,255,255,.18)}
.af-tier.is-top .af-tier-bar i{background:#fff}
.af-note{margin:26px auto 0;max-width:62ch;text-align:center;font-size:15.5px;line-height:1.6;color:var(--ink-2);text-wrap:balance}
.af-note--l{text-align:left;margin-left:0}
@media(max-width:980px){.af-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.af-tiers{grid-template-columns:1fr}}

/* ---------- calculator ---------- */
.af-calc{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:0;border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(15,23,42,.45)}
.af-calc-in{padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:22px;border-right:1px solid var(--line-2)}
.af-in{display:grid;gap:10px}
.af-in-l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink-1)}
.af-in-l output{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:15px;color:#2554d4;padding:3px 9px;border-radius:8px;background:rgba(79,125,240,.09)}
.af-in input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,#4f7df0 var(--p,50%),rgba(15,23,42,.1) var(--p,50%));outline:none;cursor:pointer}
.af-in input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #2554d4;box-shadow:0 4px 12px -2px rgba(37,84,212,.5);cursor:grab}
.af-in input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #2554d4;box-shadow:0 4px 12px -2px rgba(37,84,212,.5);cursor:grab}
.af-in input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(79,125,240,.3)}
.af-calc-out{padding:clamp(22px,3vw,34px);background:linear-gradient(170deg,#0f1a33 0%,#16274f 60%,#1f3a86 100%);color:#fff;display:flex;flex-direction:column;gap:20px}
.af-kpis{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
.af-kpi{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.af-kpi small{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.af-kpi b{display:block;margin-top:6px;font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em}
.af-kpi--main{background:linear-gradient(160deg,#4f7df0,#2554d4);border-color:transparent;box-shadow:0 18px 36px -18px rgba(79,125,240,.8)}
.af-kpi--main b{font-size:clamp(28px,3vw,40px)}
.af-kpi--main span{display:block;margin-top:4px;font-size:12px;color:rgba(255,255,255,.8)}
.af-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:170px;padding-top:8px}
.af-bars>div{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.af-bars u{display:block;border-radius:6px 6px 3px 3px;background:var(--tc);height:var(--h);min-height:3px;transition:height .45s cubic-bezier(.2,.7,.2,1),background .4s;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.af-bars s{display:block;text-decoration:none;border-radius:3px;background:rgba(126,226,184,.9);height:var(--hs);transition:height .45s cubic-bezier(.2,.7,.2,1);margin-top:2px}
.af-bars small{margin-top:6px;text-align:center;font-size:10.5px;color:rgba(255,255,255,.5);font-family:"JetBrains Mono",monospace}
.af-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.af-path li{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:12.5px;color:rgba(255,255,255,.65);border-top:3px solid var(--tc)}
.af-path li b{display:block;color:#fff;font-size:13.5px;margin-bottom:2px}
.af-path li.is-off{opacity:.45}
.af-disc{margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.55)}
@media(max-width:980px){.af-calc{grid-template-columns:1fr}.af-calc-in{border-right:0;border-bottom:1px solid var(--line-2)}}
@media(max-width:560px){.af-kpis{grid-template-columns:1fr 1fr}.af-kpi--main{grid-column:1/-1}.af-path{grid-template-columns:1fr 1fr}.af-bars{height:130px;gap:4px}}

/* ---------- sub-affiliate tree ---------- */
.af-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.af-sub .mk-head{text-align:left;margin:0}
.af-sub .mk-head .lead{margin-left:0}
.af-tree{position:relative;padding:28px 18px 22px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(15,23,42,.45);display:flex;flex-direction:column;align-items:center}
.af-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 26px -18px rgba(15,23,42,.5);min-width:130px}
.af-node b{font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--ink-1)}
.af-node small{font-size:13px;color:var(--ink-3);font-family:"JetBrains Mono",monospace}
.af-node--you{background:linear-gradient(160deg,#4f7df0,#2554d4);border-color:transparent;box-shadow:0 20px 40px -18px rgba(37,84,212,.8)}
.af-node--you b{color:#fff;font-size:17px}
.af-pill{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;background:#fff;color:#0e9a6c;animation:afPulse 2.8s ease-in-out infinite}
@keyframes afPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.af-wires{width:100%;max-width:400px;height:70px;margin:-2px 0}
.af-wires path{fill:none;stroke:rgba(79,125,240,.45);stroke-width:2;stroke-dasharray:6 6;animation:afDash 1.6s linear infinite}
@keyframes afDash{to{stroke-dashoffset:-24}}
.af-kids{display:flex;justify-content:space-between;width:100%;max-width:440px;gap:16px}
.af-leaves{display:flex;justify-content:space-around;width:100%;max-width:440px;margin-top:16px}
.af-leaves i{width:14px;height:14px;border-radius:50%;background:rgba(79,125,240,.25);animation:afLeaf 3s ease-in-out infinite}
.af-leaves i:nth-child(2){animation-delay:.3s}.af-leaves i:nth-child(3){animation-delay:.6s}.af-leaves i:nth-child(4){animation-delay:.9s}.af-leaves i:nth-child(5){animation-delay:1.2s}.af-leaves i:nth-child(6){animation-delay:1.5s}
@keyframes afLeaf{0%,100%{background:rgba(79,125,240,.25);transform:scale(1)}50%{background:#4f7df0;transform:scale(1.25)}}
.af-tree-cap{margin:10px 0 0;font-size:13px;color:var(--ink-3)}
@media(max-width:900px){.af-sub{grid-template-columns:1fr}}

.af-how-cta{display:flex;justify-content:center;margin-top:30px}

@media (prefers-reduced-motion:reduce){.af-pill,.af-wires path,.af-leaves i{animation:none}}

/* the hero card keeps its full width when the grid collapses (margin:auto
   would otherwise shrink it to its content) and gets taller on phones */
.co-aff .ch-art{width:100%}
@media(max-width:900px){.cs-k-aff{aspect-ratio:1}}
@media(max-width:520px){
  .cs-k-aff{aspect-ratio:.78}
  .aff-sc{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto}
  .aff-chart{min-height:70px}
  .aff-foot a small{display:none}
  .aff-toast{font-size:13px;white-space:normal;max-width:88%}
}

/* ---------- hero numbers + heading highlights ---------- */
.co-aff .ch-stat b{color:#fff;text-shadow:0 6px 24px rgba(79,125,240,.45)}
.co-aff .ch-stat small{color:rgba(255,255,255,.88)}
.co-aff .mk-head h2 .hl,.co-aff .fq-side h2 .hl{background:linear-gradient(120deg,#4f7df0 0%,#2554d4 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.co-aff .mk-head .lead b,.co-aff .af-note b{color:var(--ink-1);font-weight:700}

/* ---------- what you get: bento with a scene per tile ---------- */
.pk-grid{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.pk{grid-column:span 2;display:flex;flex-direction:column;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -44px rgba(15,23,42,.45);overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.pk:hover{transform:translateY(-4px);box-shadow:0 40px 70px -40px rgba(37,84,212,.45)}
.pk--dash{grid-column:span 4}
.pk--markets{grid-column:span 6;flex-direction:row;align-items:stretch}
.pk--markets .pk-art{flex:1.1;height:auto;min-height:170px;margin:10px 0 10px 10px}
.pk--markets .pk-b{flex:1;display:flex;flex-direction:column;justify-content:center;padding:22px 30px}
.pk--markets .pk-mk{grid-template-columns:repeat(4,1fr)}
.pk-art{position:relative;height:190px;margin:10px 10px 0;border-radius:18px;overflow:hidden;background:radial-gradient(120% 100% at 80% 0%,#3a67e6 0%,rgba(58,103,230,0) 60%),linear-gradient(160deg,#0b1430,#16295a 70%,#1f3f95);color:#fff;font-family:Inter,system-ui,sans-serif}
.pk-art::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:18px 18px;pointer-events:none}
.pk-b{padding:18px 22px 22px}
.pk-b h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink-1)}
.pk-ico{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(180deg,#4f7df0,#2554d4);box-shadow:0 8px 16px -8px rgba(37,84,212,.8)}
.pk-ico svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pk-b p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.pk-art *{animation-play-state:paused}
.pk.is-live .pk-art *{animation-play-state:running}
/* dash */
.pk-kpis{position:absolute;left:18px;right:18px;top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;z-index:1}
.pk-kpis div{padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.pk-kpis b{display:block;font:600 20px "JetBrains Mono",monospace}
.pk-kpis small{font-size:11px;color:rgba(255,255,255,.6)}
.pk-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:95px}
.pk-line{fill:none;stroke:#93b8ff;stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1;animation:pkDraw 5s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(147,184,255,.6))}
.pk-area{opacity:0;animation:pkFade 5s ease-in-out infinite}
.pk-dot{fill:#fff;stroke:#4f7df0;stroke-width:3;opacity:0;animation:pkDot 5s ease-in-out infinite}
@keyframes pkDraw{0%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pkFade{0%,20%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}
@keyframes pkDot{0%,42%{opacity:0;r:2}50%,85%{opacity:1;r:4.5}100%{opacity:0}}
/* codes */
.pk-codes{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 18px}
.pk-code{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.95);color:#0f172a;font:600 13.5px "JetBrains Mono",monospace;overflow:hidden}
.pk-type{white-space:nowrap;overflow:hidden;display:inline-block;max-width:0;animation:pkType 6s steps(22) infinite}
.pk-type b{color:#2554d4}
.pk-copied{font-style:normal;font:700 11px Inter,sans-serif;color:#0e9a6c;opacity:0;animation:pkCopied 6s ease infinite}
@keyframes pkType{0%{max-width:0}40%,100%{max-width:100%}}
@keyframes pkCopied{0%,48%{opacity:0;transform:translateY(6px)}55%,90%{opacity:1;transform:none}100%{opacity:0}}
.pk-coupon{position:relative;z-index:1;align-self:flex-start;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;border-radius:12px;border:1.5px dashed rgba(255,255,255,.45);animation:pkPop 6s ease infinite}
.pk-coupon b{padding:4px 9px;border-radius:8px;background:linear-gradient(180deg,#4f7df0,#2554d4);font:700 13px "JetBrains Mono",monospace}
.pk-coupon span{font-size:12.5px;color:rgba(255,255,255,.85)}
@keyframes pkPop{0%,55%{transform:scale(.9);opacity:.3}62%{transform:scale(1.05);opacity:1}70%,100%{transform:none;opacity:1}}
/* payout */
.pk-pay{display:grid;place-items:center}
.pk-pay-card{position:relative;z-index:1;width:min(300px,82%);padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.96);color:#0f172a;display:grid;gap:8px}
.pk-pay-card small{font-size:11px;font-weight:600;color:rgba(15,23,42,.55)}
.pk-pay-card>b{font:600 26px "JetBrains Mono",monospace}
.pk-pay-bar{height:6px;border-radius:99px;background:rgba(15,23,42,.08);overflow:hidden}
.pk-pay-bar u{display:block;height:100%;width:0;background:linear-gradient(90deg,#4f7df0,#7ee2b8);animation:pkBar 5.5s ease-in-out infinite}
.pk-pay-btn{justify-self:start;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(180deg,#4f7df0,#2554d4);animation:pkBtn 5.5s ease infinite}
.pk-pay-ok{position:absolute;right:14px;bottom:14px;font-size:12px;font-weight:700;color:#0e9a6c;opacity:0;animation:pkOk 5.5s ease infinite}
@keyframes pkBar{0%,18%{width:0}60%,100%{width:100%}}
@keyframes pkBtn{0%,12%{transform:none}15%{transform:scale(.93)}20%,100%{transform:none}}
@keyframes pkOk{0%,60%{opacity:0;transform:translateY(6px)}68%,95%{opacity:1;transform:none}100%{opacity:0}}
/* contract */
.pk-doc{display:grid;place-items:center}
.pk-paper{position:relative;z-index:1;width:min(230px,80%);padding:14px 16px 16px;border-radius:12px;background:#fff;color:#0f172a;display:grid;gap:6px;transform:rotate(-2deg);box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}
.pk-paper>b{font-size:12px;font-weight:700}
.pk-paper>i{height:5px;border-radius:3px;background:rgba(15,23,42,.1)}
.pk-paper>i.s{width:70%}
.pk-sign{width:120px;height:30px;margin-top:4px}
.pk-sign path{fill:none;stroke:#2554d4;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:pkSign 6s ease-in-out infinite}
@keyframes pkSign{0%,10%{stroke-dashoffset:1}50%,100%{stroke-dashoffset:0}}
.pk-stamp{position:absolute;right:12px;bottom:14px;padding:4px 9px;border:2px solid #0e9a6c;border-radius:8px;color:#0e9a6c;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-12deg) scale(1.6);opacity:0;animation:pkStamp 6s ease infinite}
@keyframes pkStamp{0%,55%{opacity:0;transform:rotate(-12deg) scale(1.6)}62%,95%{opacity:1;transform:rotate(-12deg) scale(1)}100%{opacity:0}}
/* manager chat */
.pk-chat{display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.pk-head{position:relative;z-index:1;display:flex;align-items:center;gap:8px;font-size:12.5px}
.pk-head i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#4f7df0,#2554d4);font-style:normal;font-weight:700;font-size:12px}
.pk-on{width:8px;height:8px;border-radius:50%;background:#7ee2b8;box-shadow:0 0 8px #7ee2b8}
.pk-bub{position:relative;z-index:1;max-width:82%;padding:8px 12px;border-radius:14px;font-size:12.5px;line-height:1.4;opacity:0}
.pk-in{align-self:flex-end;background:rgba(255,255,255,.95);color:#0f172a;border-bottom-right-radius:4px;animation:pkIn 7s ease infinite}
.pk-out{align-self:flex-start;background:linear-gradient(180deg,#4f7df0,#2554d4);border-bottom-left-radius:4px;animation:pkOut 7s ease infinite}
.pk-typing{position:relative;z-index:1;display:flex;gap:4px;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.12);align-self:flex-start;opacity:0;animation:pkTyping 7s ease infinite}
.pk-typing i{width:6px;height:6px;border-radius:50%;background:#fff;animation:pkBlink 1s infinite}
.pk-typing i:nth-child(2){animation-delay:.15s}.pk-typing i:nth-child(3){animation-delay:.3s}
@keyframes pkIn{0%,8%{opacity:0;transform:translateY(8px)}14%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes pkTyping{0%,20%{opacity:0;height:0;padding-block:0}24%,44%{opacity:1;height:auto;padding-block:9px}48%,100%{opacity:0;height:0;padding-block:0}}
@keyframes pkOut{0%,46%{opacity:0;transform:translateY(8px)}52%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes pkBlink{0%,100%{opacity:.3}50%{opacity:1}}
/* markets */
.pk-mk{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px;align-content:center}
.pk-m{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:600;animation:pkMk 6s ease infinite;animation-delay:calc(var(--i) * 1.5s)}
.pk-m svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pk-m small{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.14)}
@keyframes pkMk{0%,22%{background:linear-gradient(180deg,#4f7df0,#2554d4);border-color:transparent;transform:translateY(-3px);box-shadow:0 12px 24px -12px rgba(79,125,240,.9)}28%,100%{background:rgba(255,255,255,.08);transform:none;box-shadow:none}}
@media(max-width:980px){.pk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pk,.pk--dash{grid-column:span 1}.pk--markets{grid-column:1/-1;flex-direction:column}.pk--markets .pk-art{margin:10px 10px 0}.pk--markets .pk-mk{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pk--markets{grid-column:auto}}
@media(max-width:620px){.pk-grid{grid-template-columns:1fr}}

/* ---------- how it works: a rail that fills as you scroll ---------- */
.st-rail{position:relative;margin-top:clamp(30px,4vw,48px)}
.st-line{position:absolute;left:calc(12.5% - 2px);right:calc(12.5% - 2px);top:27px;height:4px;border-radius:4px;background:rgba(79,125,240,.15);overflow:hidden}
.st-line u{display:block;height:100%;width:var(--fill,0%);background:linear-gradient(90deg,#93b8ff,#2554d4);transition:width .25s linear;box-shadow:0 0 14px rgba(79,125,240,.6)}
.st-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.st{display:flex;flex-direction:column;align-items:center;text-align:center}
.st-dot{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);box-shadow:0 12px 26px -14px rgba(15,23,42,.45);transition:background .5s,box-shadow .5s,transform .5s}
.st-dot b{font:600 17px "JetBrains Mono",monospace;color:#2554d4;transition:color .5s}
.st.is-on .st-dot{background:linear-gradient(180deg,#4f7df0,#2554d4);border-color:transparent;box-shadow:0 14px 30px -10px rgba(37,84,212,.8);transform:scale(1.06)}
.st.is-on .st-dot b{color:#fff}
.st-when{margin-top:14px;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2554d4;padding:4px 10px;border-radius:999px;background:rgba(79,125,240,.09)}
.st h3{margin:12px 0 6px;font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink-1)}
.st p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:30ch;text-wrap:pretty}
.st-ui{margin-top:16px;width:100%;max-width:280px;padding:14px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px -34px rgba(15,23,42,.5);text-align:left;display:grid;gap:6px;opacity:.55;transform:translateY(8px);transition:opacity .6s,transform .6s}
.st.is-on .st-ui{opacity:1;transform:none}
.st-ui small{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.st-ui>b{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ink-1)}
.st-ui code{display:block;padding:8px 10px;border-radius:10px;background:rgba(15,23,42,.04);font:500 12.5px "JetBrains Mono",monospace;color:var(--ink-1)}
.st-ui code b{color:#2554d4}
.st-chip{justify-self:start;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:var(--tc)}
.st-acc em{font-style:normal;font-size:12px;font-weight:600;color:#0e9a6c}
.st-fun{gap:9px}
.st-fun div{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.st-fun i{height:8px;border-radius:99px;background:rgba(79,125,240,.12);position:relative;overflow:hidden}
.st-fun i::after{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,#93b8ff,#2554d4);border-radius:inherit;transition:width 1s .2s cubic-bezier(.2,.7,.2,1)}
.st.is-on .st-fun i::after{width:var(--w)}
.st-fun b{font:600 12.5px "JetBrains Mono",monospace;color:var(--ink-1)}
.st-pay>b{font:600 24px "JetBrains Mono",monospace}
.st-pay span{font-size:12.5px;font-weight:700;color:#0e9a6c}
@media(max-width:900px){
  .st-line{left:27px;right:auto;top:0;bottom:0;width:4px;height:auto}
  .st-line u{width:100%;height:var(--fill,0%)}
  .st-list{grid-template-columns:1fr;gap:26px}
  .st{display:grid;grid-template-columns:58px 1fr;column-gap:18px;text-align:left;align-items:start}
  .st>*:not(.st-dot){grid-column:2}
  .st-dot{grid-row:1/span 4}
  .st-when{justify-self:start;margin-top:4px}
  .st-ui{max-width:none}
}
@media (prefers-reduced-motion:reduce){.pk-art *{animation:none!important}.pk-line{stroke-dashoffset:0}.pk-area,.pk-dot,.pk-copied,.pk-pay-ok,.pk-stamp,.pk-bub{opacity:1}.pk-type{max-width:100%}.pk-sign path{stroke-dashoffset:0}.pk-pay-bar u{width:100%}}