/* ============================================================================
   STARFALL TERMINAL — terminal-pages.css
   ----------------------------------------------------------------------------
   The skin that brings login.html, join-form.html and forbidden.html in line
   with the rebuilt landing page (index.html). It replaces the previous "Nova"
   overlay: those three pages no longer load css/nova*.css or js/nova*.js, so
   everything here sits on top of their own inline styles + maintenance.css.

   Scope: `body.sf-page` (the class those three pages still carry) so this file can
   never leak into the landing page.

   01. tokens + shell        04. forbidden · SEC_CHECK_FAILED
   02. login desk            05. responsive + motion
   03. premium / maintenance
   ========================================================================== */

/* ==========================================================================
   01. TOKENS + SHELL
   ========================================================================== */
:root {
  --tp-bg: #04060c;
  --tp-bg-2: #070b14;
  --tp-ink: #eaeffb;
  --tp-ink-2: #b9c6dd;
  --tp-muted: #7f90ad;
  /* the same lift as css/terminal.css, for the same reason: 2.95:1 -> 5.09:1
     (and 4.54:1 on the lightest surface it labels) */
  --tp-faint: #6f80a0;
  --tp-line: rgba(255, 255, 255, 0.075);
  --tp-line-2: rgba(255, 255, 255, 0.14);
  --tp-gold: #ffbb00;
  --tp-gold-2: #ff9500;
  --tp-gold-rgb: 255, 187, 0;
  --tp-up: #22d3a5;
  --tp-down: #ff5d73;
  --tp-cyan: #38bdf8;
  --tp-display: 'Tektur', 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --tp-ui: 'Rajdhani', 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tp-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body.sf-page {
  background: var(--tp-bg);
  color: var(--tp-ink);
  font-family: var(--tp-ui);
  font-weight: 500;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* data-grid floor + star dust */
body.sf-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(46% 38% at 18% 6%, rgba(var(--tp-gold-rgb), 0.12), transparent 62%),
    radial-gradient(40% 34% at 84% 10%, rgba(56, 189, 248, 0.09), transparent 60%),
    radial-gradient(60% 45% at 50% 108%, rgba(139, 92, 246, 0.12), transparent 65%),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: auto, auto, auto, 62px 62px, 62px 62px;
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, rgba(0, 0, 0, 0.35) 75%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, rgba(0, 0, 0, 0.35) 75%, transparent 100%);
}

/* scanlines + vignette */
body.sf-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.72) 100%);
}

/* keep page content above the shell — but never touch .pm-overlay's own
   `position: fixed`, or the verification modal would flow into the document */
body.sf-page .login-wrap,
body.sf-page .mt-page,
body.sf-page .wrap { position: relative; z-index: 2; }
body.sf-page .pm-overlay { z-index: 300; }

/* injected status strip -------------------------------------------------- */
.tp-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 38px;
  padding: 0 16px;
  background: rgba(4, 6, 12, 0.86);
  border-bottom: 1px solid var(--tp-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 600 10.5px/1 var(--tp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-faint);
}
.tp-strip__brand { color: var(--tp-gold); display: inline-flex; align-items: center; gap: 7px; }
.tp-strip__link { color: var(--tp-ink-2); text-decoration: none; }
.tp-strip__link:hover { color: #fff; }
.tp-strip__live { display: inline-flex; align-items: center; gap: 6px; color: var(--tp-up); }
.tp-strip__live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tp-up);
  box-shadow: 0 0 10px var(--tp-up);
  animation: tpPulse 2.4s ease-in-out infinite;
}
@keyframes tpPulse { 50% { opacity: 0.35; transform: scale(0.7); } }
.tp-strip__clock { margin-left: auto; color: var(--tp-ink-2); }
.tp-strip__sep { opacity: 0.4; }

/* pages get pushed below the strip */
body.sf-page .login-wrap,
body.sf-page .mt-page { padding-top: 38px; }

/* reveal in, same feel as the landing page ------------------------------- */
.tp-rise { animation: tpRise 0.9s var(--tp-ease) both; }
@keyframes tpRise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ==========================================================================
   02. LOGIN DESK
   ========================================================================== */
body.sf-page .login-wrap {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-inline: 18px;
  padding-bottom: 40px;
}

body.sf-page .login-card {
  position: relative;
  width: min(440px, 100%);
  padding: 34px clamp(22px, 4vw, 32px) 30px;
  border: 1px solid var(--tp-line-2);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(11, 17, 29, 0.95), rgba(6, 9, 16, 0.98));
  box-shadow:
    0 40px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(var(--tp-gold-rgb), 0.06),
    0 0 90px -50px rgba(var(--tp-gold-rgb), 0.8);
  text-align: center;
  overflow: hidden;
}
/* fake terminal title bar */
body.sf-page .login-card::before {
  content: 'STF-AUTH :: SECURE CHANNEL';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  display: flex;
  align-items: center;
  padding-left: 16px;
  border-bottom: 1px solid var(--tp-line);
  background: rgba(0, 0, 0, 0.35);
  font: 600 10px/1 var(--tp-mono);
  letter-spacing: 0.16em;
  color: var(--tp-faint);
}
body.sf-page .login-card > * { position: relative; }
body.sf-page .login-card { padding-top: 50px; }

