/* ============================================================
   Nova FX · cmpfx.css  (.cp-*)
   Compare-page pack for "Nova vs the field" — the six-wallet
   table, the 3-step switch strip, the honest-verdict cards
   and the closing CTA band.

   Motion contract (same as every other pack):
     · animates transform/opacity only
       (plus stroke-dashoffset for the SVG check/~ /x draw-in)
     · nothing animates until cmpfx.js arms it (.cp-arm) and an
       IntersectionObserver fires (.cp-in) — no-JS = static table
     · prefers-reduced-motion → every effect parks fully settled
   ============================================================ */


/* ------------------------------------------------------------
   1 · compact hero — inner-page header, not the landing hero
   ------------------------------------------------------------ */
.cp-hero{padding:146px 0 26px;position:relative}
.cp-hero h1{font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:-1.8px;line-height:1.08;margin-top:20px}
.cp-hero .sect-lead{max-width:680px}
.cp-chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}


/* ------------------------------------------------------------
   2 · .cp-box / .cp-wrap / .cp-table — the comparison table.
   .cp-box  outer frame (positioning context for fade + hint)
   .cp-wrap the actual scrollport (overflow-x:auto on mobile)
   .cp-table min-width forces the scroll; first column is sticky
   ------------------------------------------------------------ */
