/* =============================================================
   Central GTM Intelligence Dashboard — shared stylesheet
   Source of truth for tokens, components, and base styles
   Brand-aligned dark theme. Pairs with Central design-system.md
   ============================================================= */

/* -- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* -- Tokens --------------------------------------------------- */
:root {
  /* Brand — Central blue scale (from Figma redesign) */
  --c-brand:          #289EFD;            /* primary-500 — Central Blue */
  --c-brand-hover:    #6FBEFE;            /* primary-300 — lighter, used for hover on dark */
  --c-brand-soft:     rgba(40, 158, 253, 0.14);
  --c-brand-ring:     rgba(40, 158, 253, 0.32);
  --c-brand-100:      #BCE1FE;            /* primary-100 */
  --c-brand-50:       #EAF5FF;            /* primary-50 */
  --c-dark-blue:      #3E4756;

  /* Secondary accents (from Figma + brand secondary palette) */
  --c-accent-teal:    #1FA3AC;            /* accent-700 — Figma deep teal */
  --c-cyan:           #5CD4D4;            /* brand secondary */
  --c-cyan-light:     #A5EEEE;
  --c-cyan-soft:      rgba(31, 163, 172, 0.14);
  --c-purple:         #9D2CE9;
  --c-lilac:          #D7B5FF;
  --c-lilac-soft:     rgba(215, 181, 255, 0.14);

  /* Semantic — utility */
  --c-success:        #22C55E;
  --c-success-soft:   rgba(34, 197, 94, 0.14);
  --c-danger:         #EF4444;
  --c-danger-soft:    rgba(239, 68, 68, 0.14);
  --c-warning:        #F59E0B;
  --c-warning-soft:   rgba(245, 158, 11, 0.14);

  /* Surfaces (dark) — Figma blue-tinted dark scale */
  --c-bg:             #0B0F18;            /* deeper than Gray/900, anchors layered effect */
  --c-bg-elev:        #101828;            /* Figma Gray/900 — used under hero */
  --c-surface-1:      #161D2D;            /* card surface */
  --c-surface-2:      #1E2638;            /* nested / hover */
  --c-surface-3:      #232C42;            /* pressed / row hover */
  --c-overlay:        rgba(11, 15, 24, 0.72);

  /* Text — Figma neutral scale inverted for dark mode */
  --c-text:           #F6F7F9;            /* neutral-100 */
  --c-text-soft:      #E0E2E6;            /* neutral-300 */
  --c-text-muted:     #BDC0C6;            /* neutral-600 */
  --c-text-dim:       #94969B;            /* neutral-700 */
  --c-text-faint:     #727478;            /* neutral-800 */

  /* Borders — hairline */
  --c-border:         rgba(255, 255, 255, 0.05);
  --c-border-strong:  rgba(255, 255, 255, 0.09);
  --c-border-accent:  rgba(40, 158, 253, 0.40);
  /* Brand "line" — the Strokes pattern, gradient that fades to nothing */
  --line-brand:       linear-gradient(90deg, transparent 0%, rgba(40, 158, 253, 0.55) 12%, rgba(111, 190, 254, 0.4) 50%, rgba(188, 225, 254, 0.2) 80%, transparent 100%);
  --line-brand-strong: linear-gradient(90deg, transparent 0%, #289EFD 10%, #6FBEFE 55%, rgba(188, 225, 254, 0.5) 85%, transparent 100%);

  /* Brand gradients (subtle, dark-mode friendly) */
  --grad-brand:       linear-gradient(135deg, #289EFD 0%, #5CD4D4 100%);
  --grad-brand-soft:  linear-gradient(135deg, rgba(40, 158, 253, 0.10) 0%, rgba(92, 212, 212, 0.04) 100%);
  --grad-nav:         linear-gradient(180deg, #131722 0%, #0F1115 100%);
  --grad-purple-soft: linear-gradient(135deg, rgba(157, 44, 233, 0.10) 0%, rgba(215, 181, 255, 0.04) 100%);

  /* Typography — families */
  --font-heading:     'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:        'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font:             var(--font-body);
  --mono:             var(--font-mono);

  /* Tracking — Figma uses -0.6 on labels for tight modern feel */
  --track-tight:      -0.018em;
  --track-tighter:    -0.024em;
  --track-display:    -0.032em;

  /* Type scale — Figma-aligned */
  --t-micro:          11px;
  --t-label:          12px;
  --t-caption:        13px;
  --t-body-sm:        14px;   /* Figma Label/Small */
  --t-body:           15px;
  --t-body-lg:        17px;
  --t-h4:             18px;
  --t-h3:             22px;
  --t-h2:             28px;
  --t-h1:             40px;
  --t-display:        56px;
  --t-hero:           72px;   /* Hero metric (Live MRR) */

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 9999px;

  /* Elevation — dark uses border + low-alpha black */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.32);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.48);
  --shadow-glow: 0 0 0 3px var(--c-brand-ring);

  /* Motion */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.32, 0, 0.67, 0);
  --d-instant:   120ms;
  --d-quick:     180ms;
  --d-std:       240ms;
  --d-slow:      400ms;

  /* Legacy compatibility — old single-letter tokens still referenced inline on pages */
  --bg:  var(--c-bg);
  --s1:  var(--c-surface-1);
  --s2:  var(--c-surface-2);
  --s3:  var(--c-surface-3);
  --s4:  var(--c-surface-3);
  --b1:  var(--c-border);
  --b2:  var(--c-border-strong);
  --b3:  rgba(255, 255, 255, 0.16);
  --t1:  var(--c-text);
  --t2:  var(--c-text-muted);
  --t3:  var(--c-text-dim);
  --blue:   var(--c-brand);
  --coral:  #E06840;            /* retained for charts where coral is used */
  --green:  var(--c-success);
  --red:    var(--c-danger);
  --purple: var(--c-purple);
  --amber:  var(--c-warning);
  --teal:   var(--c-cyan);
  --pink:   #D05888;
  --cyan:   var(--c-cyan);
  --lime:   #70C840;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* -- Base ----------------------------------------------------- */
html, body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  min-height: 100vh;
}