body.sf-page .login-logo {
  font-family: var(--tp-display);
  font-size: clamp(1.7rem, 5vw, 2.2rem);
  letter-spacing: 0.22em;
  margin: 6px 0 6px;
  color: transparent;
  background: linear-gradient(100deg, #fff, var(--tp-gold) 45%, var(--tp-gold-2) 75%, #fff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: tpSheen 9s linear infinite;
  filter: drop-shadow(0 0 22px rgba(var(--tp-gold-rgb), 0.35));
}
@keyframes tpSheen { to { background-position: 220% 0; } }

body.sf-page .login-subtitle {
  font-family: var(--tp-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tp-muted);
  margin: 0 0 4px;
}

body.sf-page .login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--tp-faint);
  font: 600 10px/1 var(--tp-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.sf-page .login-divider::before,
body.sf-page .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tp-line-2), transparent);
}

body.sf-page .login-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 15px 20px;
  border: 1px solid rgba(var(--tp-gold-rgb), 0.4);
  border-radius: 13px;
  background: linear-gradient(135deg, var(--tp-gold), var(--tp-gold-2));
  color: #0a0d14;
  font-family: var(--tp-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.3s var(--tp-ease), box-shadow 0.3s, filter 0.3s;
  box-shadow: 0 12px 32px -14px rgba(var(--tp-gold-rgb), 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
body.sf-page .login-google-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
body.sf-page .login-google-btn:active { transform: translateY(0) scale(0.99); }
body.sf-page .login-google-icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: #fff;
}
body.sf-page .login-google-icon svg { width: 16px; height: 16px; }

body.sf-page .login-msg {
  min-height: 18px;
  margin: 14px 0 0;
  font: 600 11.5px/1.5 var(--tp-mono);
  letter-spacing: 0.04em;
  color: var(--tp-down);
}

body.sf-page .login-back {
  font: 600 11px/1 var(--tp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-muted);
  text-decoration: none;
  padding: 9px 14px;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
body.sf-page .login-back:hover {
  color: #fff;
  border-color: rgba(var(--tp-gold-rgb), 0.5);
  background: rgba(var(--tp-gold-rgb), 0.08);
}

/* ==========================================================================
   03. PREMIUM / MAINTENANCE DESK  (join-form.html)
   ========================================================================== */
body.sf-page .mt-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 18px 48px;
}

body.sf-page .mt-card {
  width: min(560px, 100%);
  padding: clamp(26px, 4vw, 38px);
  border: 1px solid var(--tp-line-2);
  border-radius: 24px;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(var(--tp-gold-rgb), 0.1), transparent 65%),
    linear-gradient(180deg, rgba(11, 17, 29, 0.96), rgba(6, 9, 16, 0.99));
  box-shadow:
    0 40px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(var(--tp-gold-rgb), 0.06),
    0 0 90px -55px rgba(var(--tp-gold-rgb), 0.85);
  text-align: center;
  overflow: hidden;
}
body.sf-page .mt-card::before {
  content: 'STF-DESK :: ACCESS TIER / PREMIUM';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  display: flex;
  align-items: center;
  padding-left: 16px;
  transform: none;
  border-bottom: 1px solid var(--tp-line);
  background: rgba(0, 0, 0, 0.35);
  font: 600 10px/1 var(--tp-mono);
  letter-spacing: 0.16em;
  color: var(--tp-faint);
  -webkit-mask: none;
  mask: none;
  animation: none;
}
body.sf-page .mt-card { padding-top: 58px; }

body.sf-page .mt-icon-wrap {
  width: 74px; height: 74px;
  margin: 0 auto 16px;
  border-radius: 20px;
  transform: none;
  background: linear-gradient(150deg, rgba(var(--tp-gold-rgb), 0.22), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(var(--tp-gold-rgb), 0.35);
  animation: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body.sf-page .mt-icon { font-size: 30px; filter: drop-shadow(0 0 14px rgba(var(--tp-gold-rgb), 0.6)); }

body.sf-page .mt-title {
  font-family: var(--tp-display);
  font-size: clamp(1.2rem, 3.4vw, 1.6rem);
  letter-spacing: 0.02em;
  background: linear-gradient(100deg, #fff, var(--tp-gold) 50%, var(--tp-gold-2) 80%, #fff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tpSheen 9s linear infinite;
  filter: drop-shadow(0 0 18px rgba(var(--tp-gold-rgb), 0.3));
  margin-bottom: 12px;
}

body.sf-page .mt-subtitle {
  color: var(--tp-ink-2);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto 4px;
}
body.sf-page .mt-subtitle em { color: var(--tp-gold); font-style: normal; font-weight: 700; }

body.sf-page .mt-alert {
  margin: 20px 0 18px;
  padding: 16px 18px;
  border: 1px dashed rgba(var(--tp-gold-rgb), 0.35);
  border-left: 2px solid var(--tp-gold);
  border-right: 1px dashed rgba(var(--tp-gold-rgb), 0.35);
  border-radius: 14px;
  background: rgba(var(--tp-gold-rgb), 0.05);
  text-align: left;
}
body.sf-page .mt-alert > strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--tp-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tp-gold);
}
body.sf-page .mt-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
body.sf-page .mt-steps li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--tp-ink-2);
  line-height: 1.5;
}
body.sf-page .mt-step-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid rgba(var(--tp-gold-rgb), 0.4);
  background: rgba(var(--tp-gold-rgb), 0.12);
  color: var(--tp-gold);
  font: 700 11px/1 var(--tp-mono);
}
body.sf-page .mt-steps strong { color: var(--tp-ink); }
body.sf-page .mt-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  font: 600 11.5px/1.6 var(--tp-mono);
  color: var(--tp-muted);
}
body.sf-page .mt-note strong { color: var(--tp-gold); }

