:root {
  color-scheme: light dark;
  --bg: #f6f4ef;
  --fg: #1c1f24;
  --muted: #5d6470;
  --card: #ffffff;
  --line: #d8d2c6;
  --accent: #1f5f4a;
  --accent-fg: #ffffff;
  --danger: #8a2424;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171b;
    --fg: #e8e6e1;
    --muted: #a4abb6;
    --card: #1d2127;
    --line: #353b44;
    --accent: #63c3a4;
    --accent-fg: #0d1512;
    --danger: #ff8b8b;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }

/* Self-hosted Space Grotesk (SIL OFL) for the brand, nav and buttons. No CDN:
   the WOFF2 lives in /static/fonts and the CSP only allows font-src 'self'. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/SpaceGrotesk.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header.site {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(6px);
}
header.site .brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--display); font-weight: 700; font-size: 1.22rem;
  letter-spacing: -0.015em; text-decoration: none; color: var(--fg);
  margin-right: auto;
}
.brand-mark {
  width: 20px; height: 20px; border-radius: 50%;
  /* onion layers: three concentric rings, the innermost filled */
  background:
    radial-gradient(circle at center,
      var(--fg) 0 3.5px,
      transparent 3.5px 5px,
      var(--fg) 5px 7px,
      transparent 7px 9px,
      color-mix(in srgb, var(--fg) 26%, transparent) 9px 10px,
      transparent 10px);
}
header.site nav {
  display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center;
  font-family: var(--display); font-weight: 500;
}
header.site nav a {
  text-decoration: none; color: var(--muted);
  padding: 0.42rem 0.85rem; border-radius: 999px; font-size: 0.95rem;
}
header.site nav a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
header.site .bar form.lang { margin-left: 0.4rem; }
header.site .lang select { width: auto; padding: 0.35rem 0.5rem; border-radius: 999px; font-size: 0.9rem; }
header.site .lang .small { display: none; }
header.site .lang button { margin-top: 0; padding: 0.38rem 0.75rem; font-size: 0.9rem; border-radius: 999px; }
header.site, footer.site { padding: 0.75rem 1.2rem; background: color-mix(in srgb, var(--card) 90%, transparent); border-bottom: 1px solid var(--line); }
footer.site { border-top: 1px solid var(--line); border-bottom: 0; color: var(--muted); font-size: 0.85rem; }
footer.site { border-top: 1px solid var(--line); border-bottom: 0; color: var(--muted); font-size: 0.85rem; }
header.site .bar { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; max-width: 1100px; margin: 0 auto; }
header.site .brand { font-weight: 700; text-decoration: none; color: var(--fg); margin-right: auto; }header.site nav { display: flex; gap: 0.8rem; flex-wrap: wrap; }
main { max-width: 1100px; margin: 1.2rem auto; padding: 0 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
label { display: block; margin: 0.6rem 0 0.2rem; font-weight: 600; }
input, select, textarea, button { font: inherit; }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
  width: 100%; padding: 0.5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg);
}
button, .button {
  display: inline-block; margin-top: 0.6rem; padding: 0.52rem 1.05rem; border: 1px solid var(--accent);
  border-radius: 999px; background: var(--accent); color: var(--accent-fg); cursor: pointer; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem; line-height: 1.4;
}
button.secondary, .button.secondary { background: transparent; color: var(--accent); }
button.secondary:hover, .button.secondary:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
button:hover, .button:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); }
header.site button, header.site .button { margin-top: 0; }
h1, h2, h3 { line-height: 1.25; font-family: var(--display); letter-spacing: -0.01em; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.45rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.85rem; color: var(--muted); }
.notice, .error { padding: 0.7rem 1rem; border-radius: 6px; border: 1px solid var(--line); margin-bottom: 1rem; }
.notice { background: #e5f4ec; color: #143d2e; }
.error { background: #fbe8e8; color: #6b1b1b; }
@media (prefers-color-scheme: dark) {
  .notice { background: #123026; color: #b9ecd8; }
  .error { background: #35191b; color: #ffc0c0; }
}
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8rem; }
.unread { font-weight: 700; }
.message-body { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.message-body iframe { width: 100%; min-height: 480px; border: 0; background: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.actions form { margin: 0; }
form.inline { display: inline; margin: 0; }
.pagination { display: flex; gap: 1rem; margin-top: 1rem; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0.1rem 0.3rem; overflow-wrap: anywhere; }
pre { padding: 0.7rem; overflow-x: auto; }
.qr svg { max-width: 220px; height: auto; }
.qr { background: #ffffff; padding: 0.7rem; border-radius: 10px; display: inline-block; border: 1px solid var(--line); }
.qr svg { display: block; }
.address-box {
  display: inline-block; max-width: 100%; font-size: 1rem; line-height: 1.5;
  word-break: break-all; padding: 0.6rem 0.8rem;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--bg);
}
.pay-amount strong code { font-size: 1.05rem; }
.pay-amount .small { display: block; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Payment page: a "payment slip" — one airmail-edged card carrying the
   invoice data, the QR and the address, plus a quiet history column.
   --------------------------------------------------------------------------- */
.pay-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .pay-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.pay-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 0 1.4rem 1.2rem;
}
.pay-card .airmail-band { margin: 0 -1.4rem 1.1rem; border-radius: 12px 12px 0 0; }
.pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pay-head h1 { margin: 0; font-size: 1.5rem; }
.pay-head .small { margin: 0 0 0.15rem; }
.pay-status {
  display: inline-block; padding: 0.14rem 0.75rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; border: 1px solid var(--line); color: var(--muted);
}
.pay-status-pending { color: #8a6d1f; border-color: #d8b65a; background: #faf3df; }
.pay-status-confirming, .pay-status-underpaid { color: #8a6d1f; border-color: #d8b65a; background: #faf3df; }
.pay-status-paid { color: #14532d; border-color: #7cc39a; background: #e7f6ee; }
.pay-status-overpaid { color: #14532d; border-color: #7cc39a; background: #e7f6ee; }
.pay-status-expired, .pay-status-failed { color: #7b1d1d; border-color: #d98d8d; background: #fbeaea; }
@media (prefers-color-scheme: dark) {
  .pay-status-pending, .pay-status-confirming, .pay-status-underpaid { color: #e8cf8a; border-color: #8a7434; background: #2b2413; }
  .pay-status-paid, .pay-status-overpaid { color: #a7e3c0; border-color: #2f6b4a; background: #12291c; }
  .pay-status-expired, .pay-status-failed { color: #f0a8a8; border-color: #7c3b3b; background: #2c1515; }
}
.pay-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; margin: 0 0 1rem; }
.pay-rows > div { border-left: 3px solid var(--line); padding-left: 0.7rem; }
.pay-rows dt { font-size: 0.8rem; color: var(--muted); }
.pay-rows dd { margin: 0; font-weight: 700; font-family: var(--display); }
.pay-section { border-top: 1px dashed var(--line); padding-top: 1rem; }
.pay-exact { margin: 0 0 0.8rem; }
.pay-exact strong code { font-size: 1.15rem; }
.pay-exact .small { display: block; }
.pay-qr-row { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.8rem; }
.pay-qr-row .qr { flex: none; }
.pay-addr { min-width: 0; flex: 1 1 260px; }
.pay-foot { border-top: 1px dashed var(--line); margin-top: 1rem; padding-top: 0.8rem; }
.pay-history table { margin-top: 0.6rem; }
.lang { display: flex; gap: 0.4rem; align-items: center; }
.lang select { width: auto; }
.narrow { max-width: 640px; }
.mid { max-width: 520px; }

/* ---------------------------------------------------------------------------
   Landing page. The one authored motif is the airmail edge: a chevron band in
   postal red and navy, the way airmail envelopes are edged. Used twice (hero
   and final call) and nowhere else. No webfonts, no scripts, no images.
   --------------------------------------------------------------------------- */
.landing { max-width: 960px; }
.landing h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.02em; margin: 0.4rem 0 0.6rem; }
.landing h2 { font-size: 1.35rem; margin: 0 0 0.6rem; }
.landing h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.landing .lead { max-width: 62ch; font-size: 1.08rem; }
.airmail-band {
  height: 7px;
  margin-bottom: 1.1rem;
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg,
    #b3413d 0 14px, #f7f4ec 14px 24px,
    #1d3a5f 24px 38px, #f7f4ec 38px 48px
  );
}
@media (prefers-color-scheme: dark) {
  .airmail-band {
    background: repeating-linear-gradient(
      -45deg,
      #c7514d 0 14px, #14171b 14px 24px,
      #3d6699 24px 38px, #14171b 38px 48px
    );
  }
}
.hero { padding: 0.6rem 0 1.4rem; }
.hero-addr { margin: 0 0 0.8rem; }
.hero-addr code { background: none; border: 0; padding: 0; color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.cta-row .button { margin-top: 0; padding: 0.65rem 1.4rem; }
.onion-card {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 0.9rem 1.1rem; margin: 0 0 2rem;
  background: var(--card);
}
.onion-addr { display: inline-block; max-width: 100%; font-size: 0.9rem; word-break: break-all; }
.features { margin-bottom: 2.2rem; }
.feature-list { margin: 0; display: grid; gap: 0.8rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .feature-list { grid-template-columns: 1fr 1fr; } }
.feature-list dt { font-weight: 700; }
.feature-list dd { margin: 0.15rem 0 0; color: var(--muted); }
.pricing { margin-bottom: 2.2rem; }
.plan-row { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 0.8rem; }
@media (min-width: 700px) { .plan-row { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan {
  position: relative;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.1rem 1.2rem; background: var(--card);
  display: flex; flex-direction: column; gap: 0.3rem;
}
.plan .button { margin-top: auto; align-self: start; }
.plan-featured { border-color: var(--accent); border-width: 2px; }
.plan-tag {
  position: absolute; top: -0.85rem; right: 1rem; margin: 0;
  background: var(--accent); color: var(--accent-fg);
  border-radius: 999px; padding: 0.05rem 0.7rem; font-size: 0.78rem;
}
.price { font-size: 1.5rem; font-weight: 700; margin: 0; }
.plan-specs { margin: 0.2rem 0 0.9rem; padding-left: 1.1rem; }
.plan-specs li { margin: 0.15rem 0; }
.trust { margin-bottom: 2.2rem; }
.trust-list { margin: 0; padding-left: 1.2rem; columns: 1; }
@media (min-width: 700px) { .trust-list { columns: 2; } }
.trust-list li { margin-bottom: 0.45rem; break-inside: avoid; }
.final {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0 0.4rem;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  a, button { transition: background-color 120ms ease, border-color 120ms ease; }
}

/* ---------------------------------------------------------------------------
   Registration: form + plan tab sidebar. Tabs are pure CSS (radio + sibling
   selectors); the checked radio is the "plan" field posted with the form.
   --------------------------------------------------------------------------- */
.register-grid {
  display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 860px) { .register-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); } }
.reg-plans { position: relative; }
.reg-plans input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
}
.plan-tabs { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0.4rem 0 0.9rem; }
.plan-tabs label {
  cursor: pointer; padding: 0.45rem 1.05rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem;
  color: var(--muted);
}
.plan-tabs label:hover { color: var(--fg); border-color: var(--muted); }
#plan-BASIC:checked ~ .plan-tabs label[for="plan-BASIC"],
#plan-PLUS:checked ~ .plan-tabs label[for="plan-PLUS"],
#plan-PRO:checked ~ .plan-tabs label[for="plan-PRO"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
}
#plan-BASIC:focus-visible ~ .plan-tabs label[for="plan-BASIC"],
#plan-PLUS:focus-visible ~ .plan-tabs label[for="plan-PLUS"],
#plan-PRO:focus-visible ~ .plan-tabs label[for="plan-PRO"] {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.plan-panels > .plan-panel { display: none; }
#plan-BASIC:checked ~ .plan-panels #panel-BASIC,
#plan-PLUS:checked ~ .plan-panels #panel-PLUS,
#plan-PRO:checked ~ .plan-panels #panel-PRO { display: block; }
.plan-panel .price { font-size: 1.6rem; font-weight: 700; font-family: var(--display); margin: 0 0 0.2rem; }