/* Body has NO background — brand-bg owns the dark base + brand glows */
body { background: transparent; }

/* Fixed brand background — full viewport at all scroll positions.
   CSS radial gradients recreate the Figma "blurred Central-blue ellipses"
   look, scaling cleanly to any viewport. SVG kept as enrichment overlay. */
.brand-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #0B0B0B;  /* base color until SVG paints */
}
/* Show the Figma SVG anchored to BOTTOM of viewport so the rich blue
   glows (which live in the bottom half of the 1713-tall SVG) are
   actually visible. Top of the SVG extends off-screen above. */
.brand-bg img {
  position: absolute;
  bottom: -100px;
  left: 0;
  width: 100%;
  height: auto;          /* preserve SVG aspect (1440 x 1713) */
  display: block;
  opacity: 1;
}
/* All content sits above the brand-bg */
#auth-gate, .D, .auth-gate { position: relative; z-index: 1; }

::selection { background: var(--c-brand-soft); color: var(--c-text); }

a { color: var(--c-brand); text-decoration: none; transition: color var(--d-quick) var(--ease); }
a:hover { color: var(--c-brand-hover); }

/* Custom scrollbar (subtle, dark) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); }

/* -- Page shell ---------------------------------------------- */
.D {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--s-8) var(--s-24);  /* no top padding — hdr sits flush at top */
  position: relative;
}

/* -- Header — full-viewport-wide, anchored at top (not sticky) ---- */
.hdr {
  /* Extend the bar to viewport edges from inside .D (which is max-width 1320 centered) */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: var(--s-14);
  padding: 0;
  position: sticky;               /* stays at top of viewport while scrolling */
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: linear-gradient(180deg, rgba(11, 15, 24, 0.78) 0%, rgba(11, 15, 24, 0.55) 100%);
  border: 0;
  border-radius: 0;
  /* Subtle inset highlight on the top edge for glass depth */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Inner container constrains nav content to the same 1320px as .D */
.hdr-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
}
/* Brighter brand-blue hairline beneath the nav */
.hdr::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-brand-strong);
  pointer-events: none;
  opacity: 0.85;
}

