/* ══════════════════════════════════════════════════════════════
   Perspicacity theme.css: the start_2 design system, shared by every
   page that opts in with {% set new_theme = true %}.
   Dark only. Tokens are the exact values from start_2.html (Paymark
   reference). Pages that have not migrated keep using style.css and
   never load this file, so nothing here can affect them.
   ══════════════════════════════════════════════════════════════ */

:root {
  --background: 14, 14, 14;
  --foreground: 255, 255, 255;
  --card: 20, 20, 20;
  --primary: 255, 137, 117;
  --secondary: 31, 31, 31;
  --muted-foreground: 172, 175, 185;
  --border: 44, 44, 44;
  --success: 52, 211, 153;
  --danger: 240, 165, 118;
  --radius: 0.75rem;
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-logo: 'Cormorant Garamond', Georgia, serif;
  --gradient-primary: linear-gradient(135deg, hsl(9 100% 73%) 0%, hsl(20 100% 65%) 100%);
  --shadow-glow: 0 0 60px hsl(9 100% 73% / 0.3);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --nav-height: 68px;
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: rgb(var(--background)); }
body.t-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  background: rgb(var(--background));
  color: rgb(var(--foreground));
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
/* Resets wrapped in :where() so they carry zero specificity and never
   override component classes (a plain ".t-body a" beat ".btn-primary"
   and turned button text white). */
:where(.t-body) :where(h1, h2, h3, h4, p) { margin: 0; }
:where(.t-body) :where(a) { color: inherit; }
:where(.t-body) :where(img) { max-width: 100%; display: block; }
:where(.t-body) :focus-visible {
  outline: 2px solid rgb(var(--primary));
  outline-offset: 2px;
  border-radius: 6px;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.container-tight { max-width: 460px; margin: 0 auto; padding: 0 24px; }

/* Page shell: the coral and violet glow from the start_2 hero, kept
   quiet so it frames app pages without competing with content. */
body.t-body { position: relative; }
.t-page { position: relative; min-height: calc(100vh - var(--nav-height)); display: flex; flex-direction: column; }
/* Glow sits on the body, from the very top, so it shows through the
   translucent sticky nav instead of starting below it as a band. */
body.t-body::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 620px;
  background:
    radial-gradient(ellipse 50% 55% at 45% 0%, rgba(255, 137, 117, 0.20) 0%, transparent 62%),
    radial-gradient(ellipse 38% 45% at 70% 4%, rgba(214, 120, 255, 0.11) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
/* No z-index here: one would trap fixed overlays (modals) inside the
   page content, below the sticky nav. The body glow is the first
   positioned box in the document, so content already paints over it. */
.t-main { position: relative; flex: 1; padding: 48px 0 80px; }
@media (min-width: 768px) { .t-main { padding-top: 64px; } }

/* ── Typography (start_2 scale) ───────────────────────────── */
.h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
@media (min-width: 768px) { .h1 { font-size: 56px; } }
.h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
@media (min-width: 768px) { .h2 { font-size: 40px; } }
.h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 500; }
.h4 { font-size: 18px; line-height: 1.3; font-weight: 600; }
.text-body-md { font-size: 16px; line-height: 1.6; color: rgba(var(--foreground), 0.75); }
@media (min-width: 768px) { .text-body-md { font-size: 18px; } }
.muted { color: rgb(var(--muted-foreground)); }
.small { font-size: 14px; }
.tiny { font-size: 12px; }
.text-center { text-align: center; }
.text-coral { color: rgb(var(--primary)); }

.page-head { margin-bottom: 40px; }
.page-head .h2 { margin-bottom: 12px; }

/* Pill label, same treatment as start_2's sticky-card eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgb(var(--primary)); background: rgba(var(--primary), 0.1);
  border: 1px solid rgba(var(--primary), 0.25);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; width: fit-content;
}

/* ── Buttons (start_2 button.tsx values) ──────────────────── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; font-family: var(--font-sans); font-weight: 500; font-size: 16px;
  padding: 0 24px; height: 50px; cursor: pointer; text-decoration: none;
  border: none; white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.btn-primary {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.6), #FFFFFF);
  color: rgb(var(--background));
}
.btn-coral {
  background: var(--gradient-primary);
  color: rgb(var(--background));
  font-weight: 600;
}
.btn-coral:hover { box-shadow: var(--shadow-glow); }
.btn-outline {
  background: rgb(var(--background));
  border: 1px solid rgb(var(--border));
  color: rgb(var(--foreground));
}
.btn-outline:hover { background: #FFFFFF; color: rgb(var(--background)); border-color: #FFFFFF; }
.btn-ghost { background: transparent; color: rgba(var(--foreground), 0.75); padding: 0 12px; }
.btn-ghost:hover { color: rgb(var(--foreground)); }
.btn-sm { height: 38px; font-size: 14px; padding: 0 16px; }
.btn-lg { height: 55px; font-size: 18px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.45; pointer-events: none; }

/* Slide-up hover: markup needs both spans, e.g.
   <a class="btn btn-primary"><span class="btn-slide-inner">Go</span><span class="btn-slide-dup">Go</span></a> */
.btn-slide-inner { display: flex; align-items: center; gap: 6px; transition: transform 0.3s ease; }
.btn-slide-dup {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  transform: translateY(150%); transition: transform 0.3s ease;
}
.btn:hover .btn-slide-inner { transform: translateY(-150%); }
.btn:hover .btn-slide-dup { transform: translateY(0); }

/* ── App navbar ───────────────────────────────────────────── */
.navbar-app {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-height);
  background: rgba(var(--background), 0.6);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.navbar-app .navbar-inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: relative;
}
.navbar-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-logo); font-weight: 300; font-size: 21px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgb(var(--foreground)); text-decoration: none;
}
.navbar-logo-dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--primary)); }
.navbar-links { display: none; align-items: center; gap: 4px; }
.navbar-links a {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 15px; color: rgba(var(--foreground), 0.7);
  text-decoration: none; border-radius: 999px; transition: color 0.2s ease, background 0.2s ease;
}
.navbar-links a:hover { color: rgb(var(--foreground)); background: rgba(255, 255, 255, 0.04); }
.navbar-links a.active { color: rgb(var(--foreground)); }
.navbar-links a.active::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px;
  border-radius: 50%; background: rgb(var(--primary)); transform: translateX(-50%);
}
.navbar-links .ti-lock { font-size: 13px; color: rgba(var(--foreground), 0.4); }
.navbar-right { display: none; align-items: center; gap: 12px; }
.navbar-user { font-size: 14px; color: rgb(var(--muted-foreground)); }
.navbar-signout {
  font-size: 14px; color: rgba(var(--foreground), 0.7); text-decoration: none;
}
.navbar-signout:hover { color: rgb(var(--foreground)); }
@media (min-width: 900px) {
  .navbar-links, .navbar-right { display: flex; }
}

