/* ============================================================
   VIREON — SHARED DESIGN SYSTEM
   Per VIREON_BRAND_GUIDELINES.md v1.0
   Light institutional marketing surface + dark "terminal" product
   surface, used only for signal cards / live data components.
   ============================================================ */

:root{
  /* ---- Primary palette (Section 2.2) ---- */
  --navy: #0B1E3D;
  --blue: #2F5DFF;
  --ink: #0A0E1A;
  --pearl: #FAFAF8;
  --platinum: #E4E6EB;

  /* ---- Luxury accent — premium tier only (Section 2.3) ---- */
  --gold: #C9A24B;
  --champagne: #EFE6D8;

  /* ---- Functional / signal colors (Section 2.4) ---- */
  --sig-green: #1FAA6B;
  --sig-red: #E24C4C;
  --sig-amber: #E2A93B;
  --data-grey: #5B6B85;

  /* ---- Derived tones (not in spec, used for hierarchy) ---- */
  --navy-body: #33415F;      /* body copy on light surfaces, softer than pure navy */
  --white: #FFFFFF;
  --ink-line: #1E2536;       /* hairline borders on dark surfaces */
  --ink-raised: #101828;     /* slightly raised dark surface */

  /* ---- Typography (Section 3) ---- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --max: 1160px;
  --edge: clamp(20px, 5vw, 64px);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--pearl);
  color: var(--navy-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; }
button{ font-family: inherit; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }

.wrap{ max-width: var(--max); margin: 0 auto; padding-inline: var(--edge); }

h1, h2, h3, h4{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--navy); }
/* Hard rule (3.3): Space Grotesk is a display face only — never used for paragraph text. */
p, li, span, td, th{ font-family: var(--font-body); }

.mono{ font-family: var(--font-mono); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  display:flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--blue); flex-shrink:0; }
.eyebrow.gold{ color: var(--gold); }
.eyebrow.gold::before{ background: var(--gold); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 13px 24px; border-radius: 8px;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--blue); color: var(--white); }
.btn-primary:hover{ background: #2450DE; }
.btn-outline{ background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover{ background: var(--navy); color: var(--white); }
.btn-gold{ background: var(--gold); color: var(--ink); }
.btn-gold:hover{ background: #D9B667; }
.btn-ghost-dark{ background: transparent; border-color: #2A3348; color: var(--white); }
.btn-ghost-dark:hover{ border-color: var(--blue); background: rgba(47,93,255,0.12); }
.btn-sm{ padding: 9px 16px; font-size: 13px; }
.btn-block{ width:100%; justify-content:center; }

/* ============================================================
   NAV
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(250, 250, 248, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--platinum);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; height: 72px; gap: 20px; }
.logo{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--navy); flex-shrink:0; }
.logo svg{ width: 26px; height: 26px; flex-shrink:0; }
.nav-links{ display:flex; align-items:center; gap: 30px; flex-grow:1; justify-content:center; }
.nav-links a{ font-size: 14px; font-weight: 500; color: var(--navy-body); transition: color 0.15s ease; }
.nav-links a:hover, .nav-links a.active{ color: var(--blue); }
.nav-toggle{ display:none; background:none; border:none; color: var(--navy); font-size: 22px; }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .navbar .btn-primary.nav-cta-desktop{ display:none; }
  .nav-toggle{ display:block; }
}

.mobile-menu{
  display:none; flex-direction:column; gap: 2px;
  background: var(--pearl); border-bottom: 1px solid var(--platinum);
  padding: 8px var(--edge) 20px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding: 12px 4px; font-size: 15px; color: var(--navy-body); border-bottom: 1px solid var(--platinum); }
.mobile-menu .btn{ margin-top: 14px; }

/* ============================================================
   LAYOUT / SECTIONS
   ============================================================ */
section{ padding-block: clamp(56px, 8vw, 108px); }
section.divider{ border-top: 1px solid var(--platinum); }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head h2{ font-size: clamp(26px, 3.2vw, 38px); margin-top: 14px; line-height: 1.18; }
.section-head p{ margin-top: 16px; font-size: 16px; max-width: 560px; }
.center{ text-align:center; margin-inline:auto; }

.page-hero{ padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(40px, 6vw, 64px); }
.page-hero .eyebrow{ margin-bottom: 16px; }
.page-hero h1{ font-size: clamp(32px, 4.6vw, 52px); line-height: 1.1; max-width: 780px; }
.page-hero p.lede{ font-size: 17.5px; margin-top: 20px; max-width: 600px; }

/* ============================================================
   CARDS — LIGHT SURFACE
   ============================================================ */
.card{
  background: var(--white);
  border: 1px solid var(--platinum);
  border-radius: 12px;
  padding: 28px 26px;
}
.card h3{ font-size: 18px; }
.card p{ font-size: 14.5px; margin-top: 10px; color: var(--navy-body); }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px){ .grid-2, .grid-3{ grid-template-columns: 1fr; } }

/* ============================================================
   DARK "TERMINAL" PRODUCT SURFACE — Section 6.2 / 6.3
   Used only for real product artifacts: signal cards, pipeline
   preview, live-data blocks. Never used for general marketing copy.
   ============================================================ */
.terminal-surface{
  background: var(--ink);
  color: var(--white);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 44px);
}
.terminal-surface .eyebrow{ color: var(--blue); }
.terminal-surface h2, .terminal-surface h3{ color: var(--white); }
.terminal-surface p{ color: #B7C0D4; }

/* ---- Signal card component (Section 6.3) ---- */
.signal-card{
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.signal-card.premium{ border-top: 3px solid var(--gold); }
.signal-card .sc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; flex-wrap:wrap; }
.signal-card .sc-ticker{ font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--white); }
.signal-card .sc-badge{
  font-family: var(--font-mono); font-size: 11px; padding: 4px 9px; border-radius: 5px;
  background: rgba(31,170,107,0.14); color: var(--sig-green); letter-spacing: 0.04em;
}
.signal-card .sc-badge.fail{ background: rgba(226,76,76,0.14); color: var(--sig-red); }
.signal-card .sc-badge.amber{ background: rgba(226,169,59,0.14); color: var(--sig-amber); }
.signal-card .sc-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size: 13.5px; padding: 9px 0; border-top: 1px solid var(--ink-line);
  gap: 12px; flex-wrap:wrap;
}
.signal-card .sc-row .sc-label{ color: var(--data-grey); font-family: var(--font-body); }
.signal-card .sc-row .sc-value{ font-family: var(--font-mono); color: var(--white); }
.signal-card .sc-row .sc-value.green{ color: var(--sig-green); }
.signal-card .sc-row .sc-value.red{ color: var(--sig-red); }
.signal-card .sc-row .sc-value.amber{ color: var(--sig-amber); }

.redact{
  filter: blur(6px);
  user-select:none;
}
.redact-tag{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(10,14,26,0.35);
}
.redact-tag span{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  background: var(--ink); border: 1px solid var(--ink-line); color: var(--gold);
  padding: 7px 14px; border-radius: 20px; text-transform:uppercase;
}
.signal-card-caption{ font-family: var(--font-mono); font-size: 12px; color: var(--data-grey); margin-top: 12px; }

/* ---- Sample-data notice — used wherever a card is illustrative, not a real historical signal ---- */
.sample-flag{
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform:uppercase;
  color: var(--sig-amber); border: 1px solid rgba(226,169,59,0.35); background: rgba(226,169,59,0.08);
  padding: 5px 10px; border-radius: 20px; margin-bottom: 14px;
}

/* ============================================================
   PIPELINE DIAGRAM (light mode, reused Home + How It Works)
   ============================================================ */
.pipeline-diagram{
  background: var(--white); border: 1px solid var(--platinum); border-radius: 14px;
  padding: 32px clamp(18px,4vw,36px) 28px;
}
.pipeline-track{ position:relative; display:grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-top: 8px; }
.pipeline-track::before{ content:''; position:absolute; left:0; right:0; top:17px; height:1px; background: var(--platinum); }
.p-stage{ position:relative; }
.p-node{
  width:34px; height:34px; border-radius:50%; background: var(--pearl);
  border: 1.5px solid var(--blue); color: var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size: 12px; margin-bottom: 14px;
}
.p-num{ font-family: var(--font-mono); font-size: 11px; color: var(--data-grey); display:block; margin-bottom:4px; }
.p-name{ font-family: var(--font-display); font-size: 14.5px; font-weight:600; color: var(--navy); }
.p-desc{ font-family: var(--font-mono); font-size: 11.5px; color: var(--data-grey); margin-top:6px; line-height:1.5; }
@media (max-width: 760px){
  .pipeline-track{ grid-template-columns: 1fr; gap: 22px; }
  .pipeline-track::before{ display:none; }
}

/* ============================================================
   STAT STRIP — honest "not connected yet" placeholder state
   ============================================================ */
.stat-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--ink-line); border:1px solid var(--ink-line); border-radius:12px; overflow:hidden; }
.stat-cell{ background: var(--ink-raised); padding: 22px 20px; }
.stat-cell .sv{ font-family: var(--font-mono); font-size: 22px; color: var(--white); font-weight:600; letter-spacing: 0.02em; }
.stat-cell .sv.pending{ color: var(--data-grey); }
.stat-cell .sl{ font-family: var(--font-body); font-size: 12.5px; color: var(--data-grey); margin-top:6px; }
@media (max-width: 760px){ .stat-strip{ grid-template-columns: 1fr 1fr; } }