/* Right-side group — nav links + divider + icon actions */
.hdr-right {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.hdr-sep {
  width: 1px;
  height: 20px;
  background: var(--c-border-strong);
}

/* Logo block — atom mark + Central wordmark */
.hdr .logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-text);
}
.hdr .logo .mark {
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.hdr .logo .wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: var(--track-tight);
  color: var(--c-text);
}
.hdr .logo .ctx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: var(--s-3);
  margin-left: var(--s-2);
  border-left: 1px solid var(--c-border-strong);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* Legacy h1 fallback (kept for pages still using the old markup) */
.hdr h1 {
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
}
.hdr h1 b {
  display: block;
  margin-top: 2px;
  color: var(--c-text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-h4);
  letter-spacing: var(--track-tight);
  text-transform: none;
}
.hdr .ts {
  font-size: var(--t-micro);
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.hdr .nav {
  display: flex;
  gap: var(--s-1);
  align-items: center;
  flex-wrap: wrap;
}
.hdr .nav a {
  font-size: var(--t-body-sm);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--c-text-muted);
  text-decoration: none;
  letter-spacing: var(--track-tight);
  text-transform: none;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: 0;
  position: relative;
  transition: color var(--d-quick) var(--ease);
}
.hdr .nav a::after {
  content: '';
  position: absolute;
  left: var(--s-3); right: var(--s-3);
  bottom: -2px;
  height: 2px;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--d-quick) var(--ease);
}
.hdr .nav a:hover { color: var(--c-text); }
.hdr .nav a:hover::after { transform: scaleX(0.5); opacity: 0.5; }
.hdr .nav a.cur {
  color: var(--c-text);
  background: transparent;
}
.hdr .nav a.cur::after { transform: scaleX(1); }

.hdr .nav .sep {
  width: 1px;
  height: 16px;
  background: var(--c-border-strong);
  margin: 0 var(--s-2);
}

.hdr .actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.hdr .actions .ts {
  margin-left: var(--s-3);
  padding-left: var(--s-3);
  border-left: 1px solid var(--c-border-strong);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* Icon-only button (Hide test, Sync funnel, Sync subs) — 32x32 circular */
.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  color: var(--c-text-muted);
  cursor: pointer;
  padding: 0;
  transition: all var(--d-quick) var(--ease);
}
.icon-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
.icon-btn:hover {
  color: var(--c-text);
  border-color: var(--c-brand);
  background: var(--c-brand-soft);
}
.icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
}
/* States — running / done / err / on (toggled) */
.icon-btn.running { color: var(--c-warning); border-color: var(--c-warning); pointer-events: none; }
.icon-btn.running svg { animation: icon-spin 1s linear infinite; }
.icon-btn.done    { color: var(--c-success); border-color: var(--c-success); }
.icon-btn.err     { color: var(--c-danger);  border-color: var(--c-danger);  }
.icon-btn.on      { color: var(--c-brand); border-color: var(--c-brand); background: var(--c-brand-soft); }
@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