.navbar-mobile-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgb(var(--border));
  color: rgb(var(--foreground)); cursor: pointer; font-size: 18px;
}
@media (min-width: 900px) { .navbar-mobile-btn { display: none; } }
.navbar-mobile-panel {
  display: none; position: absolute; top: calc(var(--nav-height) - 4px); left: 16px; right: 16px;
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: var(--radius); padding: 8px 12px 12px; flex-direction: column;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.navbar-mobile-panel.open { display: flex; }
.navbar-mobile-panel a.navbar-mobile-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 6px; font-size: 15px; color: rgba(var(--foreground), 0.8);
  text-decoration: none; border-bottom: 1px solid rgb(var(--border));
}
.navbar-mobile-panel a.navbar-mobile-link.active { color: rgb(var(--primary)); }
.navbar-mobile-user { padding: 12px 6px 10px; font-size: 13px; color: rgb(var(--muted-foreground)); }
.navbar-mobile-panel .btn { margin-top: 12px; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  position: relative; overflow: hidden;
  background: rgb(var(--card));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
@media (max-width: 600px) { .card { padding: 22px; } }
/* Highlighted card: start_2 demo-card material (coral tint, sheen, glow) */
.card-glow {
  background:
    linear-gradient(135deg, rgba(255, 137, 117, 0.10) 0%, transparent 45%, rgba(214, 120, 255, 0.08) 100%),
    rgb(var(--card));
  border-color: rgba(255, 137, 117, 0.18);
  box-shadow: 0 24px 60px rgba(255, 137, 117, 0.08), 0 8px 28px rgba(0, 0, 0, 0.55);
}
.card-glow::before {
  content: ''; position: absolute; top: -60%; left: -25%; width: 55%; height: 220%;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.05) 50%, transparent 58%);
  pointer-events: none;
}
.card > * { position: relative; }
.card-title { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; }
.card-sub { font-size: 14px; color: rgb(var(--muted-foreground)); margin-bottom: 20px; }
.card + .card { margin-top: 20px; }

.divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 24px 0; border: 0; }

/* ── Tags and pills ───────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(var(--primary), 0.12); color: rgb(var(--primary));
}
.tag-muted { background: rgba(255, 255, 255, 0.06); color: rgb(var(--muted-foreground)); }

/* ── Forms ────────────────────────────────────────────────── */
.field { margin-bottom: 20px; }
.field-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.field-hint { font-size: 13px; color: rgb(var(--muted-foreground)); margin-top: 6px; }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: rgb(var(--foreground));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgb(var(--border)); border-radius: 10px;
  padding: 12px 14px; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.input::placeholder, .textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.input:focus, .select:focus, .textarea:focus {
  border-color: rgba(var(--primary), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--primary), 0.15);
  background: rgba(255, 255, 255, 0.06);
}
.select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.5) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.select option { background: rgb(var(--card)); color: rgb(var(--foreground)); }

