:root {
  --bg: #08090b; --card: #0d1014; --line-strong: #2a323d;
  --input: #141922; --text: #e6edf3; --body: #b9c2cc; --dim: #8b949e;
  /* #7c3aed, not #8b5cf6: white on it is 5.70:1, which clears AA. */
  --brand: #7c3aed; --brand-strong: #6d28d9; --accent: #c9aeff;
  --green: #7ee787; --red: #f85149;
  --sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
main {
  position: relative; z-index: 1; width: 100%; max-width: 680px;
  margin: 0 auto; padding: clamp(2.5rem, 12vh, 5.5rem) 16px 3rem;
}

.lockup { display: block; margin: 0 auto 1.75rem; width: auto;
          height: clamp(35px, 8.5vw, 48px); max-width: 100%; overflow: visible; }
/* Only the V glows. On the wordmark the haloes merge between letters and read as a slab. */
.lockup .mark { filter: drop-shadow(0 0 13px rgba(139, 92, 246, .5)); }
.lede { margin: 0; text-align: center; color: var(--body);
        font-size: clamp(1rem, 3.4vw, 1.25rem); text-wrap: balance; }

form { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
       margin: 2rem 0 0; }
/* An author `display` beats the UA sheet's [hidden] rule, so say it again. */
form[hidden] { display: none; }
#continue-form .switch { flex-basis: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
input[type=email], input.code {
  flex: 0 1 17rem; min-width: 0; font: inherit; font-size: .9375rem; color: var(--text);
  background: var(--input); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: .55rem .75rem;
}
input[type=email]::placeholder, input.code::placeholder { color: var(--dim); opacity: 1; }
input[type=email][aria-invalid="true"], input.code[aria-invalid="true"] { border-color: var(--red); }
input[type=email]:focus-visible, input.code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button {
  font: inherit; font-weight: 600; cursor: pointer; color: #fff;
  background: var(--brand); border: 1px solid var(--brand); border-radius: 10px;
  padding: .5rem .875rem; font-size: .875rem;
}
button:hover:not(:disabled) { background: var(--brand-strong); border-color: var(--brand-strong); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Explicit colours rather than opacity, so the label stays readable. */
button:disabled { background: #2f2a45; border-color: #2f2a45; color: var(--body); cursor: default; }

.note { margin: .75rem 0 0; text-align: center; font-size: .8125rem; color: var(--dim);
        min-height: 1.5rem; }
.note.err { color: var(--red); }
.note.ok { color: var(--green); }

.product-shot { max-width: 560px; margin: 3rem auto 0; }
.product-shot img {
  display: block; width: 100%; height: auto; border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.product-shot figcaption { margin: .75rem 0 0; color: var(--dim); text-align: center;
                            font-size: .8125rem; }
.mobile-shot { max-width: 220px; margin: 3rem auto 0; }
.mobile-shot img {
  display: block; width: 100%; height: auto; border: 1px solid var(--line-strong);
  border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.mobile-shot figcaption { margin: .75rem 0 0; color: var(--dim); text-align: center;
                          font-size: .8125rem; }


/* The top-right link on every page: "Log in" on the homepage. */
.top { position: absolute; top: 0; right: 0; z-index: 2; margin: 0; padding: 1rem 16px;
       font-size: .875rem; }
.top a, button.link { color: var(--body); text-decoration: none; }
.top a:hover, button.link:hover:not(:disabled) { color: var(--text); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* /login and /account: the lockup is a link home, smaller than on the homepage. */
.home { display: block; width: max-content; max-width: 100%; margin: 0 auto 1.75rem; }
.home .lockup { margin: 0; height: clamp(28px, 6.2vw, 34px); }
input.code { flex-basis: 9rem; letter-spacing: .2em; }
.switch { margin: .5rem 0 0; text-align: center; }
button.link { background: none; border: 0; padding: 0; font-weight: 400; font-size: .8125rem; }
button.link:hover:not(:disabled) { background: none; }

button.quiet { background: transparent; border-color: var(--line-strong); color: var(--body); }
button.quiet:hover:not(:disabled) { background: var(--input); border-color: var(--dim); color: var(--text); }

.panel { margin: 1.5rem 0 0; padding: 1rem 1.25rem; background: var(--card);
         border: 1px solid var(--line-strong); border-radius: 14px; }
.panel h2 { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; color: var(--dim);
            text-transform: uppercase; letter-spacing: .06em; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; gap: .75rem; padding: .625rem 0;
           border-top: 1px solid var(--line-strong); }
.rows li:first-child { border-top: 0; }
.rows .what { flex: 1; min-width: 0; }
.rows .name { overflow-wrap: anywhere; }
.rows .meta, .rows .empty { font-size: .8125rem; color: var(--dim); }
.tag { margin-left: .5rem; font-size: .75rem; color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2rem 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .lockup, .lede, form { animation: rise .5s cubic-bezier(.2, .7, .3, 1) backwards; }
  .lede { animation-delay: .06s; }
  form { animation-delay: .12s; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}