/* -- Date range / control bar — clean horizontal row, no box - */
.dr {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.dr button {
  background: transparent;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  color: var(--c-text-muted);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--t-body-sm);
  padding: 6px 14px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: var(--track-tight);
  transition: all var(--d-quick) var(--ease);
}
.dr button:hover { border-color: var(--c-brand); color: var(--c-text); }
.dr button.on {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}
.dr .sep { width: 1px; height: 20px; background: var(--c-border-strong); margin: 0 var(--s-1); }
.dr input[type="date"] {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  padding: 6px 10px;
  outline: none;
}
.dr input[type="date"]:focus { border-color: var(--c-brand); box-shadow: var(--shadow-glow); }
.dr input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.65); cursor: pointer; }
.dr label {
  font-size: var(--t-label);
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* -- Momentum / trends strip — typographic, no boxes -------- */
.mom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin-bottom: var(--s-14);
}
.mom .m {
  background: transparent;
  background-image: none;
  border: 0;
  border-left: 1px solid var(--c-border);
  border-radius: 0;
  padding: var(--s-3) var(--s-5);
  position: relative;
  overflow: visible;
  transition: background var(--d-quick) var(--ease);
}
.mom .m:first-child { border-left: 0; padding-left: 0; }
.mom .m:hover { background: rgba(255, 255, 255, 0.015); }
.mom .m .lb {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  margin-bottom: 6px;
  font-weight: 500;
}
.mom .m .vl {
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: var(--track-tighter);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  font-family: var(--font-heading);
  color: var(--c-text);
}
.mom .m .dt, .mom .m .chg {
  font-size: var(--t-label);
  font-family: var(--font-mono);
  margin-top: var(--s-2);
  color: var(--c-text-muted);
  line-height: 1.45;
}
.mom .m .chg { display: flex; align-items: center; gap: 4px; }
.mom .m .chg .ar { font-size: 13px; }
.mom .m .bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  border-radius: 0 1px 0 0;
  transition: width 0.6s var(--ease);
}

.up, .pos { color: var(--c-success); }
.dn, .neg { color: var(--c-danger); }
.fl       { color: var(--c-text-dim); }
.warn     { color: var(--c-warning); }

/* -- Insights strip — typographic, no boxes ---------------- */
.ins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  margin-bottom: var(--s-14);
}
.ins .i {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--c-border);
  border-radius: 0;
  padding: var(--s-3) var(--s-5);
  transition: background var(--d-quick) var(--ease);
}
.ins .i:first-child { border-left: 0; padding-left: 0; }
.ins .i:hover { background: rgba(255, 255, 255, 0.015); }
.ins .i .lb {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  margin-bottom: var(--s-2);
  font-weight: 500;
}
.ins .i .vl {
  font-size: var(--t-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-heading);
  letter-spacing: var(--track-tighter);
  color: var(--c-text);
}
.ins .i .dt {
  font-size: var(--t-label);
  color: var(--c-text-muted);
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  line-height: 1.55;
}

/* -- Grid helpers (G, G3) ------------------------------------ */
.G3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8) var(--s-6);
  margin-bottom: var(--s-8);
}
@media (max-width: 900px) { .G3 { grid-template-columns: 1fr; } }

.G {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8) var(--s-6);
  margin-bottom: var(--s-14);
}
@media (max-width: 800px) { .G { grid-template-columns: 1fr; } }

/* -- Chart cell — no box, typographic header only ----------- */
.C {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 var(--s-5);
  display: flex;
  flex-direction: column;
  position: relative;
}
.C::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--c-brand);
  opacity: 0.85;
}
.C { padding-top: var(--s-3); }
.C.w { grid-column: 1 / -1; }
.C h2 {
  font-family: var(--font-heading);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--c-text);
  margin-top: var(--s-2);
  margin-bottom: 4px;
}
.C .sub {
  font-size: var(--t-caption);
  color: var(--c-text-muted);
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  line-height: 1.5;
  letter-spacing: var(--track-tight);
}
.C .cw { position: relative; flex: 1; min-height: 220px; }

/* -- Legend --------------------------------------------------- */
.lg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  font-size: var(--t-micro);
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lg span { display: flex; align-items: center; gap: 5px; }
.lg i {
  width: 8px; height: 8px;
  border-radius: 2px;
  display: inline-block;
}

/* -- Sections — typographic anchors with brand-line dividers - */
.sec { margin-bottom: var(--s-16); }
.sec h3 {
  font-family: var(--font-heading);
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: var(--track-tighter);
  color: var(--c-text);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 0;
  position: relative;
}
/* Brand "line" divider beneath section heading — replaces solid border */
.sec h3::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-brand-strong);
}

/* -- Hero wrap — the page layer that the glass sits over ----- */
.hero-wrap {
  position: relative;
  margin: 0 0 var(--s-16);
}
/* Brand line — sits ON THE PAGE behind the hero. Real <img> tag so the
   full SVG renders without clipping. The hero's glass blurs it through
   the frost; line extends past hero edges to read as a sweep across. */
