/* Wickproof UI (15 Sep): the deep-navy, electric-blue look Tony picked from two reference designs.
   One source of truth for every page: the landing, sign-in, dashboard, pay and legal pages link it, and so does the
   chart app (/app/). Pages keep their own layout CSS but take every colour, font and shared component from here.
   Colours: navy-black ground, glass surfaces with a faint blue edge, one electric-blue accent with a glow.
   Green and red stay ONLY for price direction and wins/losses; amber is a warning colour, never decoration.
   Fonts: Inter for everything; Instrument Serif italic only for the accent line of a big headline (.wp-serif).
   Icons: /assets/icons.js (line icons, currentColor). No emoji anywhere in the product. */

:root{
  --wp-bg:#05070f;            /* page ground: navy black */
  --wp-bg-2:#080c19;          /* alternate section ground */
  --wp-surface:rgba(14,20,40,.66);   /* glass card */
  --wp-surface-solid:#0c1224;        /* card where blur is not wanted (chart panels) */
  --wp-elev:#131b33;          /* inputs, chips, hovered rows */
  --wp-hover:rgba(120,150,255,.08);
  --wp-line:rgba(126,154,255,.14);   /* hairline border, blue tint */
  --wp-line-strong:rgba(126,154,255,.30);
  --wp-ink:#eef1ff;           /* primary text */
  --wp-muted:#8f98b8;         /* secondary text (7:1 on the ground) */
  --wp-dim:#737ea3;           /* captions, disabled, risk wording (5.0:1 on the ground: WCAG AA) */
  --wp-blue:#3d6bff;          /* THE accent */
  --wp-blue-2:#5b86ff;        /* hover / lighter end of gradients */
  --wp-blue-hi:#9db8ff;       /* accent text on dark, links */
  --wp-blue-soft:rgba(61,107,255,.16);
  --wp-up:#2fbd6f; --wp-down:#f0555f; --wp-warn:#f5b23c;
  --wp-glow:0 0 0 1px rgba(110,145,255,.45) inset, 0 10px 34px -8px rgba(61,107,255,.75);
  --wp-glow-soft:0 18px 60px -24px rgba(61,107,255,.55);
  --wp-r-lg:18px; --wp-r:12px; --wp-r-sm:8px; --wp-pill:999px;
  --wp-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wp-serif:"Instrument Serif",Georgia,"Times New Roman",serif;

  /* the older names every page already uses, pointed at the new palette so nothing is left gold */
  --bg:var(--wp-bg); --bg2:var(--wp-bg-2); --panel:var(--wp-surface-solid); --elev:var(--wp-elev);
  --hover:var(--wp-hover); --line:var(--wp-line); --ink:var(--wp-ink); --fg:var(--wp-ink); --muted:var(--wp-muted);
  --gold:var(--wp-blue); --gold2:var(--wp-blue-2); --goldink:var(--wp-blue-hi); --blue:var(--wp-blue-2);
  --up:var(--wp-up); --green:var(--wp-up); --down:var(--wp-down); --red:var(--wp-down);
  color-scheme:dark;
}