body.sf-page .mt-trust { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 22px; }
body.sf-page .mt-trust-pill {
  padding: 7px 12px;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font: 600 10.5px/1 var(--tp-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tp-muted);
}
body.sf-page .mt-trust-pill::before { content: none; }

body.sf-page .mt-cta,
body.sf-page .mt-cta--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px 22px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--tp-gold), var(--tp-gold-2));
  color: #0a0d14;
  font-family: var(--tp-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 36px -16px rgba(var(--tp-gold-rgb), 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.3s var(--tp-ease), filter 0.3s, box-shadow 0.3s;
}
body.sf-page .mt-cta::before { content: none; }
body.sf-page .mt-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }

body.sf-page .mt-back {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 15px;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  font: 600 11px/1 var(--tp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-muted);
  text-decoration: none;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
body.sf-page .mt-back:hover { color: #fff; border-color: rgba(var(--tp-gold-rgb), 0.5); background: rgba(var(--tp-gold-rgb), 0.08); }

/* the legacy animated background layers from the old wizard — keep them faint */
body.sf-page .sf-page-bg,
body.sf-page .sf-noise-overlay { opacity: 0.35; pointer-events: none; }
body.sf-page #sf-bg-canvas { opacity: 0.5; }

/* ==========================================================================
   04. ACCESS DENIED · forbidden.html
   ------------------------------------------------------------------------
   The page Apache serves through `ErrorDocument 403`. It is a dead end, so it
   is built like one: one card, no webfont (a refusal does not need a round trip
   to Google to say no), no artwork, and no third-party request of any kind —
   this is the one page a visitor reaches when something has already gone
   wrong, and it has no room to go wrong itself.

   The route the reader asked for is printed back to them, escaped and length
   capped, because "the link is broken, report it" is only useful with the link
   in hand. The whole design is the desk's own voice: mono, gold, measured.
   ========================================================================== */
/* This page carries no reset of its own, so the two lines it needs live here,
   scoped to its own body class: the others on this sheet set their own shells
   and a blanket reset would move them. */
body.sf-denied-page { margin: 0; }
body.sf-denied-page *,
body.sf-denied-page *::before,
body.sf-denied-page *::after { box-sizing: border-box; }

.sf-denied {
  position: relative;
  z-index: 2;
  width: min(780px, calc(100% - 32px));
  margin: clamp(64px, 11vh, 132px) auto 44px;
  padding-bottom: 16px;
  border: 1px solid var(--tp-line-2);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(12, 17, 28, 0.93), rgba(5, 8, 14, 0.975));
  box-shadow:
    0 40px 110px -46px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(var(--tp-gold-rgb), 0.07),
    0 0 90px -60px rgba(255, 93, 115, 0.85);
  overflow: hidden;
}
/* the one thing on the page that moves: a light crossing the top edge, because
   a terminal is never completely still. §05 switches it off entirely for a
   reader who asked for less motion. */
.sf-denied::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--tp-gold-rgb), 0.9), transparent);
  animation: sfDeniedScan 13s linear infinite;
}
@keyframes sfDeniedScan {
  0% { transform: translateX(-101%); }
  52%, 100% { transform: translateX(101%); }
}