.cp-box{position:relative;margin-top:44px}
.cp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
 background:linear-gradient(170deg,#0a1830,#070f22);
 box-shadow:0 24px 60px rgba(2,8,25,.45);
 -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.cp-table{width:100%;min-width:920px;border-collapse:separate;border-spacing:0;font-size:14px}
.cp-table th,.cp-table td{text-align:left;padding:17px 18px;vertical-align:top}
.cp-table thead th{font-size:10.5px;font-weight:700;text-transform:uppercase;
 letter-spacing:.11em;color:var(--dim);border-bottom:1px solid var(--line2);
 background:rgba(148,178,255,.045);padding:15px 18px;white-space:nowrap}
.cp-table tbody td,.cp-table tbody th{border-bottom:1px solid var(--line);
 font-weight:400}
.cp-table tbody tr:last-child td,.cp-table tbody tr:last-child th{border-bottom-color:transparent}
.cp-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* sticky first column — solid bg so scrolled cells slide under it;
   right shadow appears only after the user scrolls (.cp-scrolled) */
.cp-stick{position:sticky;left:0;z-index:3;min-width:196px;
 background:#0a1730;border-right:1px solid var(--line);
 transition:box-shadow .3s ease}
.cp-table thead .cp-stick{z-index:5;background:#0c1a36}
.cp-box.cp-scrolled .cp-stick{box-shadow:18px 0 24px -14px rgba(1,5,14,.9)}

/* cell content — every td/th carries a .cp-c flex wrapper so the
   reveal can translate/opacity a normal element (transforms on
   <tr>/<td> are unreliable across engines) */
.cp-c{display:flex;gap:11px;align-items:flex-start;min-width:0}
.cp-ct{display:flex;flex-direction:column;gap:3px;min-width:0}
.cp-ct>b{font-size:13.5px;font-weight:650;color:#dce7ff;letter-spacing:-.1px}
.cp-ct>i{font-style:normal;font-size:11.5px;color:var(--dim);line-height:1.45}
.cp-wimg{width:26px;height:26px;border-radius:7px;flex:none;margin-top:1px;
 border:1px solid rgba(148,178,255,.18);background:#0b1730}
.cp-pill{display:inline-block;vertical-align:1px;font-size:9px;font-weight:800;
 letter-spacing:.07em;text-transform:uppercase;color:#0b1526;
 background:var(--grad);padding:2.5px 7px;border-radius:999px;margin-left:6px}
.cp-mini{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
 text-transform:uppercase;color:#8ff0c8;background:rgba(53,208,138,.1);
 border:1px solid rgba(53,208,138,.3);padding:2px 7px;border-radius:999px;
 margin-left:6px;vertical-align:1px}

/* row hover — background-color only, cheap and calm.
   (the Nova row keeps its gradient layers; hover stacks a tint) */
.cp-table tbody tr{transition:background-color .18s ease}
.cp-table tbody tr:hover>td,.cp-table tbody tr:hover>.cp-stick{background-color:rgba(148,178,255,.055)}

/* ------------------------------------------------------------
   3 · .cp-nova — the Nova row. Wallets are rows here, so the
   "Nova column" of the brief is the Nova row: gradient border
   via the padding-box/border-box layer trick + a slow sheen
   that sweeps cell-to-cell on a per-cell delay (--i).
   ------------------------------------------------------------ */
.cp-nova>td,.cp-nova>.cp-stick{
 border-top:1px solid transparent;border-bottom-color:transparent;
 background:
  linear-gradient(#0d1d3c,#0b1834) padding-box,
  linear-gradient(90deg,rgba(47,107,255,.7),rgba(56,189,248,.7)) border-box;
 position:relative;overflow:hidden}
.cp-nova>.cp-stick{border-left:1px solid transparent}
.cp-nova>td:last-child{border-right:1px solid transparent}
.cp-table tbody tr.cp-nova:hover>td,.cp-table tbody tr.cp-nova:hover>.cp-stick{
 background:
  linear-gradient(rgba(56,140,255,.13),rgba(56,140,255,.13)) padding-box,
  linear-gradient(#0d1d3c,#0b1834) padding-box,
  linear-gradient(90deg,rgba(47,107,255,.7),rgba(56,189,248,.7)) border-box}
.cp-nova .cp-ct>b{color:#fff}
.cp-nova>td::after,.cp-nova>.cp-stick::after{
 content:'';position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(105deg,rgba(158,208,255,0) 40%,rgba(158,208,255,.13) 50%,rgba(158,208,255,0) 60%);
 transform:translateX(-140%);
 animation:cpsheen 7.5s cubic-bezier(.45,0,.2,1) infinite;
 animation-delay:calc(1.4s + var(--i,0)*.38s)}
@keyframes cpsheen{0%{transform:translateX(-140%)}52%,100%{transform:translateX(140%)}}

/* ------------------------------------------------------------
   4 · verdict marks — check / tilde / x, drawn in on reveal.
   cmpfx.js measures real path lengths (getTotalLength) so the
   dash animation is exact; delays are inline per-cell cascade.
   ------------------------------------------------------------ */
.cp-mk{width:17px;height:17px;flex:none;margin-top:2px}
.cp-mk.ok{color:var(--grn)}
.cp-mk.mid{color:var(--amber)}
.cp-mk.no{color:#7f93bd;opacity:.8}
.cp-arm .cp-mk circle,.cp-arm .cp-mk path,.cp-arm .cp-mk line{
 transition:stroke-dashoffset .55s cubic-bezier(.4,0,.2,1)}
.cp-arm .cp-mk{opacity:0;transform:scale(.55);
 transition:opacity .4s ease var(--d,0ms),transform .45s cubic-bezier(.2,.9,.3,1.4) var(--d,0ms)}
.cp-in .cp-mk{opacity:1;transform:none}
.cp-in .cp-mk circle,.cp-in .cp-mk path,.cp-in .cp-mk line{stroke-dashoffset:0}

/* ------------------------------------------------------------
   5 · fee column — number + proportional bar (scaleX reveal).
   --w is a fraction of the worst fee in the table (Ledger ~1.5%).
   ------------------------------------------------------------ */
.cp-fee{font-size:17px;font-weight:800;letter-spacing:-.4px;color:#e9f0ff}
.cp-nova .cp-fee{font-size:19px;background:var(--grad);
 -webkit-background-clip:text;background-clip:text;color:transparent}
.cp-bar{margin-top:8px;width:82px;height:4px;border-radius:99px;
 background:rgba(148,178,255,.12);overflow:hidden}
.cp-bar i{display:block;height:100%;border-radius:99px;
 background:rgba(148,178,255,.42);
 transform:scaleX(var(--w,.5));transform-origin:0 50%}
.cp-nova .cp-bar i{background:var(--grad)}
.cp-arm .cp-bar i{transform:scaleX(0);
 transition:transform .8s cubic-bezier(.2,.75,.25,1) calc(var(--d,0ms) + 140ms)}
.cp-arm.cp-in .cp-bar i{transform:scaleX(var(--w,.5))}

/* ------------------------------------------------------------
   6 · reveal cascade — .cp-c fades/rises per cell, staggered by
   --d (row*70 + col*45 ms, set inline by cmpfx.js). Only when
   armed: without JS the table is complete and static.
   ------------------------------------------------------------ */
.cp-arm .cp-c{opacity:0;transform:translateY(13px);
 transition:opacity .5s ease var(--d,0ms),
            transform .55s cubic-bezier(.2,.7,.3,1) var(--d,0ms)}
.cp-arm.cp-in .cp-c{opacity:1;transform:none}

/* ------------------------------------------------------------
   7 · scroll affordances — right-edge fade while more columns
   exist offscreen; "scroll" pill until the first scroll.
   ------------------------------------------------------------ */
.cp-fade{position:absolute;top:1px;right:1px;bottom:1px;width:66px;
 border-radius:0 17px 17px 0;pointer-events:none;opacity:0;
 background:linear-gradient(90deg,rgba(7,15,34,0),rgba(7,15,34,.94));
 transition:opacity .3s ease}
.cp-box.cp-more .cp-fade{opacity:1}
.cp-hint{position:absolute;bottom:12px;right:12px;pointer-events:none;
 display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;
 letter-spacing:.1em;text-transform:uppercase;color:#bcd0f5;
 background:rgba(10,24,48,.88);border:1px solid var(--line2);
 border-radius:999px;padding:6px 12px;opacity:0;transition:opacity .3s ease}
.cp-hint b{font-weight:800;animation:cphint 1.5s ease-in-out infinite}
.cp-box.cp-more:not(.cp-scrolled) .cp-hint{opacity:1}
@keyframes cphint{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* ------------------------------------------------------------
   8 · footnote + legend
   ------------------------------------------------------------ */
.cp-note{font-size:12px;color:var(--dim);line-height:1.75;margin-top:20px;max-width:880px}
.cp-note b{color:var(--mut);font-weight:600}
.cp-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;
 font-size:11.5px;color:var(--dim)}
.cp-legend span{display:inline-flex;align-items:center;gap:7px}
.cp-legend .cp-mk{width:13px;height:13px;margin:0}

/* ------------------------------------------------------------
   9 · verdict cards — .cp-verdict grid: one tall "Choose Nova"
   card (gradient border) + a 2×2 grid of honest alternatives.
   ------------------------------------------------------------ */
.cp-verdict{display:grid;grid-template-columns:1.05fr 1.5fr;gap:18px;margin-top:44px}
.cp-vdgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:start}
.cp-vd-yes{border:1px solid transparent;
 background:linear-gradient(160deg,#0d1d3c,#081326) padding-box,
            linear-gradient(135deg,rgba(47,107,255,.75),rgba(56,189,248,.75)) border-box}
.cp-tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
 font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 padding:5px 11px;border-radius:999px;margin-bottom:15px}
.cp-tag.yes{color:#8ff0c8;background:rgba(53,208,138,.1);border:1px solid rgba(53,208,138,.32)}
.cp-tag.hon{color:var(--amber);background:rgba(255,201,77,.08);border:1px solid rgba(255,201,77,.28)}
.cp-yes{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:11px}
.cp-yes li{display:flex;gap:10px;font-size:13.5px;color:var(--mut);line-height:1.55}
.cp-yes li svg{width:15px;height:15px;color:var(--grn);flex:none;margin-top:2px}
.cp-yes li b{color:#dce7ff;font-weight:650}
.cp-vd p{margin-top:0}

/* ------------------------------------------------------------
   10 · closing CTA band
   ------------------------------------------------------------ */
.cp-ctab{position:relative;overflow:hidden;text-align:center;
 border:1px solid var(--line);border-radius:24px;
 padding:60px 40px;background:linear-gradient(170deg,#0b1a36,#070f22)}
.cp-ctab::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
 background:linear-gradient(90deg,transparent,rgba(56,189,248,.85),transparent)}
.cp-ctab::after{content:'';position:absolute;left:50%;top:-140px;width:520px;height:300px;
 transform:translateX(-50%);pointer-events:none;
 background:radial-gradient(ellipse at center,rgba(47,107,255,.22),rgba(47,107,255,0) 70%)}
.cp-ctab h2{position:relative;z-index:1}
.cp-ctab .sect-lead{position:relative;z-index:1;margin-left:auto;margin-right:auto}
.cp-btns{position:relative;z-index:1;display:flex;gap:14px;justify-content:center;
 flex-wrap:wrap;margin-top:32px}

/* ------------------------------------------------------------
   11 · responsive + reduced motion
   ------------------------------------------------------------ */
@media (max-width:860px){
 .cp-hero{padding:124px 0 18px}
 .cp-verdict{grid-template-columns:1fr}
 .cp-vdgrid{grid-template-columns:1fr}
 .cp-ctab{padding:44px 22px}
 .cp-stick{min-width:158px}
 .cp-table{min-width:840px}
}
@media (prefers-reduced-motion:reduce){
 .cp-nova>td::after,.cp-nova>.cp-stick::after{animation:none;opacity:0}
 .cp-hint b{animation:none}
 .cp-stick{transition:none}
 .cp-fade,.cp-hint{transition:none}
 .cp-arm .cp-c{opacity:1;transform:none;transition:none}
 .cp-arm .cp-mk{opacity:1;transform:none;transition:none}
 .cp-arm .cp-mk circle,.cp-arm .cp-mk path,.cp-arm .cp-mk line{stroke-dashoffset:0!important;transition:none}
 .cp-arm .cp-bar i{transform:scaleX(var(--w,.5));transition:none}
 .cp-table tbody tr{transition:none}
}