/* Selectable chips: theme pickers, region pickers, language modes.
   Markup: <label class="chip"><input type="checkbox" name="themes" value="X">X</label>
   The input stays in the form (keyboard and screen-reader accessible),
   visually hidden; :has() styles the selected state. */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgb(var(--border)); color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.02); cursor: pointer; user-select: none;
  transition: all 0.2s ease;
}
.chip:hover { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.2); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip:has(input:checked), .chip.selected {
  background: rgba(var(--primary), 0.14); border-color: rgba(var(--primary), 0.4);
  color: rgb(var(--primary)); font-weight: 600;
}
.chip:has(input:focus-visible) { outline: 2px solid rgb(var(--primary)); outline-offset: 2px; }
.chip:has(input:disabled), .chip.is-locked { opacity: 0.4; cursor: not-allowed; }

/* ── Alerts (flash messages) ──────────────────────────────── */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.5; padding: 12px 16px; border-radius: 10px;
  background: rgba(var(--primary), 0.08); border: 1px solid rgba(var(--primary), 0.28);
  color: rgba(var(--foreground), 0.9); margin-bottom: 20px;
}
.alert-success { background: rgba(var(--success), 0.08); border-color: rgba(var(--success), 0.3); }
.alert-error { background: rgba(var(--danger), 0.1); border-color: rgba(var(--danger), 0.35); }

/* ── Footer (slim version of start_2's) ───────────────────── */
.footer-app {
  position: relative;
  border-top: 1px solid rgb(var(--border)); background: #0A0A0A; padding: 36px 0 32px;
}
.footer-app .footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.footer-logo {
  font-family: var(--font-logo); font-weight: 300; font-size: 17px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
  display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.footer-nav a { font-size: 14px; color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.footer-nav a:hover { color: #FFFFFF; }
.footer-copy { font-size: 13px; color: rgba(255, 255, 255, 0.4); }

/* ── Scroll reveal (start_2 AnimateOnView values) ─────────── */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.21, 0.47, 0.32, 0.98),
              transform 0.8s cubic-bezier(0.21, 0.47, 0.32, 0.98),
              filter 0.8s cubic-bezier(0.21, 0.47, 0.32, 0.98);
}
.reveal-blur { filter: blur(8px); }
.reveal.in-view { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── Small layout utilities ───────────────────────────────── */
.stack-8 > * + * { margin-top: 8px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-blur { opacity: 1; transform: none; filter: none; transition: none; }
  .btn-slide-inner, .btn-slide-dup { transition: none; }
  .btn:hover .btn-slide-inner { transform: none; }
  .btn:hover .btn-slide-dup { transform: translateY(150%); }
}

/* ── Auth pages (login, forgot / reset password) ──────────── */
.auth-shell {
  min-height: calc(100vh - var(--nav-height) - 200px);
  display: flex; align-items: center; justify-content: center;
  padding: 8px 24px 0;
}
.auth-card { width: 100%; max-width: 420px; padding: 32px; }
@media (max-width: 500px) { .auth-card { padding: 26px 22px; } }
.auth-card .h3 { margin-bottom: 8px; }
.auth-card .auth-sub { font-size: 15px; color: rgb(var(--muted-foreground)); margin-bottom: 24px; line-height: 1.5; }
.auth-card .btn-block { margin-top: 4px; }
.auth-links { margin-top: 20px; font-size: 14px; color: rgb(var(--muted-foreground)); text-align: center; }
.auth-links > * + * { margin-top: 8px; }
.auth-links a { color: rgb(var(--primary)); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.field-error { font-size: 13px; color: rgb(var(--danger)); margin-top: 6px; display: none; }
.input.is-invalid { border-color: rgba(var(--danger), 0.7); }

/* ── Long-form legal text (terms, privacy) ─────────────────── */
.legal { font-size: 15px; line-height: 1.75; color: rgba(var(--foreground), 0.78); }
.legal h2 { font-size: 18px; font-weight: 600; color: rgb(var(--foreground)); margin: 36px 0 12px; letter-spacing: -0.01em; }
.legal h3 { font-size: 15px; font-weight: 600; color: rgb(var(--foreground)); margin: 20px 0 8px; }
.legal p + p { margin-top: 14px; }
.legal ul { margin: 12px 0 16px; padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal strong { color: rgb(var(--foreground)); font-weight: 600; }
.legal a { color: rgb(var(--primary)); }
.legal-meta { font-size: 14px; color: rgb(var(--muted-foreground)); margin-top: 10px; }
.legal-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgb(var(--border)); font-size: 14px; }
.legal-foot a { color: rgb(var(--primary)); text-decoration: none; }