.sf-denied__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px clamp(16px, 3.6vw, 30px);
  border-bottom: 1px solid var(--tp-line);
  background: rgba(0, 0, 0, 0.36);
  font: 700 10px/1 var(--tp-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sf-denied__tag { color: var(--tp-down); }
.sf-denied__ref { color: var(--tp-faint); letter-spacing: 0.14em; }

.sf-denied__body { padding: clamp(24px, 4.2vw, 42px) clamp(16px, 3.6vw, 30px) 0; }
.sf-denied__code {
  margin: 0 0 16px;
  font: 600 11px/1.5 var(--tp-mono);
  letter-spacing: 0.16em;
  color: var(--tp-cyan);
}
.sf-denied__code i { font-style: normal; color: var(--tp-faint); }
.sf-denied__title {
  margin: 0;
  font: 800 clamp(2rem, 6.4vw, 3.1rem)/1.03 var(--tp-mono);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--tp-ink);
}
.sf-denied__title em { font-style: normal; color: var(--tp-down); }
.sf-denied__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font: 600 10px/1.5 var(--tp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-faint);
}
.sf-denied__route code {
  padding: 3px 9px;
  border: 1px solid var(--tp-line-2);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--tp-ink-2);
  font: 600 11px/1.5 var(--tp-mono);
  letter-spacing: 0.02em;
  text-transform: none;
  overflow-wrap: anywhere;
}
.sf-denied__lead {
  margin: 20px 0 0;
  max-width: 64ch;
  color: var(--tp-ink-2);
  font-size: 1.02rem;
  line-height: 1.65;
}
.sf-denied__why {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border: 1px solid var(--tp-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--tp-line);
}
.sf-denied__why li {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 15px;
  background: rgba(7, 10, 18, 0.92);
}
.sf-denied__why b {
  font: 700 10px/1.7 var(--tp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-gold);
}
.sf-denied__why span { color: var(--tp-muted); font-size: 0.93rem; line-height: 1.55; }

/* ---- THE WARNING ----------------------------------------------------------
   The line this page exists to carry, and the one that has to survive being
   skimmed: hacking this site is forbidden. It is set apart from the rest of the
   card -- its own frame, its own red edge, its own weight -- because it is the
   only paragraph here that is a rule rather than a description. */
.sf-denied__warn {
  display: grid;
  gap: 4px;
  margin: 24px 0 0;
  padding: 16px 18px 17px;
  border: 1px solid rgba(255, 93, 115, 0.34);
  border-left: 3px solid var(--tp-down);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 93, 115, 0.1), rgba(255, 93, 115, 0.02));
}
.sf-denied__warn b {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 800 clamp(1rem, 2.6vw, 1.24rem)/1.25 var(--tp-mono);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--tp-down);
}
.sf-denied__warn b i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tp-down);
  box-shadow: 0 0 0 4px rgba(255, 93, 115, 0.18);
}
.sf-denied__warn span { color: var(--tp-ink-2); font-size: 0.96rem; line-height: 1.6; }

/* the stamp: the page is not a dialog with a way out, it is a state */
.sf-denied__lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 7px 12px;
  border: 1px dashed var(--tp-line-2);
  border-radius: 999px;
  font: 700 10px/1 var(--tp-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tp-faint);
}
.sf-denied__lock s { text-decoration: none; color: var(--tp-gold); }

/* Nothing on this page is a control: no link, no button, no field. The only
   things a pointer finds here are text. */
body.sf-denied-page,
body.sf-denied-page a,
body.sf-denied-page button { cursor: default; }
body.sf-denied-page,
body.sf-denied-page * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.sf-denied__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
  margin-top: 26px;
  padding: 14px clamp(16px, 3.6vw, 30px) 2px;
  border-top: 1px solid var(--tp-line);
  font: 600 10px/1.7 var(--tp-mono);
  letter-spacing: 0.06em;
  color: var(--tp-faint);
}
.sf-denied__foot b { color: var(--tp-ink-2); }

@media (max-width: 560px) {
  .sf-denied__why li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

/* ==========================================================================
   05. RESPONSIVE + MOTION
   ========================================================================== */
@media (max-width: 560px) {
  .tp-strip { font-size: 9.5px; letter-spacing: 0.1em; padding: 0 12px; gap: 10px; }
  .tp-strip__sep,
  .tp-strip__link--hide { display: none; }
  body.sf-page .login-card { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  body.sf-page *,
  body.sf-page *::before,
  body.sf-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  body.sf-page .tp-rise { animation: none; opacity: 1; transform: none; filter: none; }
}

/* keep the premium verification modal legible on the new shell */   body.sf-page .pm-overlay { background: rgba(3, 5, 10, 0.78); }
body.sf-page .pm-modal {
  border-radius: 20px;
  border-color: rgba(var(--tp-gold-rgb), 0.3);
}

/* ==========================================================================
   07. SESSION GLOBALS  (lifted out of the legacy css/luxury.css)
   ------------------------------------------------------------------------
   login.html, join-form.html and payment.html each loaded css/luxury.css: 75 KB
   of `lux-*` classes written for an earlier build, of which these three pages
   reference exactly none. What they did get from it were the handful of global
   rules below, and those live here now, so a legacy sheet is off the critical
   path of the sign-in, the verification card and the checkout.

   Proved rather than assumed: with this section in place, disabling
   luxury.css in the browser changes no computed style on any of the three
   pages (`scripts/check-assets.mjs` guards the rest of it).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  /* A dark UA colour scheme is what keeps an unstyled `a` legible here; without
     it the browser's default link blue is #0000ee on a near-black canvas. */
  html, body { color-scheme: dark; }
}

html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--tp-gold) rgba(10, 10, 15, 0.8);
}

