:root{
  --blue:#2f7dff; --blue-d:#0a49c9; --sky:#6db4ff; --tq:#19d6b9; --tq2:#0fb3b0; --tq-ink:#0a6f86;
  --ink:#0c3a58; --mute:#4a7f9c; --mint:#58e6a8; --coral:#ff7b6b; --night:#04182e; --hl:#ffe600;
  --bad:#c42f5c; --ok:#0b8a79;
  --shadow:0 18px 40px -14px rgba(20,110,190,.38),0 6px 14px -6px rgba(20,110,190,.22);
  --inset:inset 0 -6px 12px rgba(10,110,160,.16),inset 0 6px 12px rgba(255,255,255,.9);
  --f:"Fredoka","Baloo 2","Arial Rounded MT Bold",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:400 17px/1.55 var(--f);
  background:linear-gradient(180deg,#eef7ff 0,#eafafb 40%,#c8f6e9 100%);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--blue-d);font-weight:600}
h1,h2,h3{font-family:var(--f);line-height:1.1;margin:0;letter-spacing:-.005em}
p{margin:0}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 22px}
:focus-visible{outline:3px solid var(--blue-d);outline-offset:3px;border-radius:8px}
.on-blue :focus-visible{outline-color:#fff}

/* floating bubbles */
.bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bubbles.fixed{position:fixed}
.bubbles i{--bc:255,255,255;position:absolute;bottom:-120px;border-radius:50%;
  background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.95),rgba(var(--bc),.30) 46%,rgba(var(--bc),.08) 72%);
  box-shadow:inset 0 0 14px rgba(var(--bc),.7),0 4px 14px rgba(var(--bc),.25);animation:rise linear infinite}
.bubbles i.t1{--bc:25,214,185}.bubbles i.t2{--bc:255,123,107}.bubbles i.t3{--bc:88,230,168}.bubbles i.t4{--bc:255,255,255}
@keyframes rise{to{transform:translateY(-125vh) translateX(26px)}}
@media (prefers-reduced-motion:reduce){.bubbles i{animation:none;bottom:auto;top:30%}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;font:600 18px/1 var(--f);
  padding:17px 30px;border-radius:999px;text-decoration:none;color:var(--tq-ink);transition:transform .12s;
  background:linear-gradient(180deg,#fff,#e2f2ff);box-shadow:0 12px 26px -10px rgba(20,110,190,.5),var(--inset)}
.btn:active{transform:scale(.97)}
.btn.go{color:#fff;background:radial-gradient(circle at 30% 20%,#9ff7e8 0,var(--tq) 45%,var(--blue) 125%);box-shadow:0 12px 26px -10px rgba(20,100,200,.6),var(--inset);text-shadow:0 1px 2px rgba(6,60,120,.35)}
.btn.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn.small{padding:12px 20px;font-size:16px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* top bar */
.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font:700 24px/1 var(--f);text-shadow:0 2px 10px rgba(0,40,120,.4)}
.brand img{width:42px;height:42px;filter:drop-shadow(0 4px 6px rgba(0,40,120,.3))}
.top nav{display:flex;align-items:center;gap:8px}
.top nav a.link{color:#fff;text-decoration:none;font-weight:600;padding:10px 14px;border-radius:999px}
.top nav a.link:hover{background:rgba(255,255,255,.16)}

/* wordmark, same treatment as the app */
.mark{position:relative;display:inline-block;padding:6px 10px;font:700 clamp(46px,13vw,84px)/1 var(--f);letter-spacing:.5px;
  filter:drop-shadow(0 10px 0 rgba(10,73,201,.22)) drop-shadow(0 16px 18px rgba(20,110,190,.38))}
.mark::before{content:attr(data-text);position:absolute;left:10px;top:6px;color:#fff;-webkit-text-stroke:.2em #fff;paint-order:stroke fill;white-space:nowrap}
.mark .lg{position:relative;display:inline-block;white-space:nowrap;
  background:linear-gradient(100deg,#0a49c9 0%,#2f7dff 22%,#19d6b9 46%,#58e6a8 62%,#ff7b6b 84%,#ff5d8a 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:shine 7s ease-in-out infinite alternate}
@keyframes shine{to{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.mark .lg{animation:none}}

/* cards used on account/legal pages */
.card{background:rgba(255,255,255,.9);border-radius:30px;padding:26px;box-shadow:var(--shadow),inset 0 2px 0 rgba(255,255,255,.9)}
label{display:block;font-weight:600;font-size:15px;margin:16px 0 6px}
input[type=email],input[type=password],input[type=text],input[type=number]{width:100%;padding:15px 18px;border-radius:20px;border:2px solid transparent;
  font:500 17px var(--f);color:var(--ink);background:#eef7ff;box-shadow:inset 0 3px 8px rgba(20,110,190,.16)}
input:focus{outline:none;border-color:var(--tq);background:#fff}
.msg{min-height:22px;margin-top:12px;font-weight:600;font-size:15px}
.msg.err{color:var(--bad)}.msg.ok{color:var(--ok)}
.fine{font-size:14px;color:var(--mute)}

/* footer */
footer.foot{position:relative;margin-top:0;padding:54px 0 36px;color:var(--ink)}
footer.foot .row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
footer.foot a{color:var(--tq-ink);text-decoration:none;font-weight:600}
footer.foot a:hover{text-decoration:underline}
footer.foot .links{display:flex;gap:22px;flex-wrap:wrap}