html{background:var(--wp-bg)}
body{background:var(--wp-bg);color:var(--wp-ink);font-family:var(--wp-font);-webkit-font-smoothing:antialiased}
::selection{background:rgba(61,107,255,.35);color:#fff}
a{color:var(--wp-blue-hi)}
:focus-visible{outline:2px solid var(--wp-blue-2);outline-offset:2px;border-radius:6px}

/* ---- icons ---- */
.wp-i{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;flex:none;
      stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wp-i.sm{width:.95em;height:.95em}
.wp-i.lg{width:1.5em;height:1.5em}
/* round gradient badge holding an icon (the reference cards' blue circles) */
.wp-badge{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;color:#fff;
          background:radial-gradient(circle at 30% 25%,#7d9dff 0%,#3d6bff 45%,#2a4fd6 100%);
          box-shadow:0 0 0 1px rgba(160,185,255,.35) inset,0 8px 24px -6px rgba(61,107,255,.8)}
.wp-badge .wp-i{width:20px;height:20px}
.wp-badge.sm{width:30px;height:30px}.wp-badge.sm .wp-i{width:15px;height:15px}
.wp-badge.quiet{background:var(--wp-blue-soft);color:var(--wp-blue-hi);box-shadow:0 0 0 1px var(--wp-line) inset}

/* ---- buttons ---- */
.wp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 var(--wp-font);
        padding:11px 18px;border-radius:var(--wp-pill);border:1px solid var(--wp-line-strong);white-space:nowrap;
        background:rgba(255,255,255,.03);color:var(--wp-ink);text-decoration:none;cursor:pointer;
        transition:background .18s,border-color .18s,box-shadow .18s,transform .12s}
.wp-btn:hover{background:var(--wp-hover);border-color:rgba(140,170,255,.45)}
.wp-btn:active{transform:scale(.97)}
.wp-btn-primary{background:linear-gradient(180deg,#5b86ff 0%,#3d6bff 55%,#2f5cf0 100%);border-color:transparent;color:#fff;
                box-shadow:var(--wp-glow)}
.wp-btn-primary:hover{background:linear-gradient(180deg,#6e95ff 0%,#4a76ff 55%,#3663f5 100%);
                      box-shadow:0 0 0 1px rgba(150,180,255,.6) inset,0 12px 40px -8px rgba(61,107,255,.9)}
.wp-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---- eyebrow chip above a heading ("Meet Wickproof AI") ---- */
.wp-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--wp-pill);
         font:500 12px/1.2 var(--wp-font);color:var(--wp-blue-hi);background:rgba(61,107,255,.10);
         border:1px solid var(--wp-line-strong);letter-spacing:.01em}
.wp-chip .wp-i{width:13px;height:13px}

/* ---- glass card ---- */
.wp-card{background:linear-gradient(180deg,rgba(22,30,58,.62),rgba(10,15,32,.62));border:1px solid var(--wp-line);
         border-radius:var(--wp-r-lg);box-shadow:0 1px 0 rgba(170,190,255,.06) inset;
         -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.wp-card:hover{border-color:var(--wp-line-strong)}
/* the recommended plan / option: blue edge and glow */
.wp-card.hot{border-color:rgba(110,145,255,.55);box-shadow:0 0 0 1px rgba(110,145,255,.35) inset,var(--wp-glow-soft)}

/* ---- headings: sans line + thin serif italic accent line ---- */
.wp-h1{font:600 clamp(34px,5.2vw,62px)/1.06 var(--wp-font);letter-spacing:-.025em;color:var(--wp-ink);text-wrap:balance}
.wp-h2{font:600 clamp(26px,3.4vw,40px)/1.12 var(--wp-font);letter-spacing:-.02em;color:var(--wp-ink);text-wrap:balance}
.wp-serif{font-family:var(--wp-serif);font-style:italic;font-weight:400;letter-spacing:-.005em;
          background:linear-gradient(180deg,#ffffff 0%,#b9ccff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.wp-lead{color:var(--wp-muted);font-size:clamp(15px,1.5vw,17px);line-height:1.6;max-width:62ch}

/* ---- the blue glow behind a hero or section ---- */
.wp-glow{position:relative;isolation:isolate;overflow-x:clip}   /* the glow is wider than the page: never a sideways scroll */
/* 19 Sep: on <body> neither clip nor hidden stops a PHONE browser widening the page to fit the glow (the sign-in page
   was 413px wide on a 375px screen, so it scrolled sideways). On phones the glow simply stays inside the page. */
@media (max-width:760px){body.wp-glow::before{left:0;right:0}}
.wp-glow::before{content:"";position:absolute;inset:-10% -10% auto;height:560px;z-index:-1;pointer-events:none;
                 background:radial-gradient(60% 55% at 50% 0%,rgba(61,107,255,.42) 0%,rgba(40,70,200,.16) 45%,transparent 75%)}
/* two sweeping arcs at the hero edges (flybot reference); decorative only */
.wp-arcs{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.wp-arcs::before,.wp-arcs::after{content:"";position:absolute;top:120px;width:620px;height:620px;border-radius:50%;
  border:38px solid transparent;border-top-color:rgba(61,107,255,.55);filter:blur(1px);
  box-shadow:0 -20px 80px -20px rgba(61,107,255,.6)}
.wp-arcs::before{left:-430px;transform:rotate(-40deg)}
.wp-arcs::after{right:-430px;transform:rotate(40deg)}

/* ---- top navigation in a pill ---- */
.wp-navpill{display:flex;gap:4px;padding:4px;border-radius:var(--wp-pill);border:1px solid var(--wp-line);
            background:rgba(12,18,38,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.wp-navpill a{padding:7px 14px;border-radius:var(--wp-pill);color:var(--wp-muted);text-decoration:none;font:500 13px/1 var(--wp-font)}
.wp-navpill a:hover,.wp-navpill a[aria-current="page"]{color:var(--wp-ink);background:var(--wp-blue-soft)}

/* ---- form fields ---- */
.wp-input{width:100%;padding:11px 14px;border-radius:var(--wp-r);border:1px solid var(--wp-line);background:var(--wp-elev);
          color:var(--wp-ink);font:15px/1.3 var(--wp-font)}
.wp-input:focus{outline:none;border-color:var(--wp-blue-2);box-shadow:0 0 0 3px rgba(61,107,255,.25)}

/* ---- the logo: candlestick mark in blue + "Wick" ink + "proof" blue ---- */
.logo b,.brand b{color:var(--wp-blue-2)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}