::selection { background: rgba(255, 187, 0, 0.3); color: #fff; }
::-moz-selection { background: rgba(255, 187, 0, 0.3); color: #fff; }

*:focus-visible { outline: 2px solid var(--tp-gold); outline-offset: 2px; }
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--tp-gold);
  outline-offset: 2px;
  box-shadow: 0 0 15px rgba(255, 187, 0, 0.4) !important;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* iOS zooms the whole page when a field under 16px takes focus. */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
select,
textarea {
  font-size: 16px !important;
}

textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* lazy artwork fades in once its own load handler marks it `.loaded` */
img { transition: opacity 0.4s ease; }
html.js img[loading="lazy"]:not(.loaded) { opacity: 0; }
html.js img[loading="lazy"].loaded { opacity: 1; }

/* ==========================================================================
   06. CHECKOUT DESK  (payment.html)
   ------------------------------------------------------------------------
   The crypto checkout every "Join" button lands on. Same tokens as the rest
   of the shell; the plan comes in from the query string, the wallet addresses
   come from window.ENV.WALLETS (config.js) so rotating an address never needs
   a page edit.
   ========================================================================== */
.pay-page {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 74px 0 90px;
}

.pay-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.pay-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}
.pay-brand img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 30px -8px rgba(var(--tp-gold-rgb), 0.9);
}
.pay-brand b {
  display: block;
  font-family: var(--tp-display);
  font-size: 1.18rem;
  letter-spacing: 0.04em;
  color: var(--tp-ink);
}
.pay-brand em {
  font: 600 9.5px/1.4 var(--tp-mono);
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tp-faint);
}
.pay-head__back {
  margin-left: auto;
  font: 600 10.5px/1 var(--tp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-muted);
  border: 1px solid var(--tp-line-2);
  border-radius: 999px;
  padding: 9px 14px;
  transition: color 0.3s, border-color 0.3s;
}
.pay-head__back:hover { color: var(--tp-gold); border-color: rgba(var(--tp-gold-rgb), 0.5); }

.pay-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid rgba(var(--tp-gold-rgb), 0.4);
  border-radius: 999px;
  background: rgba(var(--tp-gold-rgb), 0.07);
  font: 600 10.5px/1 var(--tp-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tp-gold);
}
.pay-kicker i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tp-gold);
  box-shadow: 0 0 10px var(--tp-gold);
}

.pay-hero { margin-bottom: 30px; max-width: 78ch; }
.pay-hero h1 {
  font-family: var(--tp-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 12px 0 14px;
  color: var(--tp-ink);
}
.pay-hero h1 u { text-decoration: none; color: var(--tp-gold); }
.pay-hero p { color: var(--tp-muted); line-height: 1.75; font-size: 0.98rem; }

/* stepper ---------------------------------------------------------------- */
.pay-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.pay-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  font: 600 10.5px/1 var(--tp-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tp-faint);
}
.pay-steps li b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  font: 700 10px/1 var(--tp-mono);
  color: var(--tp-muted);
}
.pay-steps li.is-on {
  border-color: rgba(var(--tp-gold-rgb), 0.55);
  background: rgba(var(--tp-gold-rgb), 0.1);
  color: var(--tp-gold);
}
.pay-steps li.is-on b { background: linear-gradient(135deg, var(--tp-gold), var(--tp-gold-2)); color: #0a0d14; }
.pay-steps li.is-done { color: var(--tp-up); border-color: rgba(34, 211, 165, 0.4); }

/* layout ----------------------------------------------------------------- */
.pay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: 20px;
  align-items: start;
}
.pay-card {
  position: relative;
  padding: 26px 26px 28px;
  border: 1px solid var(--tp-line);
  border-radius: 22px;
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(var(--tp-gold-rgb), 0.1), transparent 68%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.008));
  margin-bottom: 18px;
}
.pay-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pay-card__head h2 {
  font-family: var(--tp-display);
  font-size: 1.22rem;
  letter-spacing: 0.01em;
  color: var(--tp-ink);
}
.pay-card__head span {
  margin-left: auto;
  font: 600 9.5px/1 var(--tp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-faint);
}
.pay-card__note { color: var(--tp-faint); font: 600 10.5px/1.6 var(--tp-mono); letter-spacing: 0.05em; margin-top: 14px; }

