:root {
    --root-density: 1.0;
    --root-font_scale: 1.0;
    --color-accent-lime: #8CC63F;
    --color-bg: #f5f5f3;
    --color-bg-alt: #eeeeec;
    --color-bg-card: #ffffff;
    --color-bg-card-hover: #ffffff;
    --color-bg-dark: #0a1e1a;
    --color-border: rgba(0,60,40,0.10);
    --color-border-light: rgba(0,60,40,0.14);
    --color-primary: #38B867;
    --color-primary-glow: rgba(56,184,103,0.30);
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 86%, black);
    --color-primary-subtle: rgba(56,184,103,0.06);
    --color-secondary: #009B76;
    --color-tertiary: #007B6B;
    --color-text: #1a2e28;
    --color-text-muted: #6a8e80;
    --color-text-secondary: #4a6b5e;
    --font-body: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-heading: 'Rajdhani','Inter',-apple-system,sans-serif;
    --radius-full: 50px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --shadow-lg: 0 8px 40px rgba(0,59,46,0.12);
    --shadow-md: 0 4px 20px rgba(0,59,46,0.08);
    --shadow-sm: 0 2px 8px rgba(0,59,46,0.06);
    --spacing-container-max: 1200px;
    --spacing-section: 96px;
    --spacing-section-sm: 56px;
    --spacing-unit: 8px;
}

/* ========================================================================= *
 * ENOVARI SITEGEN — Base Stylesheet (auto-generated from design tokens)
 * ========================================================================= */

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

html { scroll-behavior: smooth; font-size: calc(var(--root-font_scale, 1) * 100%); }

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-primary-hover); }

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

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--root-density, 1) * 14px) calc(var(--root-density, 1) * 32px);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary {
    background: var(--color-primary);
    color: #000;
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    color: #000;
    box-shadow: 0 0 30px var(--color-primary-glow);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-light);
}
.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-sm { padding: calc(var(--root-density, 1) * 10px) calc(var(--root-density, 1) * 22px); font-size: 0.875rem; }
.btn-lg { padding: calc(var(--root-density, 1) * 18px) calc(var(--root-density, 1) * 44px); font-size: 1.125rem; border-radius: var(--radius-md); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}
/* sticky-header toggle: is-static opts out of fixed positioning */
.site-header.is-static { position: static; }
/* generated chrome offsets its own main so fixed header never overlaps content;
   scoped to .is-generated so existing raw-header sites are unaffected */
.site-header.is-generated:not(.is-static) ~ main { padding-top: 64px; }

.header-inner {
    max-width: var(--spacing-container-max);
    margin: 0 auto;
    padding: 0 calc(var(--root-density, 1) * 24px);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.logo:hover { color: var(--color-text); }
.logo-mark { color: var(--color-primary); font-size: 1.1rem; }

.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav a {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}
.main-nav a:hover { color: var(--color-text); }

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: all 0.3s;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: calc(var(--root-density, 1) * 60px) calc(var(--root-density, 1) * 24px) 0;
    margin-top: 100px;
}

.footer-inner {
    max-width: var(--spacing-container-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-brand .logo-mark { color: var(--color-primary); }
.footer-brand { font-size: 1.1rem; font-weight: 700; }
.footer-tagline { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 4px; font-weight: 400; }

.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--color-text-secondary); font-size: 0.875rem; }
.footer-links a:hover { color: var(--color-text); }

.footer-social { display: flex; gap: 16px; }
.footer-social a { color: var(--color-text-secondary); font-size: 0.875rem; }
.footer-social a:hover { color: var(--color-primary); }

.footer-bottom {
    max-width: var(--spacing-container-max);
    margin: 40px auto 0;
    padding: 20px 0;
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.footer-bottom p { color: var(--color-text-muted); font-size: 0.8rem; }

/* ── Sections & Layout ──────────────────────────────────────────────────── */
.section { padding: var(--spacing-section) calc(var(--root-density, 1) * 24px); }
.section-sm { padding: var(--spacing-section-sm) 24px; }
.container { max-width: var(--spacing-container-max); margin: 0 auto; }
.page-top { padding-top: 140px; }
/* Phase 2 layout modes: wrapper-class only, lay the section's children in columns */
.section.is-split > .container { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.section.is-sidebar > .container { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }

.section-label {
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
}

.section-subtitle {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 640px;
}

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 24px 80px;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--color-primary-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.hero-title .accent { color: var(--color-primary); }

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 48px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Cards / Grid ───────────────────────────────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--root-density, 1) * 24px);
}

