/* Bigwave kit — Surfing Dog house style. Sharp but friendly: warm white, hairlines, one blue, one four-colour line. */
:root {
  --ground:#FBF8F2; --surface:#FFFFFF; --ink:#1F1D1A; --ink-2:#6E675D; --ink-3:#A39B8E; --hair:#E4DED3;
  --blue:#2C54D4; --orange:#FF7A1A; --yellow:#FFC222; --teal:#0FA3A3;
  --sans:"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --r:3px;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
       min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--blue); }
.topstripe { display:flex; height:3px; }
.topstripe i { flex:1; }
.topstripe i:nth-child(1){background:var(--orange)} .topstripe i:nth-child(2){background:var(--yellow)}
.topstripe i:nth-child(3){background:var(--teal)} .topstripe i:nth-child(4){background:var(--blue)}
.bar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 24px; }
.brand { font-weight:700; font-size:15px; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
.who { font-size:13px; color:var(--ink-2); }
.who a { color:var(--ink); text-decoration:none; }
.who a:hover { color:var(--blue); }
.email { color:var(--ink); }
.wrap { flex:1; width:100%; max-width:420px; margin:0 auto; padding:56px 24px 64px; }
.foot { text-align:center; color:var(--ink-3); font-size:12px; padding:24px; }
h1 { font-size:28px; font-weight:700; letter-spacing:-.03em; margin:0 0 6px; line-height:1.15; }
.lead { font-size:16px; color:var(--ink-2); margin:0 0 20px; }
.muted { color:var(--ink-2); font-size:15px; margin:0 0 22px; }
.small { font-size:13px; }
.ok { color:var(--teal); }
.notice { background:#FFF6D6; border:1px solid var(--hair); border-radius:var(--r); padding:10px 12px; font-size:14px; margin:0 0 16px; }
.card { background:transparent; }
.stack { display:flex; flex-direction:column; gap:16px; }
label { display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--ink-2); }
input { font-family:var(--sans); font-size:16px; padding:12px 14px; border:1px solid var(--hair); border-radius:var(--r); background:var(--surface); color:var(--ink); }
input::placeholder { color:var(--ink-3); }
input:focus { outline:none; border-color:var(--ink); }
input.code { font-size:24px; letter-spacing:8px; text-align:center; }
.btn { display:inline-block; font-family:var(--sans); font-weight:500; font-size:15px; padding:12px 18px; border:1px solid var(--ink); border-radius:var(--r);
       background:var(--ink); color:#fff; cursor:pointer; text-decoration:none; text-align:center; }
.btn:hover { background:var(--blue); border-color:var(--blue); }
form .btn { width:100%; }