/* seat picker ------------------------------------------------------------ */
.pay-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pay-seat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 18px 20px;
  border: 1px solid var(--tp-line);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: border-color 0.3s, transform 0.3s var(--tp-ease), background 0.3s;
}
.pay-seat:hover { border-color: var(--tp-line-2); transform: translateY(-3px); }
.pay-seat.is-on {
  border-color: rgba(var(--tp-gold-rgb), 0.6);
  background: rgba(var(--tp-gold-rgb), 0.08);
  box-shadow: 0 30px 60px -40px rgba(var(--tp-gold-rgb), 0.9);
}
.pay-seat input { position: absolute; opacity: 0; pointer-events: none; }
.pay-seat__name {
  font: 600 10px/1 var(--tp-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tp-gold);
}
.pay-seat__price {
  font-family: var(--tp-mono);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tp-ink);
}
.pay-seat__price small { font-size: 0.42em; color: var(--tp-muted); }
.pay-seat__meta { font: 600 10.5px/1.6 var(--tp-mono); color: var(--tp-muted); letter-spacing: 0.05em; }
.pay-seat__tag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 9px;
  border-radius: 999px;
  font: 700 8.5px/1 var(--tp-mono);
  letter-spacing: 0.14em;
  background: linear-gradient(135deg, var(--tp-gold), var(--tp-gold-2));
  color: #0a0d14;
}
.pay-seat__amount { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pay-seat__amount label { font: 600 9px/1 var(--tp-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-faint); }
.pay-seat__amount input {
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(var(--tp-gold-rgb), 0.4);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--tp-ink);
  font: 700 15px/1 var(--tp-mono);
  outline: none;
}
.pay-seat__amount input:focus { border-color: var(--tp-gold); box-shadow: 0 0 0 3px rgba(var(--tp-gold-rgb), 0.14); }

/* network chips ---------------------------------------------------------- */
.pay-nets { display: flex; flex-wrap: wrap; gap: 9px; }
.pay-net {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--tp-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--tp-ink-2);
  font: 600 11px/1 var(--tp-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, transform 0.25s var(--tp-ease);
}
.pay-net:hover { border-color: var(--tp-line-2); color: #fff; transform: translateY(-2px); }
.pay-net.is-on {
  border-color: rgba(var(--tp-gold-rgb), 0.6);
  color: #0a0d14;
  background: linear-gradient(135deg, var(--tp-gold), var(--tp-gold-2));
}
.pay-net em {
  font: 700 9px/1 var(--tp-mono);
  font-style: normal;
  letter-spacing: 0.1em;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
}
.pay-net.is-on em { background: rgba(0, 0, 0, 0.2); }

/* amount + address ------------------------------------------------------- */
.pay-amount {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 16px;
}
.pay-amount > div {
  padding: 14px 15px;
  border: 1px solid var(--tp-line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.32);
}
.pay-amount span {
  display: block;
  font: 600 9px/1 var(--tp-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tp-faint);
  margin-bottom: 7px;
}
.pay-amount b { font: 700 15px/1.2 var(--tp-mono); color: var(--tp-ink); word-break: break-word; }
.pay-amount b.up { color: var(--tp-up); }
.pay-amount .pay-amount__big b { font-size: 1.35rem; color: var(--tp-gold); }

.pay-addr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px dashed rgba(var(--tp-gold-rgb), 0.42);
  border-radius: 15px;
  background: rgba(var(--tp-gold-rgb), 0.055);
}
.pay-addr code {
  flex: 1;
  min-width: 0;
  font: 600 12.5px/1.5 var(--tp-mono);
  color: var(--tp-ink);
  word-break: break-all;
}
.pay-addr button {
  flex: none;
  padding: 10px 15px;
  border-radius: 11px;
  border: 1px solid rgba(var(--tp-gold-rgb), 0.45);
  background: rgba(var(--tp-gold-rgb), 0.12);
  color: var(--tp-gold);
  font: 700 10px/1 var(--tp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.pay-addr button:hover { background: var(--tp-gold); color: #0a0d14; }
.pay-addr button.is-ok { background: var(--tp-up); border-color: var(--tp-up); color: #04120d; }

.pay-timer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font: 600 11px/1 var(--tp-mono);
  letter-spacing: 0.08em;
  color: var(--tp-muted);
}
.pay-timer b { color: var(--tp-gold); font-size: 1rem; }
.pay-timer i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tp-up);
  box-shadow: 0 0 10px var(--tp-up);
  animation: payBlink 1.6s ease-in-out infinite;
}
@keyframes payBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.pay-list { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.pay-list li {
  display: flex;
  gap: 11px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--tp-ink-2);
}
.pay-list li b { color: var(--tp-gold); font-family: var(--tp-mono); font-size: 0.82rem; }

/* summary column --------------------------------------------------------- */
.pay-side { position: sticky; top: 58px; display: grid; gap: 14px; }
.pay-sum { display: flex; flex-direction: column; gap: 11px; }
.pay-sum div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font: 600 11.5px/1.5 var(--tp-mono);
  color: var(--tp-muted);
  letter-spacing: 0.04em;
}
.pay-sum div b { color: var(--tp-ink); font-size: 13px; }
.pay-sum div.is-total {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 1px solid var(--tp-line);
}
.pay-sum div.is-total b { color: var(--tp-gold); font-size: 1.35rem; }