.pending-note{
  margin-top: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--data-grey);
  display:flex; align-items:center; gap:8px;
}
.pending-note::before{ content:''; width:6px; height:6px; border-radius:50%; border: 1.5px solid var(--data-grey); }

/* ---- Ambient activity feed — placeholder state ---- */
.activity-feed{ display:flex; flex-direction:column; gap:0; border: 1px solid var(--ink-line); border-radius: 12px; overflow:hidden; }
.activity-row{
  display:flex; justify-content:space-between; gap:12px; padding: 13px 18px;
  border-bottom: 1px solid var(--ink-line); background: var(--ink-raised);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--data-grey);
}
.activity-row:last-child{ border-bottom:none; }

/* ============================================================
   MEMBERSHIP COMPARISON TABLE
   ============================================================ */
.tier-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tier-card{ background: var(--white); border: 1px solid var(--platinum); border-radius:14px; padding: 30px 26px; display:flex; flex-direction:column; }
.tier-card.gold{ border: 1.5px solid var(--gold); background: linear-gradient(180deg, var(--champagne), var(--white) 42%); position:relative; }
.tier-flag{ position:absolute; top:-1px; right:22px; background: var(--gold); color: var(--ink); font-family: var(--font-mono); font-size: 10.5px; font-weight:600; padding: 5px 10px; border-radius: 0 0 6px 6px; letter-spacing: 0.05em; }
.tier-card .tname{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform:uppercase; color: var(--data-grey); }
.tier-card .tprice{ font-family: var(--font-display); font-size: 36px; font-weight:700; color: var(--navy); margin-top:10px; display:flex; align-items:baseline; gap:8px; }
.tier-card .tprice span{ font-family: var(--font-mono); font-size: 13px; color: var(--navy-body); font-weight:400; }
.tier-was{ font-family: var(--font-mono); font-size: 12.5px; color: var(--data-grey); text-decoration: line-through; }
.tier-list{ margin-top: 22px; display:flex; flex-direction:column; gap: 12px; flex-grow:1; }
.tier-list li{ display:flex; gap:10px; font-size: 14px; color: var(--navy-body); line-height:1.5; }
.tier-list li::before{ content:'—'; color: var(--blue); flex-shrink:0; }
.tier-card.gold .tier-list li::before{ color: var(--gold); }
.tier-card .btn{ margin-top: 26px; }
@media (max-width: 760px){ .tier-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-group + .faq-group{ margin-top: 40px; }
.faq-group-title{ font-family: var(--font-mono); font-size: 12px; letter-spacing:0.1em; text-transform:uppercase; color: var(--blue); margin-bottom: 6px; }
.faq-item{ border-bottom: 1px solid var(--platinum); }
.faq-item:first-child{ border-top: 1px solid var(--platinum); }
.faq-q{ width:100%; background:none; border:none; text-align:left; display:flex; justify-content:space-between; align-items:center; padding: 20px 2px; font-family: var(--font-display); font-size: 16px; font-weight:600; color: var(--navy); }
.faq-q .plus{ font-family: var(--font-mono); color: var(--blue); font-size:18px; transition: transform 0.2s ease; margin-left:20px; flex-shrink:0; }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height 0.25s ease; }
.faq-a p{ padding: 0 2px 20px; max-width: 640px; font-size: 14.5px; color: var(--navy-body); }
.faq-item.open .faq-a{ max-height: 240px; }