.card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: calc(var(--root-density, 1) * 32px);
    transition: all 0.2s ease;
}
.card:hover {
    border-color: var(--color-border-light);
    background: var(--color-bg-card-hover);
}

.card-icon { font-size: 2rem; margin-bottom: 16px; }
.card-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 8px; }
.card-text { color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.6; }

/* ── Pricing ────────────────────────────────────────────────────────────── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.pricing-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
}

.pricing-card.featured {
    border-color: var(--color-primary);
    position: relative;
}
.pricing-card.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pricing-tier {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.pricing-price { font-size: 3rem; font-weight: 700; margin-bottom: 4px; }
.pricing-price .period { font-size: 1rem; font-weight: 400; color: var(--color-text-muted); }

.pricing-desc {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 32px;
    line-height: 1.5;
}

.pricing-features { list-style: none; margin-bottom: 32px; flex-grow: 1; }
.pricing-features li {
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pricing-features li::before {
    content: '\2713';
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

.pricing-card .btn { width: 100%; }

/* ── Form ───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 6px; color: var(--color-text-secondary); }

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.form-group textarea { min-height: 140px; resize: vertical; }
.contact-form { max-width: 560px; margin: 0 auto; }

/* ── Compatibility Badges ───────────────────────────────────────────────── */
.compat-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 48px; }
.compat-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 10px 20px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* ── Steps ──────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: step; }
.step { text-align: center; counter-increment: step; }
.step::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 212, 170, 0.2);
}
.step-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.step-text { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.6; }

/* ── About / Two Column ─────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-text p { color: var(--color-text-secondary); margin-bottom: 16px; line-height: 1.7; }

.stat-row { display: flex; gap: 40px; margin-top: 32px; justify-content: center; flex-wrap: wrap; }
.stat { text-align: center; }
.stat-number { font-size: 2rem; font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 4px; }

/* ── Legal pages ────────────────────────────────────────────────────────── */
.legal-content { max-width: 720px; margin: 0 auto; }
.legal-content h2 { font-size: 1.4rem; font-weight: 600; margin-top: 48px; margin-bottom: 16px; }
.legal-content h3 { font-size: 1.1rem; font-weight: 600; margin-top: 32px; margin-bottom: 12px; }
.legal-content p, .legal-content li { color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.7; margin-bottom: 12px; }
.legal-content ul { padding-left: 24px; margin-bottom: 16px; }
.legal-content .effective-date { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 32px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.05rem; }
    .section-title { font-size: 1.8rem; }
    .section { padding: calc(var(--root-density, 1) * 60px) calc(var(--root-density, 1) * 20px); }

    .main-nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        padding: 20px 24px;
        gap: 16px;
    }
    .main-nav.open { display: flex; }
    .header-cta { display: none; }
    .mobile-toggle { display: flex; }

    .steps { grid-template-columns: 1fr; gap: 32px; }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .section.is-split > .container,
    .section.is-sidebar > .container { grid-template-columns: 1fr; gap: 32px; }
    .stat-row { justify-content: center; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }

    .footer-inner { flex-direction: column; text-align: center; }
    .footer-links { flex-direction: column; gap: 12px; }
    .footer-social { justify-content: center; }
    .footer-bottom { text-align: center; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 2rem; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 100%; }
}


/* Custom CSS */
/* ========================================================================= *
 * ENOVARI — marketing site, Pass A.
 * Layered AFTER the engine base CSS (source-order wins; no !important).
 * Light theme, brand green #38b867, dark signature hero + persona wheel.
 * ========================================================================= */