.pay-actions { display: grid; gap: 10px; margin-top: 18px; }
.pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  border-radius: 13px;
  border: 1px solid transparent;
  font-family: var(--tp-display);
  font-size: 14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.3s var(--tp-ease), box-shadow 0.4s, background 0.3s, border-color 0.3s;
}
.pay-btn--gold {
  background: linear-gradient(135deg, var(--tp-gold), var(--tp-gold-2));
  color: #0a0d14;
  font-weight: 700;
  box-shadow: 0 24px 50px -30px rgba(var(--tp-gold-rgb), 1);
}
.pay-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 30px 60px -26px rgba(var(--tp-gold-rgb), 1); }
.pay-btn--line {
  border-color: var(--tp-line-2);
  color: var(--tp-ink-2);
  background: rgba(255, 255, 255, 0.02);
}
.pay-btn--line:hover { border-color: rgba(var(--tp-gold-rgb), 0.5); color: var(--tp-gold); }
.pay-btn[disabled] { opacity: 0.45; pointer-events: none; }
/* `display: inline-flex` above beats the user agent's own `[hidden]` rule, so a
   button marked hidden would still paint. The page hides the WhatsApp channel
   until a number is configured, so the attribute has to actually work. */
.pay-btn[hidden] { display: none; }

.pay-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pay-trust span {
  padding: 7px 11px;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  font: 600 9.5px/1 var(--tp-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tp-faint);
}

/* form ------------------------------------------------------------------ */
.pay-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pay-field { position: relative; }
.pay-field--full { grid-column: 1 / -1; }
.pay-field input,
.pay-field textarea {
  width: 100%;
  padding: 16px 14px 8px;
  border: 1px solid var(--tp-line);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.34);
  color: var(--tp-ink);
  font: 600 14px/1.3 var(--tp-ui);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.pay-field textarea { min-height: 96px; resize: vertical; }
.pay-field label {
  position: absolute;
  top: 10px;
  left: 15px;
  font: 600 9px/1 var(--tp-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tp-faint);
  pointer-events: none;
}
.pay-field input:focus,
.pay-field textarea:focus { border-color: rgba(var(--tp-gold-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--tp-gold-rgb), 0.13); }
.pay-field input:invalid:not(:placeholder-shown) { border-color: rgba(255, 93, 115, 0.6); }

.pay-err {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 93, 115, 0.45);
  border-radius: 12px;
  background: rgba(255, 93, 115, 0.1);
  color: #ffd0d7;
  font: 600 11.5px/1.6 var(--tp-mono);
}
.pay-err[hidden] { display: none; }

/* ==========================================================================
   the next step
   ==========================================================================
   Two cards of the checkout are one press away from the card after them, and
   both presses say what they cost and what happens next before they are made.
   The bar is the page's own gold with the figure on the trailing edge — the
   amount about to be billed, sitting on the button that bills it.
   ========================================================================== */