.hero-wrap .hero-line {
  position: absolute;
  width: calc(100vw + 20px);  /* 20px wider than viewport — spills 10px past each screen edge */
  height: auto;               /* preserve SVG aspect — no clipping */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
  display: block;
}

/* -- Hero metric — frosted glass card, no own line ---------- */
.hero-metric {
  position: relative;
  z-index: 1;
  padding: var(--s-12) var(--s-8);
  overflow: hidden;
  border-radius: var(--r-xl);
  /* Frosted glass: semi-transparent surface that lets the brand-bg + line
     show through, backdrop blur creates the frost. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(20, 26, 42, 0.32);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(40, 158, 253, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.32);
}
.hero-metric::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(40% 80% at 12% 40%, rgba(40, 158, 253, 0.10), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-metric > * { position: relative; z-index: 1; }

/* Eyebrow row — period label + comparison context */
.hero-metric .hero-eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
  gap: var(--s-3);
}
.hero-metric .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.hero-metric .eyebrow-ctx {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* Five-column hero — signups · trials · demos · MRR · customers */
.hero-metric .hero-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-6);
  align-items: end;
}
@media (max-width: 1100px) {
  .hero-metric .hero-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .hero-metric .hero-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Hero stat — big number with delta + label */
.hero-metric .hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  position: relative;
  padding-left: var(--s-5);
  border-left: 1px solid var(--c-border-strong);
}
.hero-metric .hero-stat:first-child {
  padding-left: 0;
  border-left: 0;
}
/* Lagged stats — visually grouped with a brand accent dot to signal they reference an earlier cohort */
.hero-metric .hero-stat.hero-lag {
  border-left-color: var(--c-border-accent);
}
.hero-metric .hero-stat.hero-lag::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-bg);
}

.hero-metric .hero-stat-value {
  font-family: var(--font-heading);
  font-size: var(--t-h1);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.hero-metric .hero-stat-delta {
  font-family: var(--font-heading);
  font-size: var(--t-body-sm);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  color: var(--c-success);
  font-variant-numeric: tabular-nums;
}
.hero-metric .hero-stat-delta.dn { color: var(--c-danger); }
.hero-metric .hero-stat-delta.fl { color: var(--c-text-dim); }
.hero-metric .hero-stat-label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-top: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.hero-metric .hero-stat-label .lag-tag {
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: var(--c-brand-soft);
  color: var(--c-brand);
  border: 1px solid var(--c-border-accent);
}

/* Secondary stats row — spend, CAC, signups, trials */
.hero-metric .hero-sub {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--c-text-soft);
  letter-spacing: var(--track-tight);
}
.hero-metric .hero-sub .sub-item { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.hero-metric .hero-sub .sub-item .lb { color: var(--c-text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t-micro); }
.hero-metric .hero-sub .sub-item .vl { color: var(--c-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.hero-metric .hero-sub .sub-sep { color: var(--c-text-faint); }

/* Anchor — Live MRR + active customers + ARPU, the "where are we" context */
.hero-metric .hero-anchor {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--c-text-dim);
  letter-spacing: 0.04em;
}
.hero-metric .hero-anchor strong {
  color: var(--c-text-soft);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* -- KPI group — typographic, no card boxes ------------------ */
.kpi-group {
  margin-bottom: var(--s-14);
}
.kpi-group .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-3);
  position: relative;
}
.kpi-group .head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-brand-strong);
}
.kpi-group .head h3 {
  font-family: var(--font-heading);
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: var(--track-tighter);
  color: var(--c-text);
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.kpi-group .head h3::after { display: none; }
.kpi-group .head .ctx {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* Stat row — no boxes, vertical line dividers between stats */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  align-items: stretch;
}
.stat-row .stat {
  padding: var(--s-2) var(--s-6) var(--s-3);
  border-left: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.stat-row .stat:first-child { border-left: 0; padding-left: 0; }
.stat-row .stat .lb {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.stat-row .stat .vl {
  font-family: var(--font-heading);
  font-size: var(--t-h1);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.stat-row .stat .dt {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--c-text-muted);
  line-height: 1.5;
}
.stat-row .stat.pos .vl { color: var(--c-text); }
.stat-row .stat.pos .dt { color: var(--c-success); }
.stat-row .stat.neg .dt { color: var(--c-danger); }
.stat-row .stat.warn .dt { color: var(--c-warning); }

/* -- Tabs ----------------------------------------------------- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--c-border-strong);
  margin-bottom: var(--s-3);
}
.tabs button {
  background: none;
  border: none;
  color: var(--c-text-muted);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--t-caption);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.01em;
  transition: all var(--d-quick) var(--ease);
}
.tabs button:hover { color: var(--c-text); }
.tabs button.on {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
}

/* -- Side-by-side section row (e.g. Product + Churn) ---------- */
.sec-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-10);
  margin-bottom: var(--s-16);
}
@media (max-width: 900px) {
  .sec-row { grid-template-columns: 1fr; }
}
.sec-row > .sec { margin-bottom: 0; }

/* Sub-grid inside a single section — used in Churn detail for plans + weekly */
.split-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
@media (max-width: 700px) {
  .split-tables { grid-template-columns: 1fr; }
}
.split-tables .sub-head {
  font-family: var(--font-heading);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  color: var(--c-text-soft);
  margin-bottom: var(--s-2);
}

/* -- Tables — clean, brand-accented, readable --------------- */
.tbl-wrap {
  overflow-x: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  /* subtle outer hairline to ground the table on the page */
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body-sm);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}
table th {
  text-align: right;
  padding: var(--s-3) var(--s-4);
  color: var(--c-text-dim);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--t-micro);
  border-bottom: 1px solid var(--c-border-accent);
  background: transparent;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