:root{
  --font-display:'Rajdhani','Inter',-apple-system,sans-serif;
  --green:var(--color-primary);
  --green-2:var(--color-secondary, #009B76);
  --lime:var(--color-accent-lime, #8CC63F);
  --ink-dark:var(--color-bg-dark, #0a1e1a);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

body{ overflow-x:hidden; }

h1,h2,.hero-title,.section-title{ font-family:var(--font-display); letter-spacing:-0.01em; }
.hero-title{ letter-spacing:-1.5px; }

/* ── Under-construction banner ──────────────────────────────────────────── */
/* Sits at the very top of <main>; main already has padding-top:64px for the
 * fixed header, so the banner clears the header cleanly. */
.uc-banner{
  position:relative; z-index:2;
  margin:0 auto;
  text-align:center;
  font-size:.86rem; font-weight:500;
  letter-spacing:.01em;
  color:#0a3326;
  padding:10px 20px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--green) 22%, transparent),
    color-mix(in srgb, var(--lime) 22%, transparent));
  border-bottom:1px solid color-mix(in srgb, var(--green) 30%, transparent);
}

/* ── Header: glass that matches OUR light bg, not the engine's dark #0a0a0a ── */
.site-header.is-generated{
  background:color-mix(in srgb, var(--color-bg) 80%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid color-mix(in srgb, var(--green) 14%, var(--color-border));
  transition:background .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.site-header.is-generated.scrolled{
  background:color-mix(in srgb, var(--color-bg) 92%, transparent);
  border-bottom-color:color-mix(in srgb, var(--green) 28%, transparent);
  box-shadow:0 8px 30px -18px rgba(0,59,46,.35);
}
.logo{ color:var(--color-text); }
.logo-mark{ color:var(--green); text-shadow:0 0 12px color-mix(in srgb,var(--green) 45%, transparent); }
.main-nav a{ color:var(--color-text-secondary); }
.main-nav a:hover{ color:var(--green); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary{
  background:linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green) 55%, var(--green-2)));
  color:#fff;
  box-shadow:0 6px 22px -10px color-mix(in srgb,var(--green) 80%, transparent);
}
.btn-primary:hover{
  background:linear-gradient(135deg, color-mix(in srgb,var(--green) 90%, white), var(--green-2));
  transform:translateY(-2px);
  box-shadow:0 10px 34px -10px color-mix(in srgb,var(--green) 75%, transparent);
}
.header-cta{ color:#fff; }

/* ── HERO: the dark neural field ────────────────────────────────────────── */
.hero.hero-neural{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(1100px 700px at 78% -8%, color-mix(in srgb, var(--green-2) 20%, transparent), transparent 60%),
    radial-gradient(900px 600px at 0% 8%, color-mix(in srgb, var(--green) 16%, transparent), transparent 55%),
    var(--ink-dark);
  padding:140px 24px 96px;
}
.hero.hero-neural #neural-canvas,
.hero.hero-neural .hero-particle-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
  display:block;
}
.hero.hero-neural .hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 35%, color-mix(in srgb, var(--ink-dark) 75%, transparent) 100%);
}
.hero.hero-neural .hero-content{
  position:relative; z-index:2;
  max-width:880px; text-align:center; margin:0 auto;
}
.hero.hero-neural .hero-overline{
  color:color-mix(in srgb, var(--lime) 85%, white);
  opacity:.95;
}
.hero.hero-neural .hero-title{
  color:#eaf3ee;
  font-weight:700;
  font-size:clamp(2.2rem, 5.6vw, 4.4rem);
  line-height:1.05;
  margin-bottom:20px;
}
.hero.hero-neural .hero-title .accent{
  background:linear-gradient(120deg, var(--green), var(--lime) 55%, var(--green-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero.hero-neural .hero-subtitle{
  color:#b9ccc2;
  max-width:640px; margin:0 auto 36px;
  font-size:1.08rem; line-height:1.6;
}
.hero.hero-neural .hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero.hero-neural .btn-secondary{
  border:1px solid color-mix(in srgb, var(--green) 45%, rgba(255,255,255,.18));
  background:color-mix(in srgb, #ffffff 8%, transparent);
  color:#eaf3ee;
  backdrop-filter:blur(6px);
}
.hero.hero-neural .btn-secondary:hover{
  border-color:var(--green); color:#fff;
  box-shadow:0 0 24px -8px color-mix(in srgb,var(--green) 70%, transparent);
}

/* ── Anchor offset targets (sticky header) ──────────────────────────────── */
.anchor-offset{ display:block; position:relative; top:-80px; visibility:hidden; }

/* ── Section / card polish ──────────────────────────────────────────────── */
.section-label{ color:var(--green); }
.card{
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--green) 35%, var(--color-border));
  box-shadow:var(--shadow-md);
}
.card-icon{ font-size:1.6rem; margin-bottom:12px; }
.card-title{ font-family:var(--font-display); }

.steps .step{ position:relative; }
.step-title{ font-family:var(--font-display); color:var(--green); }

/* ── Comparison table footnote ──────────────────────────────────────────── */
.compare-footnote{
  max-width:900px; margin:18px auto 0;
  color:var(--color-text-muted);
  font-size:.82rem; font-style:italic;
}

/* ========================================================================= *
 * PERSONA ASTROLABE — the REAL redux zodiac wheel (green, glyph/portrait
 * nodes). Scoped under .persona-section so it can't touch the light theme.
 * Faithfully reproduced from "Enovari redux/index.html". Colors are already
 * the brand greens (#38B867 / #009B76). NO gold/brass.
 * ========================================================================= */
.persona-section.zodiac-section{
  position:relative;
  width:100%;
  min-height:100vh;
  background:#06060c;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:80px 20px 80px;
  color:#cdddd4;
}
.persona-section.zodiac-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(56,184,103,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 30%, rgba(0,155,118,0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(56,184,103,0.03) 0%, transparent 40%);
  pointer-events:none;
  z-index:0;
}

/* ---- HEADER ---- */
.persona-section .zodiac-header{
  text-align:center;
  margin-bottom:32px;
  position:relative;
  z-index:2;
  max-width:680px;
}
.persona-section .zodiac-header .section-label{
  font-family:'JetBrains Mono','Consolas',monospace;
  font-size:.72rem; font-weight:500;
  letter-spacing:.25em; text-transform:uppercase;
  color:#38B867; opacity:.8; margin-bottom:12px;
}
.persona-section .zodiac-header h2{
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 4vw, 2.8rem);
  font-weight:600; color:#e8ddd0;
  letter-spacing:-0.02em; margin-bottom:14px;
}
.persona-section .zodiac-header p{
  font-family:'Inter',sans-serif;
  font-size:.98rem; color:#9fb0a8;
  max-width:640px; margin:0 auto; line-height:1.65;
}

/* ---- ASTROLABE CONTAINER ---- */
.persona-section .astrolabe-container{
  position:relative;
  width:min(800px, 90vw);
  height:min(800px, 90vw);
  z-index:1;
}
.persona-section .astrolabe-svg{ width:100%; height:100%; overflow:visible; }
.persona-section .astrolabe-container::before{
  content:'';
  position:absolute; top:50%; left:50%;
  width:110%; height:110%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(56,184,103,0.06) 0%, rgba(0,155,118,0.04) 40%, transparent 70%);
  animation:astrolabeGlowPulse 4s ease-in-out infinite;
  pointer-events:none; z-index:0;
}
@keyframes astrolabeGlowPulse{
  0%,100%{ background:radial-gradient(circle, rgba(56,184,103,0.06) 0%, rgba(0,155,118,0.04) 40%, transparent 70%); opacity:.8; }
  50%{ background:radial-gradient(circle, rgba(0,155,118,0.08) 0%, rgba(56,184,103,0.05) 40%, transparent 70%); opacity:1; }
}