.pay-next {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 62px;
  padding: 13px 16px;
  gap: 14px;
  justify-content: space-between;
  text-align: left;
  text-transform: none;
  border-radius: 15px;
  overflow: hidden;
}
.pay-next__txt { display: grid; gap: 3px; min-width: 0; }
.pay-next__txt b {
  font-family: var(--tp-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pay-next__txt em {
  font: 600 11.5px/1.45 var(--tp-mono);
  font-style: normal;
  letter-spacing: 0.02em;
  /* 6.1:1 on the gold bar: the sub-line is the reason for the press, so it has
     to be readable and not a whisper */
  color: rgba(10, 13, 20, 0.78);
}
.pay-next__amt {
  font: 800 17px/1 var(--tp-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pay-next__arrow {
  width: 22px;
  height: 22px;
  flex: none;
  transition: transform 0.28s var(--tp-ease);
}
.pay-next:hover .pay-next__arrow { transform: translateX(4px); }

/* ==========================================================================
   the receipt
   ==========================================================================
   What a submitted transfer prints. It is paper on a dark desk: torn along the
   top edge, ruled, stamped, and stubbed with the reference the desk will match.
   The rows are a `dl` because that is what they are — a label and its value —
   and every value is mono, wraps anywhere, and is right-aligned, so a 120-char
   txid lands inside the card instead of pushing the card off the screen.

   The surfaces are kept within a hair of --tp-bg-2 on purpose: the labels use
   the page's faintest ink, and a receipt lit up with a white wash would take
   that ink below the contrast the rest of the page holds itself to.
   ========================================================================== */
.rcpt {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: 26px 24px 20px;
  border: 1px solid var(--tp-line-2);
  border-radius: 6px 6px 18px 18px;
  background: linear-gradient(180deg, #0a0f18, var(--tp-bg-2) 46%);
  box-shadow: 0 44px 90px -54px rgba(0, 0, 0, 0.95);
}
/* the torn top edge, cut out of the card's own ink */
.rcpt::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 9px;
  background-image:
    linear-gradient(135deg, #0a0f18 50%, transparent 50%),
    linear-gradient(45deg, #0a0f18 50%, transparent 50%);
  background-size: 12px 9px;
  background-position: 0 0, 6px 0;
  background-repeat: repeat-x;
}
.rcpt[hidden] { display: none; }

.rcpt__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rcpt__brand { display: flex; align-items: center; gap: 10px; }
.rcpt__brand img { display: block; }
.rcpt__brand span { display: grid; gap: 3px; }
.rcpt__brand b {
  font: 800 13px/1 var(--tp-display);
  letter-spacing: 0.18em;
  color: var(--tp-ink);
}
.rcpt__brand em {
  font: 600 9.5px/1 var(--tp-mono);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* one step up from the page's faintest ink: the paper here is a shade
     lighter than the desk, and 9.5px type is where the difference shows */
  color: var(--tp-muted);
}
.rcpt__stamp {
  margin-left: auto;
  padding: 8px 11px;
  border: 1px dashed rgba(var(--tp-gold-rgb), 0.6);
  border-radius: 8px;
  background: rgba(var(--tp-gold-rgb), 0.1);
  color: var(--tp-gold);
  font: 700 9.5px/1 var(--tp-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-2.5deg);
}

.rcpt__title {
  margin: 22px 0 9px;
  font: 800 1.5rem/1.25 var(--tp-display);
  color: var(--tp-ink);
}
.rcpt__title u { text-decoration-color: rgba(var(--tp-gold-rgb), 0.55); text-underline-offset: 5px; }
.rcpt__lead { margin: 0; font: 500 14px/1.72 var(--tp-ui); color: var(--tp-muted); }

/* perforation */
.rcpt__rule {
  height: 1px;
  margin: 20px 0 4px;
  background: repeating-linear-gradient(90deg, var(--tp-line-2) 0 6px, transparent 6px 13px);
}
.rcpt__rule--drop { margin: 14px 0 13px; }

.rcpt__rows { display: grid; margin: 10px 0 0; }
.rcpt__rows > div {
  display: grid;
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
.rcpt__rows > div:last-child { border-bottom: 0; }
.rcpt__rows dt {
  font: 600 9.5px/1.5 var(--tp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-muted);
}
.rcpt__rows dd {
  margin: 0;
  font: 700 12.5px/1.55 var(--tp-mono);
  color: var(--tp-ink-2);
  text-align: right;
  overflow-wrap: anywhere;
}

.rcpt__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--tp-gold-rgb), 0.3);
  border-radius: 12px;
  background: rgba(var(--tp-gold-rgb), 0.07);
}
.rcpt__total span {
  font: 600 9.5px/1 var(--tp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tp-gold);
}
.rcpt__total b {
  font: 700 13px/1.45 var(--tp-mono);
  color: var(--tp-ink);
  text-align: right;
}

/* the stub: a barcode built out of the reference itself, then the reference */
.rcpt__stub {
  display: grid;
  gap: 9px;
  justify-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.rcpt__bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 42px; }
.rcpt__bars i { display: block; background: var(--tp-ink); border-radius: 1px; opacity: 0.78; }
.rcpt__stub em {
  font: 600 10.5px/1 var(--tp-mono);
  font-style: normal;
  letter-spacing: 0.22em;
  color: var(--tp-ink-2);
}

.rcpt__acts { display: grid; margin-top: 20px; }
.rcpt__back { width: 100%; }

.pay-foot { margin-top: 34px; text-align: center; }
.pay-foot p { font: 600 10.5px/1.8 var(--tp-mono); color: var(--tp-faint); letter-spacing: 0.06em; }
.pay-foot a { color: var(--tp-gold); }

/* responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .pay-grid { grid-template-columns: minmax(0, 1fr); }
  .pay-side { position: static; }
}
@media (max-width: 720px) {
  .pay-page { padding-top: 62px; }
  .pay-seats { grid-template-columns: minmax(0, 1fr); }
  .pay-form { grid-template-columns: minmax(0, 1fr); }
  .pay-amount { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-card { padding: 20px 18px 22px; border-radius: 18px; }
  .pay-head__back { margin-left: 0; }
  .rcpt { padding: 22px 18px 18px; }
}
@media (max-width: 460px) {
  .pay-page { width: calc(100% - 24px); }
  .pay-amount { grid-template-columns: minmax(0, 1fr); }
  .pay-steps li { font-size: 9.5px; padding: 8px 12px; }
  .pay-steps li span { display: none; }
  .pay-addr { flex-direction: column; align-items: stretch; }
  .pay-addr button { width: 100%; }
  /* the stamp drops under the brand rather than squeezing the header into two
     columns it cannot hold */
  .rcpt__stamp { margin-left: 0; }
  .rcpt__title { font-size: 1.28rem; }
  .rcpt__rows > div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .rcpt__rows dd { text-align: left; }
  .rcpt__total { flex-direction: column; align-items: flex-start; }
  .rcpt__total b { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .pay-timer i { animation: none; }
  .pay-seat:hover,
  .pay-net:hover,
  .pay-btn--gold:hover { transform: none; }
}