/* ============================================================================
   HIDDEN ACE, Design System v2
   ============================================================================
   Refined dark luxury: warm near-black, casino-felt red, hairline gold
   accents, glass surfaces. Green reserved strictly for statistical deltas.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- Color: ink and bone, not a generic dark-mode neutral ---- */
  --bg:           #0d0b09;
  --bg-rise:      #131009;
  --bone:         #f6f1e7;
  --bone-dim:     #d8d0bd;
  --surface:      rgba(246, 241, 231, 0.04);
  --surface-2:    rgba(246, 241, 231, 0.07);
  --surface-3:    rgba(246, 241, 231, 0.1);
  --rule:         rgba(246, 241, 231, 0.14);
  --rule-bright:  rgba(246, 241, 231, 0.28);

  /* ---- Color: blood-felt red, darker and less "accent-button" than a SaaS red ---- */
  --red:          #7a1f1f;
  --red-deep:     #4f1414;
  --red-bright:   #a4302a;
  --red-glow:     rgba(122, 31, 31, 0.28);
  --red-glow-strong: rgba(164, 48, 42, 0.42);

  /* ---- Color: tarnished gold leaf, used as line work and small marks ---- */
  --gold:         #bfa05a;
  --gold-dim:     #8a7340;
  --gold-glow:    rgba(191, 160, 90, 0.16);

  /* ---- Color: statistical green, reserved strictly for live numbers ---- */
  --stat-green:   #4a8f5c;
  --stat-green-glow: rgba(74, 143, 92, 0.18);
  --stat-red:     #a4302a;

  /* ---- Color: text ---- */
  --text:         #efe9db;
  --text-dim:     #a89d89;
  --text-faint:   #5e5648;

  /* ---- Color: state ---- */
  --danger:       #a4302a;
  --danger-dim:   #2a1310;
  --amber:        #bfa05a;
  --amber-dim:    #2a2210;

  /* ---- Type: one oversized serif voice, one quiet utility face, one mono ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---- Geometry: sharp corners as a deliberate choice, not rounded glass ---- */
  --radius-sm:    3px;
  --radius:       3px;
  --radius-lg:    3px;
  --radius-pill:  999px;

  /* ---- Layout ---- */
  --wrap:         1280px;
  --wrap-narrow:  680px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed-fast: 160ms;
  --speed: 320ms;
  --speed-slow: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --speed-fast: 0ms; --speed: 0ms; --speed-slow: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a {
  color: var(--red-bright);
  text-decoration: none;
  transition: color var(--speed-fast) var(--ease);
}
a:hover { text-decoration: none; color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--bone);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
}

p { margin: 0; color: var(--text-dim); }

::selection { background: var(--red-glow-strong); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible { outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  z-index: 999;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 24px; }

.section { padding: 110px 0; position: relative; scroll-margin-top: 90px; }
.section-tight { padding: 68px 0; }
@media (max-width: 720px) {
  .section { padding: 68px 0; }
  .section-tight { padding: 46px 0; }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 0 4px var(--red-glow);
}

.section-head { max-width: 640px; margin-bottom: 60px; }
.section-head h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.14; }
.section-head p { margin-top: 16px; font-size: 17px; color: var(--text-dim); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ============================================================================
   COUNT RAIL, the page's signature element.
   A fixed vertical strip down the left edge (desktop only) that ticks a
   live true-count readout tied to scroll position, like a counter's
   mental tally running alongside the reader. Replaces the eyebrow label
   as the page's primary structural device.
   ========================================================================= */

.count-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 64px;
  border-right: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-rise) 100%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
}
.count-rail-top {
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.count-rail-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.count-rail-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--bone);
  line-height: 1;
  transition: color var(--speed) var(--ease);
}
.count-rail-value.is-positive { color: var(--stat-green); }
.count-rail-value.is-negative { color: var(--stat-red); }
.count-rail-tick {
  width: 18px;
  height: 1px;
  background: var(--rule-bright);
}
.count-rail-bottom {
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

@media (max-width: 980px) {
  .count-rail { display: none; }
}

/* When the rail is present, shift the document body to make room for it
   and give it a matching left gutter so content doesn't run underneath. */
.has-rail { padding-left: 0; }
@media (min-width: 981px) {
  .has-rail .site-header,
  .has-rail main,
  .has-rail .site-footer {
    margin-left: 64px;
  }
}

/* ============================================================================
   LEDGER, an editorial table/list treatment used instead of boxed cards
   for sequential or tabular content (the method, the readout panel).
   ========================================================================= */

.ledger { border-top: 1px solid var(--rule); }
.ledger-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.ledger-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gold);
  padding-top: 4px;
}
.ledger-body h3 { font-size: clamp(20px, 2.6vw, 25px); margin-bottom: 10px; }
.ledger-body p { font-size: 15.5px; max-width: 60ch; }

