/* The public payment page. Its own stylesheet, not SPOC's: a customer
   should be served the smallest possible surface, and the internal app's
   CSS carries selectors for screens they will never see. Follows the same
   palette so it still looks like the company. */
:root {
  --bg: #f4f5fb; --panel: #fff; --border: #e3e4ef; --border-strong: #cfd1e3;
  --text: #1d2033; --text-dim: #6b6f88; --accent: #5b5bd6;
  --accent-strong: #4646c6; --red: #d92d20; --red-soft: #fee4e2;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14151f; --panel: #1d1f2d; --border: #2e3044; --border-strong: #41435c;
    --text: #e6e7f2; --text-dim: #9a9db6; --accent: #8385f0;
    --accent-strong: #9d9ffa; --red: #f97066; --red-soft: #45201f;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
}
#wrap { max-width: 620px; margin: 0 auto; padding: 32px 18px 56px; }
#head { text-align: center; margin-bottom: 22px; }
#logo { max-height: 64px; max-width: 260px; margin-bottom: 12px; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 18px; margin: 0 0 8px; }
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  box-shadow: 0 1px 2px rgba(20, 22, 40, .05), 0 4px 16px rgba(20, 22, 40, .06);
}
.lede { margin: 0 0 18px; color: var(--text-dim); }
fieldset { border: 0; padding: 0; margin: 0 0 22px; }
legend {
  padding: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px;
}
label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
input {
  display: block; width: 100%; margin-top: 5px; font: inherit; font-weight: 400;
  color: var(--text); background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 11px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: var(--accent); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .two { grid-template-columns: 1fr; } }
.req { color: var(--red); }
.hint { font-size: 12.5px; font-weight: 400; color: var(--text-dim); margin: 4px 0 0; }
.centre { text-align: center; margin-top: 14px; }
.err {
  background: var(--red-soft); color: var(--red); border-radius: 8px;
  padding: 10px 12px; font-size: 13.5px; margin: 0 0 14px; font-weight: 600;
}
button {
  width: 100%; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 8px; padding: 11px 16px;
}
button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button:disabled { opacity: .6; cursor: not-allowed; }
#foot { text-align: center; color: var(--text-dim); font-size: 13px; margin-top: 20px; }