/* ============================================================
   Nova FX · claimfx.css — Nova Points / quests pack (.cl-*)
   Dark navy #04091a · accents #38bdf8 / #2f6bff / #7c8cff
   All selectors namespaced .cl-*. Motion = transform/opacity
   only. prefers-reduced-motion → static end states.
   ============================================================ */

/* ============================================================
   1 · .cl-hero — compact hero (sits inside padded .container)
   ============================================================ */
.cl-hero{padding:36px 0 20px;text-align:center}
.cl-hero h1{font-size:clamp(34px,4.8vw,58px);font-weight:800;letter-spacing:-1.9px;line-height:1.09}
.cl-hero .sect-lead{margin-left:auto;margin-right:auto}
.cl-cta{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap;position:relative;z-index:2}
/* retro-eligibility note — inline pill under the lead */
.cl-retro{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
 font-size:12.5px;font-weight:500;color:#a9bde8;line-height:1.5;
 background:rgba(56,140,255,.07);border:1px solid rgba(96,150,255,.24);
 border-radius:999px;padding:9px 17px}
.cl-retro svg{flex:none;width:14px;height:14px;color:#7fb0ff}
.cl-retro b{color:#dfeaff;font-weight:600}
@media (max-width:560px){.cl-retro{border-radius:14px;text-align:left}}

/* ============================================================
   2 · .cl-grid — dashboard (points card) + side column
   ============================================================ */
.cl-app{padding-top:44px}
.cl-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:22px;margin-top:44px;align-items:start}

/* ============================================================
   3 · .cl-card — mocked points dashboard (data-cl-glow)
   .cl-glow = pointer-tracked radial highlight (JS-owned div,
   moved with translate() so motion stays on transform).
   ============================================================ */
.cl-card{position:relative;overflow:hidden;
 background:linear-gradient(165deg,var(--card),#081327);
 border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;
 box-shadow:0 24px 60px rgba(2,8,25,.45)}
.cl-glow{position:absolute;left:0;top:0;width:360px;height:360px;margin:-180px 0 0 -180px;
 border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,rgba(56,189,248,.16) 0%,rgba(47,107,255,.08) 42%,transparent 68%);
 transform:translate(var(--mx,-999px),var(--my,-999px));
 opacity:0;transition:opacity .35s ease;will-change:transform}
.cl-card:hover .cl-glow{opacity:1}
.cl-card>*{position:relative;z-index:1}
.cl-card-h{display:flex;align-items:center;gap:10px}
.cl-card-h .cl-logo{width:26px;height:26px;filter:drop-shadow(0 4px 12px rgba(56,140,255,.4))}
.cl-card-h b{font-size:14px;font-weight:700;letter-spacing:.01em}
.cl-prev{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 color:#8db8ff;background:rgba(56,140,255,.09);border:1px solid rgba(96,150,255,.3);
 border-radius:999px;padding:4px 10px;white-space:nowrap}
/* mocked balance — blurred until connect */
.cl-bal{margin:24px 0 4px;display:flex;align-items:baseline;gap:10px}
.cl-bal-num{font-size:46px;font-weight:800;letter-spacing:-2px;line-height:1;
 background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-bal-u{font-size:15px;font-weight:700;color:var(--dim)}
.cl-blur{filter:blur(8px);opacity:.9;user-select:none;-webkit-user-select:none}
.cl-bal-cap{font-size:12px;color:var(--dim)}
/* points source rows */
.cl-rows{margin-top:18px}
.cl-prow{display:flex;align-items:center;gap:13px;padding:13px 0;
 border-top:1px solid rgba(148,178,255,.09)}
.cl-pd{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
 background:color-mix(in srgb,var(--c,#38bdf8) 12%,transparent);
 border:1px solid color-mix(in srgb,var(--c,#38bdf8) 32%,transparent);
 color:var(--c,#38bdf8)}
.cl-pd svg{width:16px;height:16px}
.cl-prow-t{flex:1;min-width:0}
.cl-prow-t b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.1px}
.cl-prow-t span{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}
.cl-ppts{font-size:13px;font-weight:800;white-space:nowrap;
 background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* "example" tag attached to any mocked value */
.cl-ex{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
 color:var(--dim);border:1px solid rgba(148,178,255,.22);border-radius:5px;
 padding:1.5px 5px;margin-left:6px;vertical-align:2px;
 color:var(--dim);-webkit-text-fill-color:var(--dim)}
/* connect strip inside the card */
.cl-connect{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
 background:rgba(56,140,255,.06);border:1px dashed rgba(96,150,255,.34);
 border-radius:14px;padding:13px 15px}
.cl-connect p{flex:1;min-width:180px;font-size:12.5px;color:var(--mut);line-height:1.5}
.cl-connect .btn{padding:10px 20px;font-size:13px}

/* ============================================================
   4 · .cl-count — flip countdown to next Friday 12:00 UTC
   .cl-num digits re-trigger .cl-flip on change (JS-owned).
   ============================================================ */
.cl-side{display:flex;flex-direction:column;gap:18px}
.cl-panel{background:linear-gradient(165deg,var(--card),#081327);
 border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.cl-panel-h{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
 letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.cl-panel-h svg{width:14px;height:14px;color:#38bdf8}
.cl-panel-h .cl-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
 font-size:10px;letter-spacing:.08em;color:var(--grn)}
.cl-panel-h .cl-live::before{content:'';width:6px;height:6px;border-radius:50%;
 background:var(--grn);box-shadow:0 0 8px rgba(53,208,138,.7);animation:nbpulse 2.4s ease-in-out infinite}
.cl-count{display:flex;gap:9px;margin-top:16px}
.cl-cell{flex:1;position:relative;overflow:hidden;text-align:center;
 background:rgba(4,9,26,.55);border:1px solid rgba(148,178,255,.14);
 border-radius:13px;padding:14px 4px 11px}
.cl-cell::before{content:'';position:absolute;left:0;right:0;top:56%;
 height:1px;background:rgba(148,178,255,.08)}
.cl-num{display:block;font-size:30px;font-weight:800;line-height:1;
 font-variant-numeric:tabular-nums;letter-spacing:-.5px;
 background:var(--grad);-webkit-background-clip:text;background-clip:text;
 color:transparent;-webkit-text-fill-color:transparent}
.cl-num.cl-flip{animation:cl-flip .55s cubic-bezier(.2,.7,.3,1)}
@keyframes cl-flip{
 0%{transform:translateY(-62%);opacity:0}
 55%{transform:translateY(9%);opacity:1}
 100%{transform:translateY(0);opacity:1}}
.cl-lab{display:block;margin-top:8px;font-size:9.5px;font-weight:700;
 letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cl-when{margin-top:14px;font-size:12.5px;color:var(--mut);line-height:1.55}
.cl-when b{color:#dfeaff;font-weight:650}
/* earning-chains strip under the countdown */
.cl-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.cl-chips .mic{padding:7px 12px 7px 8px;gap:9px;font-size:12px}
.cl-chips .mic img{width:22px;height:22px;border-radius:6px}
.cl-chips .chc-t>b{font-size:12px}
.cl-chips .chc-t>i{font-size:8.5px}
.cl-chips .chc-x{font-size:10px}

/* ============================================================
   5 · .cl-quest — quest rows (check-in style)
   .cl-tick pulses once when the row reveals (.in from IO).
   .cl-fill grows to --p on reveal. State chips on the right.
   ============================================================ */
.cl-quests{margin-top:40px;display:flex;flex-direction:column;gap:12px}
.cl-quest{display:flex;align-items:center;gap:16px;
 background:var(--card);border:1px solid var(--line);border-radius:16px;
 padding:18px 20px;
 transition:transform .2s ease,border-color .2s ease,box-shadow .25s ease,opacity .55s ease}
.cl-quest:hover{transform:translateY(-2px);border-color:var(--line2);
 box-shadow:0 12px 30px rgba(2,8,25,.5)}
.cl-tick{flex:none;position:relative;width:38px;height:38px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 color:#38bdf8;background:rgba(56,189,248,.07);
 border:1px solid rgba(56,189,248,.35)}
.cl-tick svg{width:16px;height:16px}
.cl-quest.in .cl-tick::after{content:'';position:absolute;inset:-1px;border-radius:50%;
 border:1px solid rgba(56,189,248,.75);animation:cl-pulse 1.7s ease-out .3s forwards}
@keyframes cl-pulse{
 0%{transform:scale(1);opacity:.85}
 100%{transform:scale(2);opacity:0}}
.cl-qb{flex:1;min-width:0}
.cl-qb h3{font-size:15px;font-weight:700;letter-spacing:-.2px}
.cl-qb p{font-size:12.5px;color:var(--mut);line-height:1.55;margin-top:3px;max-width:52ch}
.cl-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.cl-bar-i{flex:1;max-width:220px;height:5px;border-radius:99px;
 background:rgba(148,178,255,.12);overflow:hidden}
.cl-fill{display:block;height:100%;width:0;border-radius:inherit;
 background:linear-gradient(90deg,#2f6bff,#38bdf8);
 box-shadow:0 0 8px rgba(56,189,248,.4);
 transition:width 1.1s cubic-bezier(.2,.7,.25,1) .35s}
.cl-quest.in .cl-fill{width:var(--p,0%)}
.cl-bar-n{font-size:10.5px;font-weight:600;color:var(--dim);white-space:nowrap}
.cl-qm{margin-left:auto;flex:none;display:flex;flex-direction:column;
 align-items:flex-end;gap:7px;text-align:right}
.cl-pts{font-size:15px;font-weight:800;white-space:nowrap;
 background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
 font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
 color:#35d08a;border:1px solid rgba(53,208,138,.4);background:rgba(53,208,138,.08)}
.cl-chip.v-pro{color:#8db8ff;border-color:rgba(96,150,255,.38);background:rgba(56,140,255,.08)}
.cl-chip.v-loop{color:#c3b3ff;border-color:rgba(140,124,255,.4);background:rgba(124,140,255,.08)}

/* ============================================================
   6 · .cl-ref — referral block ("Invite — you both earn")
   Gradient-border card; mocked invite link stays blurred.
   ============================================================ */
.cl-ref{margin-top:44px;position:relative;border-radius:var(--r);padding:1px;
 background:linear-gradient(135deg,rgba(47,107,255,.6),rgba(56,189,248,.2) 45%,rgba(148,178,255,.1))}
.cl-ref-in{border-radius:calc(var(--r) - 1px);padding:32px 30px;
 background:linear-gradient(165deg,#0a1830 0%,#081327 70%);
 display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.cl-ref h3{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.8px;margin:0}
.cl-ref p{font-size:13.5px;color:var(--mut);line-height:1.65;margin-top:10px;max-width:46ch}
.cl-rstats{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.cl-rstat{flex:1;min-width:140px;background:rgba(255,255,255,.03);
 border:1px solid var(--line);border-radius:13px;padding:13px 15px}
.cl-rstat b{display:block;font-size:16px;font-weight:800;letter-spacing:-.3px;
 background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-rstat span{display:block;font-size:11px;color:var(--dim);margin-top:3px;line-height:1.45}
.cl-link{display:flex;align-items:center;gap:11px;
 background:rgba(4,9,26,.72);border:1px solid var(--line);
 border-radius:13px;padding:13px 15px;
 font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:13px;color:#c7d6f5}
.cl-link svg{flex:none;width:14px;height:14px;color:var(--dim)}
.cl-link .cl-blur{filter:blur(5px)}
.cl-link-cap{margin-top:9px;font-size:11px;color:var(--dim)}
.cl-ref-cta{margin-top:16px}
.cl-ref-cta .btn{width:100%;justify-content:center}

/* ============================================================
   7 · .cl-note — honesty / terms note
   ============================================================ */
.cl-note{margin-top:26px;display:flex;gap:12px;align-items:flex-start;
 font-size:13px;color:var(--mut);line-height:1.65;
 background:rgba(255,255,255,.03);border:1px solid var(--line);
 border-radius:14px;padding:16px 19px}
.cl-note svg{flex:none;width:16px;height:16px;margin-top:2px;color:#7fb0ff}
.cl-note a{color:#8fc3ff;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   8 · misc layout helpers
   ============================================================ */
.cl-minirow{display:flex;align-items:center;gap:10px;margin-top:18px;
 font-size:12px;color:var(--dim);flex-wrap:wrap}
.cl-minirow b{color:var(--mut);font-weight:600}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:920px){
 .cl-grid{grid-template-columns:1fr}
 .cl-ref-in{grid-template-columns:1fr;gap:22px}
}
@media (max-width:560px){
 .cl-hero{padding-top:20px}
 .cl-quest{flex-wrap:wrap}
 .cl-qm{margin-left:0;flex-direction:row;align-items:center;width:100%;
  justify-content:space-between}
 .cl-num{font-size:23px}
 .cl-cell{padding:11px 2px 9px}
 .cl-bal-num{font-size:36px}
}

/* ============================================================
   reduced motion — every animation collapses to its end state
   ============================================================ */
@media (prefers-reduced-motion:reduce){
 .cl-num.cl-flip{animation:none}
 .cl-quest.in .cl-tick::after{animation:none;opacity:0}
 .cl-fill{transition:none}
 .cl-glow{transition:none}
 .cl-quest{transition:none}
}

/* ============================================================
   9 · hero badge collision fix (operator pass) — on this page
   .cl-hero is a short centered text stack, so the dropfx
   floating chips (position:absolute inside the host) would sit
   ON the headline/lead. Re-flow them as one centered live
   chip row below the lead: bob idle kept, overlap impossible
   at any window width.
   ============================================================ */
.cl-hero{position:relative}
.cl-hero .dx-badge{display:none}
.cl-hero .dx-badge[data-pos]{position:static;right:auto;top:auto;bottom:auto;left:auto}
.cl-hero .cl-hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0 0}
.cl-hero .cl-hero-chips .dx-badge{display:inline-flex}
.cl-hero .cl-hero-chips .dx-badge b{padding-left:2px}