/* ============================================================
   RISK / DISCLAIMER BANNER
   ============================================================ */
.disclaimer-banner{
  background: var(--champagne); border: 1px solid var(--gold);
  border-radius: 10px; padding: 16px 20px;
  font-size: 13.5px; color: var(--navy); line-height:1.6;
}
.disclaimer-banner strong{ color: var(--navy); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ border-top: 1px solid var(--platinum); padding-block: 52px 30px; margin-top: 20px; }
.footer-top{ display:flex; justify-content:space-between; gap: 40px; flex-wrap:wrap; }
.footer-tag{ font-size: 13.5px; color: var(--navy-body); margin-top: 12px; max-width: 260px; }
.footer-cols{ display:flex; gap: 56px; flex-wrap:wrap; }
.footer-heading{ font-family: var(--font-mono); font-size: 11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--data-grey); margin-bottom: 12px; }
.footer-cols a{ display:block; font-size: 13.5px; color: var(--navy-body); padding: 5px 0; }
.footer-cols a:hover{ color: var(--blue); }
.site-footer .disclaimer{ font-size: 12px; color: var(--data-grey); margin-top: 38px; max-width: 720px; line-height:1.6; padding-top: 24px; border-top: 1px solid var(--platinum); }

/* ============================================================
   LEGAL / PROSE PAGES
   ============================================================ */
.prose{ max-width: 720px; }
.prose h2{ font-size: 21px; margin-top: 34px; margin-bottom: 12px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin-bottom: 14px; font-size: 15px; color: var(--navy-body); }
.prose ul{ margin: 10px 0 16px 0; }
.prose li{ font-size: 15px; color: var(--navy-body); padding-left: 18px; position:relative; margin-bottom:8px; }
.prose li::before{ content:'—'; position:absolute; left:0; color: var(--blue); }
.prose .updated{ font-family: var(--font-mono); font-size: 12.5px; color: var(--data-grey); margin-bottom: 30px; }