/* ---- RING ROTATION ---- */
@keyframes rotate-slow{ 0%{ transform:rotate(0); } 100%{ transform:rotate(360deg); } }
@keyframes rotate-reverse{ 0%{ transform:rotate(0); } 100%{ transform:rotate(-360deg); } }
.persona-section .ring-rotate-slow{ animation:rotate-slow 60s linear infinite; transform-origin:400px 400px; }
.persona-section .ring-rotate-reverse{ animation:rotate-reverse 90s linear infinite; transform-origin:400px 400px; }

/* ---- PERSONA NODES ---- */
.persona-section .persona-node{
  cursor:pointer;
  transform-box:fill-box;
  transform-origin:center center;
  transition:transform .3s cubic-bezier(0.34,1.56,0.64,1);
}
.persona-section .persona-node:hover{ transform:scale(1.3); }
.persona-section .persona-node:hover .node-ring{ stroke-opacity:1; stroke-width:2.5; }
.persona-section .persona-node:hover .node-glow{ opacity:.55; animation:nodeHaloBreath 2s ease-in-out infinite; }
.persona-section .persona-node:hover .node-label{ fill-opacity:1; filter:drop-shadow(0 0 6px currentColor); }
.persona-section .persona-node.active .node-label{ fill-opacity:1; filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor); }
.persona-section .persona-node.active .node-ring{ stroke-opacity:1; stroke-width:3; animation:activeRingPulse 1.5s ease-in-out infinite; }
.persona-section .persona-node.active .node-glow{ opacity:.7; animation:nodeHaloBreath 1.5s ease-in-out infinite; }
@keyframes nodeHaloBreath{ 0%,100%{ opacity:.4; } 50%{ opacity:.7; } }
@keyframes activeRingPulse{ 0%,100%{ stroke-width:3; stroke-opacity:1; } 50%{ stroke-width:4.5; stroke-opacity:.7; } }