table th:first-child { text-align: left; }
table td {
  text-align: right;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
  color: var(--c-text-soft);
  font-feature-settings: "tnum", "lnum";
}
table td:first-child {
  text-align: left;
  color: var(--c-text);
  font-weight: 500;
  font-family: var(--font-heading);
  letter-spacing: var(--track-tight);
}
/* Subtle alt-row stripe — visible enough to scan, quiet enough not to dominate */
table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.022); }
/* Row hover — brand-blue tint */
table tbody tr:hover td { background: rgba(40, 158, 253, 0.07); }
table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--c-brand); }
table tr:last-child td { border-bottom: none; }
/* Negative / positive emphasis inside cells (existing classes) */
table td.neg { color: var(--c-danger); font-weight: 500; }
table td.pos { color: var(--c-success); font-weight: 500; }
/* Sub-table caption row (e.g., "Weekly") between two tables */
.tbl-wrap + .tbl-wrap { margin-top: var(--s-3); }

/* -- Lifecycle grid — typographic stat row ------------------ */
.lc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin-bottom: var(--s-6);
}
.lc-grid .lc {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--c-border);
  border-radius: 0;
  padding: var(--s-2) var(--s-5);
}
.lc-grid .lc:first-child { border-left: 0; padding-left: 0; }
.lc-grid .lc .lb {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  margin-bottom: var(--s-1);
  font-weight: 500;
}
.lc-grid .lc .vl {
  font-size: var(--t-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-heading);
  letter-spacing: var(--track-tighter);
  color: var(--c-text);
}
.lc-grid .lc .dl {
  font-size: var(--t-label);
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  margin-top: 2px;
}

/* -- Loader — full-viewport scrim with animated Central atom on top.
     Dashboard renders BEHIND it; the scrim's mask fades radially from
     center to reveal the page during the slide-out. */
.ld {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  background: #0B0B0B;
  color: var(--c-text-muted);
  font-size: var(--t-body);
  font-family: var(--font-mono);
}
/* Register an animatable percentage so the browser can interpolate the
   mask radial-gradient smoothly. Without @property the browser treats
   gradient stop values as discrete and snaps. */
