/*
 * The checkout's own stylesheet, self-contained on purpose.
 *
 * The tokens are pinned.om's, copied rather than linked: a page that takes money must not fail
 * to render because another host is having a bad minute, and there is no webfont here for the
 * same reason. System faces only, which is what the product site uses anyway.
 */
:root {
  --indigo: #232C6B;
  --ink: #141A3A;
  --amber: #F5A524;
  --bg: #F3F4FA;
  --bg-panel: #FFFFFF;
  --fg: #141A3A;
  --line: rgba(20, 26, 58, 0.14);
  --muted: #4A5170;
  --shadow: 0 1px 2px rgba(20, 26, 58, .05), 0 18px 44px -22px rgba(20, 26, 58, .28);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141A3A;
    --bg-panel: #1B2350;
    --fg: #F3F4FA;
    --muted: #B6BCD6;
    --line: rgba(255, 255, 255, 0.18);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 560px; margin: 0 auto; padding: clamp(24px, 6vw, 64px) 20px 64px; }
a { color: inherit; }
h1 { font-size: clamp(28px, 5vw, 36px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px; }
.lede { color: var(--muted); margin: 0 0 28px; }
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 28px);
}
.price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; }
.price b { font-size: 30px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price span { color: var(--muted); font-size: 14px; }
label { display: block; font-weight: 600; margin: 18px 0 6px; }
input {
  width: 100%; padding: 12px 14px; font: inherit; color: inherit;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
}
input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
button {
  width: 100%; margin-top: 22px; padding: 14px 18px; font: 600 16px/1 var(--sans);
  color: #fff; background: var(--indigo); border: 0; border-radius: 10px; cursor: pointer;
}
button:hover { background: #2C3684; }
button[disabled] { opacity: .6; cursor: progress; }
.note { margin-top: 18px; color: var(--muted); font-size: 14px; }
.error {
  margin-top: 16px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(180, 40, 40, .4); background: rgba(180, 40, 40, .08);
}
.error:empty { display: none; }
/* The key is the deliverable, so it is selectable, monospaced and never truncated. */
.key {
  font: 13px/1.5 var(--mono); word-break: break-all; user-select: all;
  background: rgba(20, 26, 58, .06); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; margin: 14px 0;
}
@media (prefers-color-scheme: dark) { .key { background: rgba(255, 255, 255, .07); } }
footer { margin-top: 40px; color: var(--muted); font-size: 13px; }