/* ---- CONSTELLATION LINES ---- */
.persona-section .constellation-line{
  stroke-dasharray:3 6;
  animation:constellation-drift 8s linear infinite;
  transition:stroke-width .4s ease, stroke-opacity .4s ease, filter .4s ease;
}
.persona-section .constellation-line.glow-active{ filter:url(#lineGlow); stroke-width:2 !important; stroke-opacity:.6 !important; }
.persona-section .constellation-line.flash{ animation:constellationFlash .6s ease-out; }
@keyframes constellation-drift{ 0%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-60; } }
@keyframes constellationFlash{ 0%{ stroke-opacity:.9; stroke-width:3; } 100%{ stroke-opacity:.4; stroke-width:1; } }

/* ---- PERSONA PORTRAIT ---- */
.persona-section .persona-portrait{
  width:72px; height:72px; border-radius:50%;
  object-fit:cover; margin:0 auto 8px; display:block;
  border:2px solid rgba(56,184,103,0.4);
  box-shadow:0 0 20px rgba(56,184,103,0.15), 0 0 40px rgba(0,155,118,0.08);
  opacity:0; transform:scale(0.8);
  transition:opacity .4s ease, transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.persona-section .persona-portrait.visible{ opacity:1; transform:scale(1); }
.persona-section .persona-portrait[src$=".jpg"],
.persona-section .persona-portrait[src$=".webp"],
.persona-section .persona-portrait[src$=".avif"]{ filter:sepia(0.15) saturate(1.2) brightness(0.95); }
.persona-section .persona-portrait[src$=".svg"]{ border:none; background:transparent; }

/* ---- CENTER DETAIL PANEL ---- */
.persona-section .center-panel{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:260px; text-align:center;
  pointer-events:none; z-index:5;
  transition:opacity .4s ease, box-shadow .5s ease;
  border-radius:50%;
}
.persona-section .center-panel.persona-selected{ box-shadow:inset 0 0 40px rgba(56,184,103,0.08), inset 0 0 80px rgba(0,155,118,0.06); }
.persona-section .center-panel .persona-glyph,
.persona-section .center-panel .persona-title,
.persona-section .center-panel .persona-desc,
.persona-section .center-panel .persona-color-bar{ transition:opacity .4s ease, transform .4s ease, color .4s ease, background .4s ease; }
.persona-section .center-panel.text-enter .persona-glyph,
.persona-section .center-panel.text-enter .persona-title,
.persona-section .center-panel.text-enter .persona-desc,
.persona-section .center-panel.text-enter .persona-color-bar{ animation:centerTextSlideUp .5s ease-out forwards; }
@keyframes centerTextSlideUp{ 0%{ opacity:0; transform:translateY(12px); } 100%{ opacity:1; transform:translateY(0); } }
.persona-section .center-panel .persona-glyph{
  font-family:'Cinzel','Georgia',serif;
  font-size:2.4rem; font-weight:700; letter-spacing:-0.03em;
  color:#38B867; margin-bottom:4px;
}
.persona-section .center-panel .persona-title{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:#8892a8; margin-bottom:12px;
}
.persona-section .center-panel .persona-desc{
  font-family:'Inter',sans-serif;
  font-size:.82rem; line-height:1.55; color:#c8cdd8;
  opacity:.9; max-width:220px; margin:0 auto;
}
.persona-section .center-panel .persona-color-bar{
  width:40px; height:2px; margin:14px auto 0;
  border-radius:1px; background:#38B867;
}

/* ---- FOOTER INSTRUCTION ---- */
.persona-section .zodiac-footer{ margin-top:32px; text-align:center; position:relative; z-index:2; }
.persona-section .zodiac-footer .instruction{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem; color:#555e72; letter-spacing:.15em;
}

/* ---- MOBILE AGENT GRID (shown ≤768px; astrolabe hidden) ---- */
.persona-section .agents-grid{ display:none; }
.persona-section .agents-grid .agent-card{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 18px;
  border:1px solid rgba(56,184,103,0.15);
  border-radius:12px;
  background:rgba(255,255,255,0.02);
}
.persona-section .agents-grid .agent-card-icon{
  width:44px; height:44px; flex:0 0 44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
}
.persona-section .agents-grid .agent-card-icon svg{ width:24px; height:24px; }
.persona-section .agents-grid .agent-card-info h4{ margin:0 0 2px; font-family:var(--font-display); color:#e8ddd0; }
.persona-section .agents-grid .agent-card-info .agent-card-title{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.persona-section .agents-grid .agent-card-info p{ margin:0; font-size:.85rem; line-height:1.5; color:#9fb0a8; }

@media (max-width:768px){
  .persona-section .astrolabe-container{ display:none; }
  .persona-section .zodiac-footer .instruction{ display:none; }
  .persona-section .agents-grid{
    display:grid; grid-template-columns:1fr;
    gap:12px; max-width:560px; margin:24px auto 0; width:100%;
  }
}
@media (max-width:600px){
  .persona-section .center-panel{ width:160px; }
  .persona-section .center-panel .persona-glyph{ font-size:1.6rem; }
  .persona-section .center-panel .persona-desc{ font-size:.72rem; }
}

/* ── Reveal animation ───────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer-brand .logo-mark{ color:var(--green); }
.footer-links a:hover{ color:var(--green); }

/* ========================================================================= *
 * PASS B — Auth / Account / Download gate
 * Source-order wins (appended after base). Green theme, accent #38B867.
 * ========================================================================= */

/* ── Nav auth area ──────────────────────────────────────────────────────── */
.main-nav .nav-auth-btn{ color:var(--green); font-weight:600; }
.main-nav .nav-auth-btn:hover{ color:var(--green-2); }
.nav-user-area{ display:none; align-items:center; gap:14px; }
.nav-user-area .nav-user-name{ color:var(--color-text); font-weight:600; }
.nav-user-area .nav-user-name:hover{ color:var(--green); }
.nav-user-area .nav-admin-btn{ color:var(--green-2); font-weight:600; }

/* ── Modal shell (auth + admin) ─────────────────────────────────────────── */
.auth-modal-wrapper, .admin-modal-wrapper{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:flex-start; justify-content:center;
  padding:6vh 16px 16px;
  overflow-y:auto;
}
.auth-modal-wrapper.open, .admin-modal-wrapper.open{ display:flex; }
.auth-modal-overlay, .admin-modal-overlay{
  position:fixed; inset:0;
  background:rgba(8,30,24,.46);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.auth-modal, .admin-modal{
  position:relative; z-index:1;
  width:100%; max-width:440px;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--green) 16%, var(--color-border));
  border-radius:var(--radius-lg, 20px);
  box-shadow:0 24px 70px -24px rgba(0,40,28,.45);
  padding:30px 28px 26px;
}
.admin-modal{ max-width:860px; }
.modal-close{
  position:absolute; top:12px; right:14px;
  background:none; border:none; cursor:pointer;
  font-size:1.7rem; line-height:1; color:var(--color-text-muted);
}
.modal-close:hover{ color:var(--green); }
.auth-modal-header, .admin-modal-header{ text-align:center; margin-bottom:18px; }
.auth-modal-header h2, .admin-modal-header h2{
  font-family:var(--font-display); font-size:1.45rem; color:var(--color-text); margin:0 0 4px;
}
.auth-modal-header p, .admin-modal-header p{ color:var(--color-text-muted); font-size:.88rem; margin:0; }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.auth-tabs{ display:flex; gap:6px; margin-bottom:18px; background:var(--color-bg-alt); border-radius:12px; padding:4px; }
.auth-tab{
  flex:1; padding:9px 12px; border:none; cursor:pointer;
  background:none; border-radius:9px; font-weight:600; font-size:.9rem;
  color:var(--color-text-secondary); transition:all .2s var(--ease-out);
}
.auth-tab.active{ background:#fff; color:var(--green); box-shadow:0 2px 8px -4px rgba(0,40,28,.3); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.auth-form .form-group{ margin-bottom:14px; }
.auth-form .form-row{ display:flex; gap:12px; }
.auth-form .form-row .form-group{ flex:1; }
.auth-form label{ display:block; font-size:.8rem; font-weight:600; color:var(--color-text-secondary); margin-bottom:5px; }
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"]{
  width:100%; box-sizing:border-box;
  padding:11px 13px; font-size:.92rem;
  border:1px solid var(--color-border);
  border-radius:10px; background:var(--color-bg);
  color:var(--color-text); transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.auth-form input:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px var(--color-primary-subtle, rgba(56,184,103,.12));
}
.auth-form .btn-auth{ width:100%; margin-top:6px; justify-content:center; }
.auth-error{ display:none; color:#b8442e; font-size:.84rem; margin-bottom:10px; line-height:1.4; }
.auth-footer{ text-align:center; font-size:.82rem; color:var(--color-text-muted); margin-top:14px; }
.auth-footer a{ color:var(--green); font-weight:600; }

/* ── Agreement checkbox ─────────────────────────────────────────────────── */
.agree-item{ display:flex; gap:9px; align-items:flex-start; margin:6px 0 14px; cursor:pointer; }
.agree-item input[type="checkbox"]{ margin-top:3px; width:16px; height:16px; flex-shrink:0; accent-color:var(--green); }
.agree-text{ font-size:.78rem; line-height:1.5; color:var(--color-text-secondary); font-weight:400; }
.agree-text a{ color:var(--green); font-weight:600; }

/* ── Admin table ────────────────────────────────────────────────────────── */
.admin-table-wrap{ overflow-x:auto; }
.admin-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.admin-table th, .admin-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--color-border); }
.admin-table th{ color:var(--color-text-secondary); font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; }
.admin-table a{ color:var(--green); }

/* ── Gate / account shared states ───────────────────────────────────────── */
.gate-state{
  text-align:center; max-width:520px; margin:0 auto;
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius-lg, 20px); padding:36px 28px;
  box-shadow:var(--shadow-md, 0 4px 20px rgba(0,59,46,.08));
}
.gate-state .gate-lead{ font-size:1.08rem; font-weight:600; color:var(--color-text); margin:0 0 16px; }
.gate-state .gate-sub{ font-size:.86rem; color:var(--color-text-muted); margin:14px 0 0; }
.gate-state .gate-sub a{ color:var(--green); font-weight:600; }
.gate-state .btn{ margin:4px 6px; }
.gate-verified .gate-lead{ color:var(--green-2); }

/* ── Download cards (Windows / Mac) ─────────────────────────────────────── */
.dl-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; max-width:680px; margin:26px auto 0; }
.dl-card{
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius-md, 16px); padding:28px 24px; text-align:center;
  box-shadow:var(--shadow-sm, 0 2px 8px rgba(0,59,46,.06));
}
.dl-card-os{ color:var(--green); margin-bottom:10px; }
.dl-card h3{ font-family:var(--font-display); font-size:1.2rem; color:var(--color-text); margin:0 0 4px; }
.dl-card-meta{ font-size:.8rem; color:var(--color-text-muted); margin:0 0 16px; }
.dl-card .dl-btn{ width:100%; justify-content:center; }
.dl-card .dl-btn[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; transform:none; }
.dl-card .dl-btn[disabled]:hover{ transform:none; }
.dl-note{ font-size:.76rem; color:var(--color-text-muted); margin:12px 0 0; line-height:1.5; }

/* ── Public download surface (no login gate) ────────────────────────────── */
.download-public{ max-width:680px; margin:0 auto; }
.dl-coming{ font-size:.9rem; color:var(--color-text-secondary); margin:22px auto 0; max-width:560px; }
.dl-nudge{
  max-width:560px; margin:24px auto 0; padding:16px 20px;
  background:var(--color-primary-subtle, rgba(56,184,103,.06));
  border:1px solid var(--color-border); border-radius:var(--radius-md, 16px);
  text-align:center;
}
.dl-nudge-text{ font-size:.9rem; color:var(--color-text-secondary); margin:0; line-height:1.6; }
.dl-nudge-text a{ color:var(--green); font-weight:600; }
.dl-eula{ font-size:.82rem; color:var(--color-text-muted); margin:20px auto 0; max-width:560px; }
.dl-eula a{ color:var(--green); font-weight:600; }

/* ── Account card ───────────────────────────────────────────────────────── */
.acct-card{
  max-width:520px; margin:0 auto;
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius-lg, 20px); padding:30px 28px;
  box-shadow:var(--shadow-md, 0 4px 20px rgba(0,59,46,.08));
}
.acct-head{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.acct-avatar{
  width:54px; height:54px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--green), var(--green-2));
}
.acct-name{ font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--color-text); }
.acct-email{ font-size:.86rem; color:var(--color-text-muted); margin-bottom:6px; }
.acct-badge{ display:inline-block; font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:50px; }
.acct-badge-ok{ background:var(--color-primary-subtle, rgba(56,184,103,.12)); color:var(--green-2); }
.acct-badge-warn{ background:rgba(184,68,46,.1); color:#b8442e; }
.acct-actions{ display:flex; flex-direction:column; gap:10px; }
.acct-actions .btn{ width:100%; justify-content:center; }
.btn-ghost{ background:none; border:1px solid var(--color-border); color:var(--color-text-secondary); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }

@media (max-width:600px){
  .auth-form .form-row{ flex-direction:column; gap:0; }
  .auth-modal, .admin-modal{ padding:26px 20px 22px; }
}

/* ========================================================================= *
 * PASS C — Legal pages (EULA / Terms / Privacy) + Legal hub.
 * The engine base CSS already styles `.legal-content`; these rules refine the
 * reading column, headings, and add the hub card grid. Source-order wins; no
 * !important.
 * ========================================================================= */

/* Readable single column. Override the engine's 720px with a touch more room
 * and comfortable rhythm; left-aligned even though content-section centers. */
.legal-content{
  max-width:780px;
  margin:0 auto;
  text-align:left;
}
.legal-content .section-label{ text-align:left; }
.legal-content h1.section-title{ text-align:left; margin-bottom:8px; }
.legal-content .effective-date{
  color:var(--color-text-muted);
  font-size:.85rem;
  margin-bottom:36px;
  padding-bottom:20px;
  border-bottom:1px solid var(--color-border);
}
.legal-content h2{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  color:var(--color-text);
  margin-top:42px;
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid color-mix(in srgb, var(--green) 22%, var(--color-border));
}
.legal-content p,
.legal-content li{
  color:var(--color-text-secondary);
  font-size:.95rem;
  line-height:1.75;
  margin-bottom:14px;
}
.legal-content ul{ padding-left:24px; margin-bottom:18px; }
.legal-content li{ margin-bottom:8px; }
.legal-content a{ color:var(--green-2); text-decoration:underline; text-underline-offset:2px; }
.legal-content a:hover{ color:var(--green); }
.legal-content strong{ color:var(--color-text); }
.legal-content .legal-caps{
  font-size:.86rem;
  letter-spacing:.01em;
  color:var(--color-text-secondary);
  background:color-mix(in srgb, var(--green) 5%, transparent);
  border-left:3px solid color-mix(in srgb, var(--green) 45%, transparent);
  padding:14px 18px;
  border-radius:8px;
}
.legal-content .legal-related{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--color-border);
  font-size:.9rem;
}

/* ── Legal hub card grid ────────────────────────────────────────────────── */
.legal-hub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
  text-align:left;
  margin-top:8px;
}
.legal-card{
  display:block;
  padding:22px 22px 20px;
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md, 16px);
  box-shadow:var(--shadow-sm, 0 2px 8px rgba(0,59,46,.06));
  text-decoration:none;
  transition:transform .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.legal-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--green) 40%, var(--color-border));
  box-shadow:var(--shadow-md, 0 4px 20px rgba(0,59,46,.10));
}
.legal-card h3{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
  color:var(--color-text);
  margin:0 0 8px;
  display:flex;
  align-items:center;
  gap:8px;
}
.legal-card p{
  margin:0;
  font-size:.88rem;
  line-height:1.6;
  color:var(--color-text-secondary);
}
.legal-card-badge{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:2px 7px;
  border-radius:50px;
  color:var(--green-2);
  background:color-mix(in srgb, var(--green) 14%, transparent);
}
.legal-hub-note{
  margin-top:28px;
  text-align:center;
  font-size:.9rem;
  color:var(--color-text-muted);
}