@property --reveal-r {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* Radial reveal — transparent circle grows from center, dashboard appears.
   The inner transparent stop TRAILS the outer #000 stop by 6%. When
   --reveal-r is 0%, both stops collapse to 0% (clamped from -6%) and the
   scrim is fully opaque. As --reveal-r grows, the 6% feather opens up. */
.ld {
  --reveal-r: 0%;
  -webkit-mask-image: radial-gradient(
    circle at center,
    transparent calc(var(--reveal-r) - 6%),
    #000 var(--reveal-r)
  );
  mask-image: radial-gradient(
    circle at center,
    transparent calc(var(--reveal-r) - 6%),
    #000 var(--reveal-r)
  );
}
.ld.revealing {
  animation: scrim-reveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes scrim-reveal {
  from { --reveal-r: 0%;   }
  to   { --reveal-r: 110%; }
}
.loader-atom {
  width: 96px;
  height: 96px;
  display: block;
  overflow: visible;       /* let parts render outside the 96px SVG box during explode */
  filter: drop-shadow(0 0 20px rgba(40, 158, 253, 0.45));
}
/* No clipping on the loader container either */
.ld { overflow: visible; }
/* Default state: slow continuous spin while loading */
.loader-atom .atom-rotor {
  transform-origin: 150px 234px;
  animation: atom-spin-slow 6s linear infinite;
}
.loader-atom .atom-part {
  transform-origin: 150px 234px;
  /* No animation by default — parts hold steady, the rotor spins around them */
}
/* Explode destinations — off-screen in each part's natural direction.
   Click-in is handled by scaling the .atom-clicker parent group (so the
   shrink is independent of the rotor's 45° rotation and looks like all
   four arms moving toward the atom center). */
.loader-atom .atom-top    { --tx: 0;       --ty: -1000px; }
.loader-atom .atom-right  { --tx: 1000px;  --ty: 0;       }
.loader-atom .atom-bottom { --tx: 0;       --ty: 1000px;  }
.loader-atom .atom-left   { --tx: -1000px; --ty: 0;       }
/* Clicker group — its scale handles the "click in" effect */
.loader-atom .atom-clicker { transform-origin: 150px 234px; }

@keyframes atom-spin-slow {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

/* Reveal sequence:
   1) Rotor decelerates to 45° (driven by JS) — 0.45s
   2) Clicker group scales 1 → 0.85 — the "click in" — 0.32s
   3) Hold the contracted state — 0.18s
   4) Parts slide out to off-screen — 0.95s
*/
.loader-atom.exploding .atom-clicker {
  animation: atom-click-in 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.45s forwards;
}
.loader-atom.exploding .atom-part {
  animation: atom-explode 0.95s cubic-bezier(0.55, 0, 0.85, 0.2) 0.95s forwards;
}
@keyframes atom-click-in {
  from { transform: scale(1);    }
  to   { transform: scale(0.85); }       /* 15% inward */
}
@keyframes atom-explode {
  0%   { transform: translate(0, 0);                opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}

/* Page wipe-in for content arriving after the explode */
#content.wipe-in {
  animation: page-wipe-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes page-wipe-in {
  0%   { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.loader-label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .loader-atom .atom-rotor,
  .loader-atom .atom-part { animation: none; }
  .loader-label           { animation: none; }
}

/* -- Sync / utility button — clean ghost link --------------- */
.sync-btn {
  background: transparent;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  color: var(--c-text-muted);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--t-body-sm);
  letter-spacing: var(--track-tight);
  padding: 6px 14px;
  cursor: pointer;
  text-transform: none;
  transition: all var(--d-quick) var(--ease);
}
.sync-btn:hover { color: var(--c-text); border-color: var(--c-brand); }
.sync-btn.running { color: var(--c-warning); border-color: var(--c-warning); pointer-events: none; }
.sync-btn.done    { color: var(--c-success); border-color: var(--c-success); }
.sync-btn.err     { color: var(--c-danger);  border-color: var(--c-danger);  }

/* -- Buttons (generic) --------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--t-body-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--d-quick) var(--ease);
  background: var(--c-surface-2);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.btn:hover { border-color: var(--c-border-accent); }
.btn.primary {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}
.btn.primary:hover { background: var(--c-brand-hover); border-color: var(--c-brand-hover); }
.btn.ghost { background: transparent; }

/* -- Badges --------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border-strong);
}
.badge.brand   { background: var(--c-brand-soft);   color: var(--c-brand);   border-color: var(--c-border-accent); }
.badge.cyan    { background: var(--c-cyan-soft);    color: var(--c-cyan);    border-color: rgba(92, 212, 212, 0.32); }
.badge.success { background: var(--c-success-soft); color: var(--c-success); border-color: rgba(34, 197, 94, 0.32); }
.badge.danger  { background: var(--c-danger-soft);  color: var(--c-danger);  border-color: rgba(239, 68, 68, 0.32); }
.badge.warning { background: var(--c-warning-soft); color: var(--c-warning); border-color: rgba(245, 158, 11, 0.32); }
.badge.lilac   { background: var(--c-lilac-soft);   color: var(--c-lilac);   border-color: rgba(215, 181, 255, 0.32); }

/* -- Auth gate ------------------------------------------------ */
.auth-gate, #auth-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(40, 158, 253, 0.16), transparent 60%),
    radial-gradient(700px 400px at 90% 100%, rgba(92, 212, 212, 0.10), transparent 60%),
    var(--c-bg) !important;
  font-family: var(--font-body);
}

/* Signature wave behind the auth form — brand introduction moment */
.auth-gate::before, #auth-gate::before {
  content: '';
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  height: 240px;
  pointer-events: none;
  opacity: 0.85;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 240' preserveAspectRatio='none'><defs><linearGradient id='wg' x1='0%25' y1='0%25' x2='100%25' y2='0%25'><stop offset='0%25' stop-color='%23289EFD' stop-opacity='0'/><stop offset='10%25' stop-color='%23289EFD' stop-opacity='0.95'/><stop offset='45%25' stop-color='%235CD4D4' stop-opacity='0.7'/><stop offset='80%25' stop-color='%23A5EEEE' stop-opacity='0.25'/><stop offset='100%25' stop-color='%23DDF2FF' stop-opacity='0'/></linearGradient></defs><path d='M0 140 C 220 20, 420 220, 700 130 S 1120 -20, 1400 80' fill='none' stroke='url(%23wg)' stroke-width='5' stroke-linecap='round'/></svg>");
}
.auth-gate > *, #auth-gate > * { position: relative; z-index: 1; }
.auth-gate .eyebrow {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-brand);
  font-family: var(--font-mono);
  margin-bottom: var(--s-2);
}
.auth-gate .title {
  font-size: var(--t-h2);
  font-weight: 600;
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-6);
}
.auth-gate input {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--t-body);
  padding: 12px 16px;
  outline: none;
  width: 280px;
  text-align: center;
  transition: border-color var(--d-quick) var(--ease), box-shadow var(--d-quick) var(--ease);
}
.auth-gate input:focus { border-color: var(--c-brand); box-shadow: var(--shadow-glow); }
.auth-gate .err {
  font-size: var(--t-label);
  color: var(--c-danger);
  font-family: var(--font-mono);
  margin-top: var(--s-2);
  height: 16px;
}

/* -- Cohort table (heat-map style) --------------------------- */
.cohort-heat td {
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.cohort-heat td.h0 { background: rgba(255, 255, 255, 0.02); }
.cohort-heat td.h1 { background: rgba(40, 158, 253, 0.10); color: var(--c-text); }
.cohort-heat td.h2 { background: rgba(40, 158, 253, 0.18); color: var(--c-text); }
.cohort-heat td.h3 { background: rgba(40, 158, 253, 0.28); color: #fff; }
.cohort-heat td.h4 { background: rgba(40, 158, 253, 0.42); color: #fff; }
.cohort-heat td.h5 { background: rgba(40, 158, 253, 0.60); color: #fff; }

/* -- Utility classes ----------------------------------------- */
.muted   { color: var(--c-text-muted); }
.dim     { color: var(--c-text-dim); }
.mono    { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.hidden  { display: none !important; }

/* -- Print --------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .hdr .nav, .dr, .sync-btn { display: none; }
}