:root{
  --red:#d64550; --red-hover:#b83a44; --gold:#fcbb58; --done:#0f3b2e;
  --text:#1a1a1a; --text-sec:#4a4a4a; --text-muted:#6b6b6b;
  --border:#e8e6e1; --bg:#fafaf8; --surface:#ffffff; --surface-alt:#f0efec;
  --fs-xs:14px; --fs-sm:15px; --fs-base:17px; --fs-md:21px; --fs-lg:27px; --fs-xl:33px; --fs-2xl:44px;
  --font:'Cabinet Grotesk','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --r-card:14px; --r-pill:100px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --shadow:0 24px 60px -28px rgba(24,24,24,.22), 0 2px 6px rgba(24,24,24,.05);
  /* gradient field */
  --g1:rgba(214,69,80,.58); --g2:rgba(252,187,88,.54); --g3:rgba(15,59,46,.40); --g4:rgba(139,26,34,.32);
  --grain:.26; --grain-blend:multiply; --fieldblur:46px;
}
body.dark{
  --text:#f2f1ec; --text-sec:#b5b3ab; --text-muted:#8a887f;
  --border:#3a3a36; --bg:#161615; --surface:#232321; --surface-alt:#2e2e2b;
  --shadow:0 30px 70px -30px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.4);
  /* dark: much quieter, and the grain is turned up because noise is what
     breaks up the banding you get from a wide, low-contrast gradient */
  --g1:rgba(214,69,80,.20); --g2:rgba(252,187,88,.10); --g3:rgba(46,92,78,.16); --g4:rgba(139,26,34,.20);
  --grain:.16; --grain-blend:overlay; --fieldblur:34px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  font-size:var(--fs-base);line-height:1.65;-webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow-x:hidden;
}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-hover);text-decoration:underline}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}

/* ---------- the moving gradient field ---------- */
.field{position:fixed;inset:-30vmax;z-index:0;pointer-events:none;filter:blur(var(--fieldblur)) saturate(108%)}
body.dark .field{display:none}

/* Dark mode has no gradient at all. A wide, low-contrast gradient bands on
   most displays whatever you do to it, so the dark background is a flat
   surface with a drifting field of discrete dots over it. Nothing to band. */
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
body.dark .stars{display:block}
.star{position:absolute;border-radius:50%;will-change:transform,opacity}
@keyframes twinkle{0%,100%{opacity:var(--o0)}50%{opacity:var(--o1)}}
/* A shooting star: a bright head with a tapered trail behind it. Rare enough
   that only somebody actually looking at the page will catch one. */
.shoot{position:absolute;height:1.6px;border-radius:2px;transform-origin:0 50%;opacity:0;
  will-change:transform,opacity;pointer-events:auto;cursor:crosshair}
.shoot::after{content:'';position:absolute;inset:-14px -10px}
.stars{pointer-events:none}
body.dark .stars .shoot{pointer-events:auto}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:5;
  background:rgba(24,24,24,.94);color:#f2f1ec;border:1px solid rgba(252,187,88,.5);
  border-radius:var(--r-pill);padding:12px 22px;font-size:var(--fs-sm);font-weight:600;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.6);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast .g{color:var(--gold)}
@keyframes float{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(var(--dx),var(--dy),0)}}
.blob{position:absolute;border-radius:50%;will-change:transform}
/* multi-stop falloffs, because a two-stop radial banded badly on wide screens */
.b1{width:64vmax;height:64vmax;left:-8vmax;top:-10vmax;
  background:radial-gradient(circle at 50% 50%,var(--g1) 0%,var(--g1) 8%,rgba(214,69,80,0) 62%);
  animation:drift1 26s ease-in-out infinite alternate}
.b2{width:56vmax;height:56vmax;right:-10vmax;top:4vmax;
  background:radial-gradient(circle at 50% 50%,var(--g2) 0%,var(--g2) 8%,rgba(252,187,88,0) 62%);
  animation:drift2 31s ease-in-out infinite alternate}
.b3{width:60vmax;height:60vmax;left:12vmax;bottom:-16vmax;
  background:radial-gradient(circle at 50% 50%,var(--g3) 0%,var(--g3) 8%,rgba(15,59,46,0) 64%);
  animation:drift3 23s ease-in-out infinite alternate}
.b4{width:44vmax;height:44vmax;right:8vmax;bottom:-8vmax;
  background:radial-gradient(circle at 50% 50%,var(--g4) 0%,var(--g4) 8%,rgba(139,26,34,0) 66%);
  animation:drift4 35s ease-in-out infinite alternate}
@keyframes drift1{0%{transform:translate3d(-4vmax,-2vmax,0) scale(1)}100%{transform:translate3d(16vmax,13vmax,0) scale(1.2)}}
@keyframes drift2{0%{transform:translate3d(3vmax,0,0) scale(1.12)}100%{transform:translate3d(-18vmax,15vmax,0) scale(.88)}}
@keyframes drift3{0%{transform:translate3d(0,3vmax,0) scale(.92)}100%{transform:translate3d(15vmax,-15vmax,0) scale(1.22)}}
@keyframes drift4{0%{transform:translate3d(2vmax,2vmax,0) scale(1.16)}100%{transform:translate3d(-14vmax,-11vmax,0) scale(.86)}}

/* ---------- grain, over the gradient and under the content ---------- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}

/* a soft wash behind the card, plus a vignette for depth at the edges */
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%,rgba(250,250,248,.72),rgba(250,250,248,.18) 62%,transparent 80%),
    radial-gradient(ellipse 120% 100% at 50% 50%,transparent 52%,rgba(24,24,24,.10) 100%)}
body.dark .veil{background:none}

@media (prefers-reduced-motion:reduce){
  .blob,.star{animation:none !important}
  .shoot{display:none !important}
  .vhs .lines{animation:none !important}
  .vhs .band{display:none}
}

/* ---------- VHS tracking, light mode only ----------
   Two parts, the way a worn tape actually looks: fine scanlines that crawl,
   and one soft tracking band that sweeps down the picture with a little
   colour bleed at its edges. Both kept faint enough to read as texture. */
.vhs{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
body.dark .vhs{display:none}
.vhs .lines{position:absolute;inset:-6px 0;
  background-image:repeating-linear-gradient(to bottom,
    rgba(24,24,24,.030) 0px, rgba(24,24,24,.030) 1px,
    rgba(24,24,24,0) 1px, rgba(24,24,24,0) 4px);
  animation:crawl 6.5s linear infinite}
@keyframes crawl{from{background-position:0 0}to{background-position:0 4px}}
.vhs .band{position:absolute;left:-2%;width:104%;height:118px;filter:blur(1.4px);
  background:linear-gradient(to bottom,
    rgba(214,69,80,0) 0%,
    rgba(214,69,80,.055) 14%,
    rgba(255,255,255,.34) 42%,
    rgba(255,255,255,.26) 60%,
    rgba(10,148,168,.05) 86%,
    rgba(10,148,168,0) 100%);
  animation:track 17s linear infinite}
@keyframes track{from{top:-16%}to{top:114%}}
.vhs .band.b2{height:52px;opacity:.55;animation-duration:29s;animation-delay:-11s}

/* ---------- layout ---------- */
.wrap{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:var(--sp-6)}
.topbar{display:flex;justify-content:flex-end}
.iconbtn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.62);border:1px solid var(--border);
  display:grid;place-items:center;color:var(--text-sec);cursor:pointer;padding:0;backdrop-filter:blur(8px)}
body.dark .iconbtn{background:rgba(35,35,33,.62)}
.iconbtn:hover{border-color:var(--red);color:var(--red)}
.iconbtn svg{width:18px;height:18px}

.centre{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-6) 0}
.panel{width:100%;max-width:452px}

.mark{text-align:center;margin-bottom:var(--sp-8)}
.dotrow{display:flex;justify-content:center;margin-bottom:var(--sp-4)}
.logo{width:34px;height:auto;display:block}
.wordmark{font-size:var(--fs-2xl);line-height:1.05;color:var(--text);margin:0}
.wordmark .a{font-family:var(--font);font-weight:700;letter-spacing:-2.4px}
.wordmark .b{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.085em;font-size:.95em;margin-left:.10em;padding-right:.09em}
.mark p{margin:var(--sp-3) 0 0;color:var(--text-muted);font-size:var(--fs-sm);letter-spacing:1.4px;text-transform:uppercase;font-weight:600}

.card{background:rgba(255,255,255,.82);border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--sp-8);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(120%)}
body.dark .card{background:rgba(35,35,33,.78)}

label.fl{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-sec);margin-bottom:var(--sp-2)}
.f+.f{margin-top:var(--sp-5)}
input[type=email],input[type=password],input[type=text]{
  width:100%;font-family:var(--font);font-size:var(--fs-base);color:var(--text);
  padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(214,69,80,.18)}
.pw{position:relative}
.pw input{padding-right:76px}
.reveal{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
  font-family:var(--font);font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);cursor:pointer;padding:8px 10px;border-radius:8px}
.reveal:hover{color:var(--red)}

.row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-4);flex-wrap:wrap}
.cbx{display:flex;gap:var(--sp-3);align-items:center;cursor:pointer;font-size:var(--fs-sm);color:var(--text-sec)}
.cbx input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:2px solid var(--border);border-radius:6px;
  background:var(--surface);flex:none;cursor:pointer;display:grid;place-items:center;margin:0}
.cbx input:hover{border-color:var(--red)}
.cbx input:checked{background:var(--red);border-color:var(--red)}
.cbx input:checked::after{content:'';width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translateY(-1px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;
  font-family:var(--font);background:var(--red);color:#fff;border:1px solid var(--red);
  padding:15px 26px;border-radius:var(--r-pill);font-size:var(--fs-base);font-weight:600;cursor:pointer;line-height:1.2;min-height:52px}
.btn:hover{background:var(--red-hover);border-color:var(--red-hover);color:#fff;text-decoration:none}
.btn.ghost{background:rgba(255,255,255,.45);color:var(--text);border:1px solid var(--border)}
body.dark .btn.ghost{background:rgba(35,35,33,.4)}
.btn.ghost:hover{border-color:var(--text-sec);background:rgba(255,255,255,.7);color:var(--text)}
body.dark .btn.ghost:hover{background:rgba(46,46,43,.7)}

.sep{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-6) 0;color:var(--text-muted);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:1.4px;font-weight:600}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--border)}

.hint{font-size:var(--fs-sm);color:var(--text-muted);margin:var(--sp-3) 0 0;text-align:center}
.err{display:none;margin-bottom:var(--sp-5);border-left:3px solid var(--red);background:rgba(214,69,80,.08);
  padding:var(--sp-3) var(--sp-4);border-radius:0 8px 8px 0;font-size:var(--fs-sm);color:var(--text-sec)}
.err.on{display:block}
.ok{border-left:3px solid var(--done);background:rgba(15,59,46,.09);padding:var(--sp-4);border-radius:0 8px 8px 0;
  font-size:var(--fs-sm);color:var(--text-sec);margin-top:var(--sp-6)}
body.dark .ok{border-left-color:#4fae86;background:rgba(79,174,134,.14)}
.linkbtn{background:none;border:none;padding:0;font-family:var(--font);font-size:var(--fs-sm);font-weight:600;
  color:var(--red);cursor:pointer}
.linkbtn:hover{color:var(--red-hover);text-decoration:underline}
.ch{font-size:var(--fs-md);font-weight:700;margin:0;color:var(--text);letter-spacing:-.4px}
.cs{font-size:var(--fs-sm);color:var(--text-muted);margin:var(--sp-2) 0 0;line-height:1.55}

footer{position:relative;z-index:2;text-align:center;padding:var(--sp-6);font-size:var(--fs-xs);color:var(--text-muted)}
footer .links{display:flex;gap:var(--sp-5);justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-2)}
footer a{color:var(--text-muted)}
footer a:hover{color:var(--red)}

@media (max-width:520px){
  :root{--fs-2xl:34px}
  .card{padding:var(--sp-6)}
  .wrap{padding:var(--sp-4)}
}