@media (max-width: 640px) {
  .ledger-row { grid-template-columns: 1fr; gap: 10px; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--speed-fast) var(--ease-soft), background var(--speed) var(--ease), border-color var(--speed-fast), box-shadow var(--speed) var(--ease), color var(--speed-fast);
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0px) scale(0.985); }

.btn-primary {
  background: linear-gradient(155deg, var(--red-bright) 0%, var(--red) 100%);
  color: #fff7f0;
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.08) inset, 0 10px 30px -12px var(--red-glow-strong);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(255,255,255,0.16), transparent 60%);
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
  z-index: -1;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover { box-shadow: 0 1px 0 0 rgba(255,255,255,0.1) inset, 0 14px 36px -10px var(--red-glow-strong); }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--rule);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: var(--surface-3); border-color: var(--rule-bright); }

.btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--rule); }
.btn-ghost:hover { color: var(--text); border-color: var(--rule-bright); }

.btn-gold {
  background: linear-gradient(155deg, #ddb86e 0%, var(--gold) 100%);
  color: #1a1308;
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.25) inset, 0 10px 26px -12px rgba(201,163,90,0.45);
}
.btn-gold:hover { filter: brightness(1.06); }

.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 9px 17px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), backdrop-filter var(--speed) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(10, 9, 8, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}

/* Account pages (dashboard, billing) have a plain flat background with
   no hero artwork behind the header, so the header stays solid at all
   times instead of waiting for scroll, which is the right treatment for
   the homepage's hero but looks broken on a short utility page. */
.site-header.is-solid {
  background: rgba(10, 9, 8, 0.92);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  transition: height var(--speed) var(--ease);
}
.site-header.is-scrolled .header-inner { height: 66px; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--bone); font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.brand:hover { text-decoration: none; color: var(--bone); }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; transition: transform var(--speed) var(--ease-soft); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.04); }

.header-nav { display: flex; align-items: center; gap: 30px; }
[data-auth-nav] { display: contents; }
.header-nav a:not(.btn) { color: var(--text-dim); font-size: 14.5px; font-weight: 500; position: relative; padding-bottom: 4px; }
.header-nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right var(--speed) var(--ease);
}
.header-nav a:not(.btn):hover { color: var(--text); text-decoration: none; }
.header-nav a:not(.btn):hover::after { right: 0; }

.nav-toggle { display: none; background: none; border: none; color: var(--bone); font-size: 22px; cursor: pointer; padding: 4px; }

@media (max-width: 880px) {
  .header-nav { display: none; }
  .header-nav.nav-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(10, 9, 8, 0.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--rule);
    padding: 18px 24px 26px;
    gap: 18px;
  }
  .nav-toggle { display: block; }
}

.inline-form { display: contents; }

.glass {
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 30px 60px -30px rgba(0,0,0,0.6);
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease-soft), box-shadow var(--speed) var(--ease);
}
.glass-hover:hover {
  border-color: var(--rule-bright);
  transform: translateY(-3px);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 36px 70px -28px rgba(0,0,0,0.65);
}
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }

.site-footer { border-top: 1px solid var(--rule); padding: 60px 0 44px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); font-family: var(--font-display); font-weight: 600; font-size: 18px; margin-bottom: 12px; }
.footer-tagline { font-size: 14px; max-width: 240px; }
.footer-col h4 { font-family: var(--font-body); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); margin-bottom: 16px; font-weight: 700; }
.footer-col a { display: block; color: var(--text-dim); font-size: 14.5px; margin-bottom: 12px; }
.footer-col a:hover { color: var(--text); text-decoration: none; }
.footer-bottom {
  margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--text-faint);
}
.footer-disclaimer {
  margin-top: 30px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-faint); line-height: 1.65;
}

@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.mono { font-family: var(--font-mono); }
.text-dim { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }
.text-red { color: var(--red-bright); }
.text-gold { color: var(--gold); }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.status-dot-live { background: var(--stat-green); box-shadow: 0 0 0 4px var(--stat-green-glow); }
.status-dot-off { background: var(--text-faint); }
.status-dot-warn { background: var(--amber); box-shadow: 0 0 0 4px var(--gold-glow); }

.pill {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pill-succeeded { background: var(--stat-green-glow); color: var(--stat-green); }
.pill-failed, .pill-disputed { background: var(--danger-dim); color: var(--danger); }
.pill-refunded { background: var(--gold-glow); color: var(--gold); }

.banner { padding: 15px 19px; border-radius: var(--radius-sm); font-size: 14.5px; margin-bottom: 28px; border: 1px solid; }
.banner-success { background: var(--stat-green-glow); border-color: rgba(63,174,108,0.35); color: #d3f0de; }
.banner-warn { background: var(--amber-dim); border-color: rgba(201,163,90,0.35); color: #f3e3bd; }
.banner-error { background: var(--danger-dim); border-color: rgba(194,75,70,0.4); color: #f6d6d3; }

[data-reveal] {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity var(--speed-slow) var(--ease-soft), transform var(--speed-slow) var(--ease-soft);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); }
[data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--speed) var(--ease-soft), transform var(--speed) var(--ease-soft);
}
[data-reveal="stagger"].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal="stagger"].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal="stagger"].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal="stagger"].is-visible > *:nth-child(6) { transition-delay: 400ms; }

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card {
  width: 100%; max-width: 408px;
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  padding: 38px 34px;
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 40px 80px -36px rgba(0,0,0,0.7);
}
.auth-logo { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 26px; }
.auth-logo img { width: 32px; height: 32px; border-radius: 8px; }
.auth-logo span { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--bone); }
.auth-card h1 { font-size: 24px; text-align: center; margin-bottom: 6px; }
.auth-sub { text-align: center; font-size: 14px; margin-bottom: 30px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.field input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); color: var(--text); font-size: 15px; font-family: var(--font-body);
  padding: 12px 14px; outline: none; transition: border-color var(--speed-fast), box-shadow var(--speed-fast);
}
.field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.field-hint { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; }

.form-msg { font-size: 14px; margin-top: 14px; min-height: 1px; }
.form-msg-error { color: var(--danger); }
.form-msg-success { color: var(--stat-green); }

.auth-footer-link { text-align: center; margin-top: 22px; font-size: 14px; color: var(--text-dim); }

.divider-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-faint); font-size: 13px; }
.divider-or::before, .divider-or::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: var(--bone); color: #1f1f1f; font-weight: 600; font-size: 14.5px; padding: 11px;
  border-radius: var(--radius-sm); border: 1px solid #e6e0d6; transition: background var(--speed-fast);
}
.btn-google:hover { background: #f3ede2; text-decoration: none; }

.dash-body-tag { background: var(--bg); }
.dash-main { padding: 52px 24px 90px; max-width: 760px; }
.back-link { font-size: 14px; color: var(--text-dim); display: inline-block; margin-bottom: 20px; }
.dash-greeting { font-size: 28px; margin-bottom: 30px; }
.dash-card {
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--rule); border-radius: var(--radius);
  backdrop-filter: blur(12px); padding: 28px; margin-bottom: 22px;
}
.dash-card-primary { border-color: var(--red-dim); box-shadow: 0 0 0 1px var(--red-glow) inset; }
.dash-card-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; }
.dash-status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dash-status-text { font-weight: 600; color: var(--bone); }
.dash-card-sub { font-size: 14.5px; margin-top: 6px; margin-bottom: 18px; line-height: 1.65; }
.dash-card-sub:last-child { margin-bottom: 0; }
.dash-warn { color: var(--amber); }
.dash-launch { margin-top: 4px; }

.dash-install-steps {
  margin: 0 0 18px;
  padding-left: 22px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
}
.dash-install-steps li { margin-bottom: 6px; }
.dash-install-steps li:last-child { margin-bottom: 0; }

.billing-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.billing-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); padding: 8px 0; border-bottom: 1px solid var(--rule); }
.billing-table td { padding: 11px 0; border-bottom: 1px solid var(--rule); color: var(--text); }
.billing-table tr:last-child td { border-bottom: none; }

.referral-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 14px 0;
  max-width: 100%;
}
.referral-code {
  font-family: var(--font-mono); font-size: 15px; color: var(--gold); letter-spacing: 0.04em;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.referral-box .btn { flex-shrink: 0; }

@media (max-width: 480px) {
  .referral-box { flex-wrap: wrap; }
  .referral-code { flex-basis: 100%; }
  .referral-box .btn { margin-left: auto; }
}

.referral-stats { display: flex; gap: 20px; margin: 18px 0; }
.referral-stat { flex: 1; }
.referral-stat-num { font-family: var(--font-display); font-size: 28px; color: var(--bone); }
.referral-stat-label { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }