:root {
  /* Read off the live site's computed styles, not guessed from its stylesheet. */
  --ground: #000000;
  --card: #131313;
  --line: rgba(255,255,255,.08);
  --line-hi: #2e2e2e;
  --ink: #ffffff;
  --ink-2: #dcdcdc;
  --ink-3: #b3b3b3;
  --ink-4: #6e6e6e;
  --accent: #f09050;
  --accent-hi: #f4a86e;
  --bad: #e23636;
  --good: #7be8a0;
  --radius: 10px;
  --field: #0d0d0d;
}

* { box-sizing: border-box; }

/* The [hidden] attribute is only a UA style of display:none, so ANY class that
   sets its own display (.choice, .tabs, .lang, .consent, .row) silently beats
   it and the element stays on screen even though el.hidden is true. This makes
   the attribute mean what everyone assumes it means. */
[hidden] { display: none !important; }


html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  /* the site's two orange washes */
  background-image:
    radial-gradient(circle at 12% 0%, rgba(240,144,80,.10), rgba(0,0,0,0) 40%),
    radial-gradient(circle at 88% 110%, rgba(240,144,80,.06), rgba(0,0,0,0) 45%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }


.shell {
  width: 100%; max-width: 460px;
  margin: 0 auto; padding: 44px 20px 72px;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.masthead img { display: block; width: 150px; max-width: 46vw; height: auto; }

.lang {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.lang button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 7px 13px;
  cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--accent); color: #131313; }
.lang button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-rule { height: 3px; background: var(--accent); }
.card-body { padding: 26px 24px 28px; }

.tabs {
  display: flex;
  gap: 4px;
  padding: 16px 16px 0;
  border-bottom: 1px solid var(--line);
}
.tabs button {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px 12px;
  cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

h1 {
  margin: 0 0 8px;
  font-size: 26px;
  letter-spacing: -.32px;
  line-height: 1.25;
  font-weight: 800;
  text-wrap: balance;
}
.sub { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }

.field { margin-bottom: 15px; }
.field > label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="date"] {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--line-hi);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  padding: 12px 13px;
}
input::placeholder { color: var(--ink-4); }
input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input[aria-invalid="true"] { border-color: var(--bad); }
input[type="date"] { color-scheme: dark; }

.row { display: flex; gap: 12px; }
.row .field { flex: 1; }

.hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-4); }

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.consent input { margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.consent a { color: var(--accent-hi); }

button.primary {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #131313;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 14px;
  margin-top: 18px;
  cursor: pointer;
}
button.primary:hover { background: var(--accent-hi); }
button.primary:disabled { opacity: .5; cursor: not-allowed; }
button.primary:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

button.link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent-hi);
  font: inherit;
  font-size: 13px;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.msg {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  border: 1px solid;
}
.msg[data-kind="error"] { background: rgba(226,54,54,.1); border-color: rgba(226,54,54,.45); color: #ffb4b4; }
.msg[data-kind="ok"]    { background: rgba(123,232,160,.09); border-color: rgba(123,232,160,.4); color: var(--good); }
.msg[data-kind="info"]  { background: rgba(240,144,80,.09); border-color: rgba(240,144,80,.4); color: var(--accent-hi); }
.msg[hidden] { display: none; }

.foot { margin: 16px 4px 0; font-size: 12px; line-height: 1.6; color: var(--ink-4); text-align: center; }
.foot a { color: var(--ink-3); }

.center { text-align: center; margin-top: 16px; }

@media (max-width: 420px) {
  .row { flex-direction: column; gap: 0; }
  .card-body { padding: 22px 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- provider chooser ---- */
.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  margin-bottom: 11px;
  background: transparent;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.choice:hover { border-color: #4a4a4a; background: rgba(255,255,255,.03); }
.choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice svg { width: 18px; height: 18px; flex: none; }
.choice.filled {
  background: var(--accent);
  border-color: var(--accent);
  color: #131313;
  font-weight: 700;
}
.choice.filled:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--ink-4);
  font-size: 12px;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.spinner {
  width: 30px; height: 30px; margin: 22px auto 6px;
  border: 3px solid var(--line-hi);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }