/* Uniq colour system. Every page is drawn from two colours: --a (main) and --b
   (secondary). A theme sets those two; everything else is derived from them, so
   a person can also pick their own main colour. */
:root{
  color-scheme:light;
  --a:#7c5cfc; --b:#f472b6;
  --bg:color-mix(in srgb,var(--b) 2%,#fffdfe);
  --card:#ffffff;
  --ink:#2b2140; --ink-2:#4b4063; --muted:#8a7fa0;
  --line:color-mix(in srgb,var(--a) 9%,#f3eff5);
  --purple:var(--a);
  --purple-deep:color-mix(in srgb,var(--a) 76%,#150a33);
  --purple-soft:color-mix(in srgb,var(--a) 10%,#ffffff);
  --lilac:color-mix(in srgb,var(--a) 42%,#ffffff);
  --pink:var(--b);
  --pink-deep:color-mix(in srgb,var(--b) 72%,#4a0a2a);
  --pink-soft:color-mix(in srgb,var(--b) 14%,#ffffff);
  --rose-soft:color-mix(in srgb,var(--b) 7%,#ffffff);
  --tint:linear-gradient(135deg,color-mix(in srgb,var(--b) 7%,#fff),color-mix(in srgb,var(--a) 7%,#fff));
  --tint-line:color-mix(in srgb,var(--b) 18%,#f4eef6);
  --grad:linear-gradient(135deg,color-mix(in srgb,var(--b) 62%,#fff) 0%,color-mix(in srgb,var(--a) 70%,var(--b)) 55%,var(--a) 100%);
  --shadow:0 1px 2px color-mix(in srgb,var(--a) 7%,transparent),0 10px 30px -14px color-mix(in srgb,var(--a) 30%,transparent);
  --shadow-lg:0 2px 4px color-mix(in srgb,var(--a) 9%,transparent),0 22px 50px -20px color-mix(in srgb,var(--b) 34%,transparent);
  --r:20px;
}
:root[data-theme="lagoon"]{ --a:#0d9488; --b:#38bdf8; }
:root[data-theme="citrus"]{ --a:#ea580c; --b:#f59e0b; }
:root[data-theme="forest"]{ --a:#15803d; --b:#84cc16; }
:root[data-theme="slate"]{ --a:#475569; --b:#94a3b8; }

*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--bg)}
body{margin:0;color:var(--ink);font:15px/1.55 "Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;min-height:100vh;
  background:
    radial-gradient(900px 420px at -8% -6%, color-mix(in srgb,var(--b) 16%,transparent) 0%, transparent 62%),
    radial-gradient(820px 460px at 108% -4%, color-mix(in srgb,var(--a) 13%,transparent) 0%, transparent 60%),
    radial-gradient(700px 500px at 50% 118%, color-mix(in srgb,var(--b) 10%,transparent) 0%, transparent 60%),
    var(--bg);
  background-attachment:fixed}
a{color:inherit}
button,input,select,textarea{font:inherit}
.wrap{max-width:880px;margin:0 auto;padding:28px 16px 90px}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand i{width:22px;height:22px;border-radius:8px;background:var(--grad);display:inline-block;box-shadow:var(--shadow)}
h1{font-size:34px;line-height:1.12;letter-spacing:-.025em;margin:16px 0 6px;font-weight:800}
h1 em,h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:0;color:var(--muted);font-size:14.5px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:12px 0;box-shadow:var(--shadow)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row + .row{margin-top:10px}
.spacer{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;background:#fff;color:var(--ink-2);cursor:pointer}
.btn:hover{border-color:var(--lilac)}
.btn.primary{background:var(--grad);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 10px 20px -10px color-mix(in srgb,var(--a) 75%,transparent)}
.btn.primary:hover{filter:brightness(1.04)}
.btn.big{padding:12px 22px;font-size:15px}
.btn.on{background:var(--purple-soft);color:var(--purple-deep);border-color:var(--lilac)}
.btn.ghost{border-color:transparent;color:var(--muted);padding:8px 10px;background:none}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2);padding:6px 12px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--lilac)}
.chip[aria-pressed=true]{background:var(--purple-soft);border-color:var(--lilac);color:var(--purple-deep);font-weight:700}
.chip .n{opacity:.55;margin-left:5px;font-variant-numeric:tabular-nums;font-weight:500}
.field{display:block;margin:12px 0 0}
.field > span{display:block;font-size:12px;color:var(--muted);font-weight:700;margin:0 0 4px 4px}
.input,.field input[type=text],.field input[type=email],.field input[type=url],.field textarea{width:100%;font-size:14.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 13px;outline:none}
.field textarea{min-height:92px;resize:vertical;line-height:1.5}
.input:focus,.field input:focus,.field textarea:focus{border-color:var(--lilac);box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 16%,transparent)}
.note{margin:16px 0 0;padding:11px 14px;border-radius:14px;background:var(--rose-soft);border:1px solid var(--tint-line);color:var(--pink-deep);font-size:13.5px}
.err{color:#b42318;font-size:13.5px;min-height:20px;margin-top:8px}
.muted{color:var(--muted)}
footer{margin-top:40px;color:var(--muted);font-size:12.5px;text-align:center}
@media (max-width:560px){ h1{font-size:28px} }
.consent{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:50;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;width:min(720px,calc(100vw - 24px));background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 16px;box-shadow:var(--shadow-lg);font-size:13px;color:var(--ink-2)}
.consent span{flex:1;min-width:220px}