/* VICE STYLE for the website (2026-10-08). Same palette and geometry as the
   app (app/VICE_STYLE.md): pink FF3CAC + cyan 00E5FF on a deep purple night,
   radius 3, 2px saturated borders, HARD offset shadows (no blur).
   Loaded AFTER each page's own styles. Screen only: the print styles in
   legal.css stay in charge on paper. Gold (Sparks), teal (Essence) and the
   gold legal notice boxes are deliberately left alone. */
@media screen{
:root{
  --bg:#090616;--night:#150A2E;--panel:#1E1140;--edge:#3A2A6B;
  --pink:#FF3CAC;--cyan:#00E5FF;--vb:#00E5FF;--violet:#FF3CAC;
  --border:#3A2A6B;
}
body{background:linear-gradient(180deg,var(--night) 0,var(--bg) 900px) fixed,var(--bg)}
a{color:var(--cyan)}
.bgglow{background:radial-gradient(45% 40% at 12% 8%,rgba(255,60,172,.16),transparent 70%),
  radial-gradient(40% 38% at 90% 100%,rgba(0,229,255,.10),transparent 70%)}

/* brand + headings */
.brand b{font-weight:900;letter-spacing:2px;background:linear-gradient(90deg,#fff,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent}
header.site{background:linear-gradient(180deg,rgba(21,10,46,.85),transparent);border-bottom:2px solid var(--edge)}
.wrap h1{text-transform:uppercase;letter-spacing:2.5px;
  background:linear-gradient(100deg,#fff 10%,var(--pink) 55%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wrap h2{font-weight:900;text-transform:uppercase;letter-spacing:1.5px;border-left:4px solid var(--pink)}
.wrap h3{color:var(--cyan)}
footer.site{border-top:2px solid var(--edge)}
footer.site a{color:var(--cyan)}

/* blocks: radius 3, thick edge, hard offset shadow */
.faq .q{border-radius:3px;border:2px solid var(--edge);background:var(--panel);
  box-shadow:3px 3px 0 var(--pink)}
.faq .q h3{color:#fff}
.callout{border-radius:3px;border:2px solid var(--cyan);background:var(--panel);box-shadow:3px 3px 0 var(--pink)}
.wrap table{border-radius:3px;border:2px solid var(--edge);box-shadow:3px 3px 0 var(--pink)}
.wrap thead th{background:linear-gradient(90deg,rgba(255,60,172,.28),rgba(0,229,255,.14));border-bottom:2px solid var(--edge)}
.wrap tbody tr:nth-child(odd) td{background:rgba(30,17,64,.55)}
.wrap p.notice{border-radius:3px;border-width:2px}
.wrap p.sub{border-left-color:var(--edge)}
.wrap p.addr{border-left-color:var(--cyan)}

/* home page */
nav{background:linear-gradient(180deg,rgba(21,10,46,.85),transparent)}
.nlinks a.cta,.btn,.b-notify,.b-apple,.b-glass{border-radius:3px}
.nlinks a.cta{background:var(--pink);box-shadow:3px 3px 0 var(--cyan);border:2px solid #ff7cc6}
.b-notify{background:linear-gradient(135deg,var(--pink),#c21f86);border:2px solid #ff7cc6;box-shadow:4px 4px 0 var(--cyan)}
.b-notify:hover{box-shadow:6px 6px 0 var(--cyan)}
.b-apple{border:2px solid #fff;box-shadow:4px 4px 0 var(--pink)}
.b-apple:hover{box-shadow:6px 6px 0 var(--pink)}
.b-glass{border:2px solid var(--cyan);background:var(--panel);box-shadow:4px 4px 0 var(--pink)}
.pill{border-radius:3px;border:2px solid var(--edge);background:var(--panel)}
#heroFallback h1{background:linear-gradient(120deg,#fff,var(--pink) 50%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.split h2 .g{background:linear-gradient(110deg,#fff,var(--pink) 45%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sh h2{font-weight:900;text-transform:uppercase;letter-spacing:1.5px}
.card{border-radius:3px;border:2px solid var(--edge);background:var(--panel);box-shadow:4px 4px 0 var(--pink)}
.card:hover{box-shadow:6px 6px 0 var(--cyan)}
.card .ic{border-radius:3px;border:2px solid var(--edge);background:rgba(255,60,172,.16)}
@media(max-width:760px){.nlinks{background:rgba(21,10,46,.97);border-bottom:2px solid var(--edge)}}
}