/* ============================================================
   Virayo Design System — Colors & Type
   ============================================================ */

/* ============================================================
   Virayo Brand Fonts — self-hosted
   ============================================================
   Role mapping:
   - Geograph Black      → primary display / headlines (geometric black)
   - WTR Gothic Shaded   → decorative shaded headline (echoes the shaded V)
   - Arbutus             → vintage serif / editorial accents
   - Buffalo Riders      → novelty display (posters, hero flourishes)
   - DM Sans (variable)  → body / UI
*/

@font-face {
  font-family: 'WTR Gothic Shaded';
  src: url('/vai/fonts/WTR_Gothic_Shaded.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
#vai{
  /* ---------- PRIMARY BRAND PALETTE ---------- */
  --virayo-blue:        #1C70DA;  /* primary — logotype, links, buttons */
  --virayo-blue-deep:   #145BB0;  /* hover / pressed */
  --virayo-blue-dark:   #0E427F;  /* on-dark contrasts */
  --virayo-blue-tint:   #E7F1FC;  /* subtle fills, callouts */

  --virayo-orange:      #E29A3B;  /* sunburst, secondary accent */
  --virayo-orange-deep: #BF7F24;  /* hover / pressed */
  --virayo-orange-tint: #FBEFD9;  /* soft bg blocks */

  --virayo-yellow:      #EEDA97;  /* reverse / on-dark accent, warm */
  --virayo-cream:       #FFFAEF;  /* logo interior, warm canvas */

  --virayo-black:       #1A1A1A;  /* true black text */
  --virayo-ink:         #333333;  /* logomark-black equivalent */
  --virayo-white:       #FFFFFF;

  /* ---------- NEUTRAL SCALE ---------- */
  --gray-50:   #FAF8F3;  /* warm off-white, paper */
  --gray-100:  #F2EFE7;
  --gray-200:  #E6E2D6;
  --gray-300:  #D3CEC0;
  --gray-400:  #A8A295;
  --gray-500:  #7A7668;
  --gray-600:  #56534A;
  --gray-700:  #3A3833;
  --gray-800:  #242321;
  --gray-900:  #111111;

  /* ---------- SEMANTIC TOKENS ---------- */
  --fg-1:     var(--virayo-ink);   /* primary text */
  --fg-2:     var(--gray-600);     /* secondary text */
  --fg-3:     var(--gray-500);     /* tertiary / labels */
  --fg-muted: var(--gray-400);     /* placeholders */
  --fg-invert: var(--virayo-cream);

  --bg-canvas: var(--virayo-cream);   /* default warm canvas */
  --bg-surface: #FFFFFF;              /* cards on canvas */
  --bg-sunk:   var(--gray-100);       /* subtle wells */
  --bg-dark:   var(--virayo-blue-dark);

  --accent:        var(--virayo-blue);
  --accent-warm:   var(--virayo-orange);
  --accent-soft:   var(--virayo-yellow);

  --link:        var(--virayo-blue);
  --link-hover:  var(--virayo-blue-deep);

  --success: #3F7D4B;
  --warning: var(--virayo-orange-deep);
  --danger:  #B5372A;
  --info:    var(--virayo-blue);

  --border-1: var(--gray-200);     /* default hairline */
  --border-2: var(--gray-300);     /* stronger */
  --border-ink: var(--virayo-ink); /* editorial, 2px hard line */

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- SPACING (8pt grid, 4pt half-steps) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- SHADOWS (warm-tinted; softer than pure black) ---------- */
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.06);
  --shadow-sm: 0 2px 6px rgba(26,26,26,0.08);
  --shadow-md: 0 8px 20px -6px rgba(26,26,26,0.12), 0 2px 6px rgba(26,26,26,0.06);
  --shadow-lg: 0 24px 48px -12px rgba(26,26,26,0.18), 0 4px 10px rgba(26,26,26,0.08);
  --shadow-warm: 0 8px 24px -8px rgba(226,154,59,0.35);

  /* editorial "stamp" shadow — 3px offset hard block, no blur */
  --shadow-stamp: 4px 4px 0 0 var(--virayo-ink);
  --shadow-stamp-blue: 4px 4px 0 0 var(--virayo-blue);
  --shadow-stamp-orange: 4px 4px 0 0 var(--virayo-orange);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Geograph', 'Helvetica Neue', Arial, sans-serif;
  --font-shaded:  'WTR Gothic Shaded', 'Geograph', Arial, sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Geograph', 'Helvetica Neue', Arial, sans-serif;
  --font-novelty: 'Buffalo Riders', 'Geograph', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---------- TYPE SCALE (desktop) ---------- */
  --fs-hero:   clamp(56px, 8vw, 104px);
  --fs-h1:     clamp(40px, 5vw, 64px);
  --fs-h2:     clamp(30px, 3.6vw, 44px);
  --fs-h3:     clamp(22px, 2.4vw, 30px);
  --fs-h4:     20px;
  --fs-body:   17px;
  --fs-body-sm: 15px;
  --fs-label:  13px;
  --fs-micro:  11px;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.02em;
  --ls-wide:    0.08em;
  --ls-eyebrow: 0.14em;

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   BASE STYLES
   ============================================================ */
#vai, #vai{
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#vai h1, #vai h2, #vai h3, #vai h4, #vai h5{
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

#vai h1{ font-size: var(--fs-h1); font-weight: 900; }
#vai h2{ font-size: var(--fs-h2); font-weight: 900; }
#vai h3{ font-size: var(--fs-h3); font-weight: 900; }
#vai h4{ font-size: var(--fs-h4); font-weight: 900; letter-spacing: normal; }

#vai .hero-display{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-transform: uppercase;
}

#vai .editorial{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

#vai .eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--virayo-blue);
}

#vai p{ margin: 0; line-height: var(--lh-relaxed); text-wrap: pretty; }
#vai .p-lead{ font-size: 20px; line-height: 1.5; color: var(--fg-2); }

#vai small, #vai .label{ font-size: var(--fs-label); color: var(--fg-3); }
#vai code, #vai .mono{ font-family: var(--font-mono); font-size: 0.94em; }

#vai a{ color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
#vai a:hover{ color: var(--link-hover); }

#vai ::selection{ background: var(--virayo-yellow); color: var(--virayo-ink); }

/* ==========================================================================
   TOKENS — remapped to Virayo design system
   ========================================================================== */
#vai{
  --ink: #1A1A1A;           /* virayo-black */
  --ink-2: #242321;         /* gray-800 */
  --ink-3: #3A3833;         /* gray-700 */
  --mute: #7A7668;          /* gray-500 */
  --mute-2: #A8A295;        /* gray-400 */
  --line: #E6E2D6;          /* gray-200 */
  --line-2: #F2EFE7;        /* gray-100 */
  --paper: #FFFAEF;         /* virayo-cream */
  --paper-2: #F2EFE7;
  --paper-3: #E6E2D6;
  --bg: #FFFAEF;            /* cream canvas */
  --white: #FFFFFF;

  --accent: #1C70DA;        /* virayo-blue */
  --accent-ink: #0E427F;    /* virayo-blue-dark */
  --accent-tint: #E7F1FC;   /* virayo-blue-tint */
  --accent-tint-2: #CFDDF6;

  --orange: #E29A3B;        /* virayo-orange */
  --orange-tint: #FBEFD9;

  --ok: #3F7D4B;
  --ok-tint: #e4f1e9;
  --warn: #BF7F24;
  --warn-tint: #FBEFD9;
  --err: #B5372A;
  --err-tint: #f7e2dd;

  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Geograph', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Geograph', 'Helvetica Neue', Arial, sans-serif;
  --shaded: 'WTR Gothic Shaded', 'Geograph', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;

  --density: 1;  /* tweak */
}

#vai *{ box-sizing: border-box; margin: 0; padding: 0; }
#vai{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
#vai{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
}
#vai img, #vai svg{ display: block; max-width: 100%; }
#vai button{ font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
#vai a{ color: inherit; text-decoration: none; }
#vai input, #vai textarea{ font: inherit; color: inherit; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
#vai .wrap{ max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
#vai .rule{ height: 1px; background: var(--line); border: 0; }

/* Section numbering system */
#vai .section-head{
  padding: calc(72px * var(--density)) 0 calc(40px * var(--density));
  border-top: 1px solid var(--line);
}
#vai .section-head__label{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: block;
}
#vai .section-head__label .num{ color: var(--ink); margin-right: 10px; }
#vai .section-head h2{
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 5.2vw, 72px);
  letter-spacing: -0.022em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
}
#vai .section-head h2 em{
  font-style: italic;
  font-family: var(--serif);
  color: var(--accent);
}
#vai .section-head__kicker{
  font-family: var(--sans);
  font-size: 15px;
  color: var(--mute);
  max-width: 520px;
  margin-top: 20px;
  line-height: 1.55;
}

/* ==========================================================================
   NAV
   ========================================================================== */
#vai .nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 20, 22, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
#vai .nav__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
#vai .nav__brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
#vai .nav__mark{
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 18px;
  font-weight: 400;
  position: relative;
}
#vai .nav__mark::after{
  content: ''; position: absolute;
  inset: auto -3px -3px auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--bg);
}
#vai .nav__links{
  display: flex; align-items: center; gap: 28px;
  list-style: none;
  font-size: 14px;
  color: rgba(255,255,255,0.72);
}
#vai .nav__links a{ transition: color .15s; }
#vai .nav__links a:hover{ color: #fff; }
#vai .nav__cta{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange);
  color: #1A1A1A;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  transition: transform .15s, background .15s, box-shadow .15s;
}
#vai .nav__cta:hover{ background: #f0a94a; transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(226,154,59,0.6); }
#vai .nav__cta .arr{ font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 0; }

/* Running ticker below nav */
#vai .ticker{
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.02em;
}
#vai .ticker__track{
  display: flex;
  gap: 48px;
  padding: 10px 0;
  animation: ticker 60s linear infinite;
  white-space: nowrap;
  width: max-content;
}
#vai .ticker__item{ display: inline-flex; align-items: center; gap: 10px; }
#vai .ticker__item .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
}
#vai .ticker__item .dot.warn{ background: var(--warn); }
#vai .ticker__item .dot.err{ background: var(--err); }
#vai .ticker__item .prov{ color: var(--ink-3); }
#vai .ticker__item .cite{ color: var(--mute); }
#vai .ticker__item .score{ color: var(--accent); font-weight: 600; }
@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
#vai .hero{
  padding: clamp(48px, 7vw, 88px) 0 clamp(48px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
#vai .hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}
#vai .hero__left{ min-width: 0; }
#vai .hero__eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#vai .hero__eyebrow::before{
  content: '';
  width: 28px; height: 1px;
  background: var(--ink-3);
}
#vai .hero h1{
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(36px, 3.8vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
#vai .hero h1 em{
  font-style: italic;
  color: var(--accent);
}
#vai .hero h1 .slash{
  display: inline-block;
  color: var(--orange);
  font-style: italic;
  font-weight: 400;
}
#vai .hero__sub{
  margin-top: 32px;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 52ch;
  text-wrap: pretty;
}
#vai .hero__sub strong{ color: var(--ink); font-weight: 600; }

/* Inline audit prompt — looks like a terminal / input field */
#vai .audit-prompt{
  margin-top: 32px;
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--white);
  max-width: 460px;
  overflow: hidden;
  box-shadow: 0 1px 0 var(--ink), 0 16px 28px -16px rgba(11,11,15,0.16);
  transition: box-shadow .2s;
}
#vai .audit-prompt:focus-within{ box-shadow: 0 1px 0 var(--ink), 0 24px 40px -20px rgba(11,11,15,0.22), 0 0 0 3px rgba(26,95,208,0.15); }
#vai .audit-prompt__label{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mute);
  padding: 0 4px 0 14px;
  display: flex; align-items: center;
  letter-spacing: 0.05em;
}
#vai .audit-prompt__label::before{ content: '▸'; color: var(--orange); margin-right: 6px; }
#vai .audit-prompt input{
  flex: 1;
  border: 0;
  padding: 12px 6px;
  font-size: 14px;
  font-family: var(--sans);
  outline: none;
  background: transparent;
  min-width: 0;
}
#vai .audit-prompt input::placeholder{ color: var(--mute-2); }
#vai .audit-prompt__btn{
  background: var(--ink);
  color: var(--paper);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
  transition: background .15s;
  white-space: nowrap;
}
#vai .audit-prompt__btn:hover{ background: var(--accent-ink); }
#vai .audit-prompt__btn .arr{ font-family: var(--serif); font-style: italic; font-size: 15px; }

#vai .hero__meta{
  margin-top: 16px;
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.02em;
}
#vai .hero__meta span{ display: inline-flex; align-items: center; gap: 6px; }
#vai .hero__meta span::before{
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ok);
}

/* Hero dashboard — scaled proportionally so perspective stays intact */
#vai .hero__viz{
  margin-top: 10px;
  position: relative;
  min-width: 0;
  /* Dashboard is rendered at natural size then scaled; this container just
     reserves space for the scaled footprint. */
}
#vai .hero__viz__stage{
  width: 1280px;
  transform-origin: top left;
}
#vai .hero__viz__frame{
  position: relative;
  width: 100%;
  overflow: visible;
}
#vai .dashboard{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 32px 80px -30px rgba(11,11,15,0.2), 0 1px 0 rgba(11,11,15,0.04);
  overflow: hidden;
  position: relative;
}
#vai .dashboard__chrome{
  display: flex; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  gap: 14px;
  background: #E8E6E0;
}
#vai .dashboard__dots{ display: flex; gap: 7px; flex-shrink: 0; }
#vai .dashboard__dots span{ width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
#vai .dashboard__dots span:nth-child(1){ background: #e2826b; }
#vai .dashboard__dots span:nth-child(2){ background: #e0c164; }
#vai .dashboard__dots span:nth-child(3){ background: #7fae7a; }
#vai .dashboard__tab-bar{
  display: flex; align-items: center;
}
#vai .dashboard__tab{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 10px;
  background: var(--white);
  border-radius: 6px 6px 0 0;
  font-family: var(--sans); font-size: 12px;
  color: var(--ink);
  position: relative; top: 1px;
  border: 1px solid var(--line);
  border-bottom: none;
}
#vai .dashboard__tab-mark{
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-size: 9px;
}
#vai .dashboard__tab-x{ color: var(--mute); font-size: 14px; margin-left: 4px; }
#vai .dashboard__url{
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-3);
  background: var(--white);
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  flex: 1;
  max-width: 520px;
  text-align: center;
}
#vai .dashboard__url .dom{ color: var(--ink); }
#vai .dashboard__tab-plus{
  font-family: var(--sans);
  font-size: 16px;
  color: var(--mute);
  padding: 0 6px;
  margin-left: 4px;
  cursor: default;
}
#vai .dashboard__ext{
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  white-space: nowrap;
  letter-spacing: 0;
  flex-shrink: 0;
}
#vai .chart-box--wide{
  grid-column: 1 / -1;
  margin-top: 16px;
}
#vai .chart-box__sub{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.03em;
  margin-top: -4px;
  margin-bottom: 12px;
}
#vai .scatter-legend{
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 4px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
}
#vai .scatter-legend__item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#vai .scatter-legend__item .dot{
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
#vai .scatter-legend__item em{
  font-style: italic;
  color: var(--accent);
  margin-left: 2px;
}
#vai .dashboard__tabs{
  display: flex; gap: 2px;
  font-family: var(--mono); font-size: 11px;
  color: var(--mute);
  margin-left: auto;
}
#vai .dashboard__tabs span{ padding: 4px 10px; border-radius: 4px; }
#vai .dashboard__tabs span.active{ background: var(--white); color: var(--ink); }

#vai .dashboard__body{
  display: grid;
  grid-template-columns: 44px 200px 1fr;
  min-height: 560px;
}
#vai .dashboard__iconrail{
  background: #F2F1EF;
  border-right: 1px solid var(--line);
  padding: 12px 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
#vai .dashboard__iconrail .ico{
  width: 32px; height: 32px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--mute);
  cursor: pointer;
}
#vai .dashboard__iconrail .ico.active{ background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
#vai .dashboard__iconrail .ico--brand{
  background: var(--accent); color: #fff;
  font-family: var(--display); font-weight: 900; font-size: 13px;
  margin-bottom: 8px;
}
#vai .dashboard__side{
  background: #F2F1EF;
  border-right: 1px solid var(--line);
  padding: 12px 0;
  font-size: 13px;
}
#vai .dashboard__workspace{
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
  font-size: 12px;
}
#vai .dashboard__workspace-mark{
  width: 20px; height: 20px; border-radius: 4px;
  background: #D5E3CD; color: #2b5a3a;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 9px;
}
#vai .dashboard__workspace-name{ flex: 1; color: var(--ink-3); font-weight: 500; }
#vai .dashboard__workspace-caret{ color: var(--mute); font-size: 10px; }

#vai .dashboard__side-group{
  padding: 6px 20px;
  font-family: var(--sans); font-size: 10px;
  color: var(--mute); letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 10px;
  font-weight: 500;
}
#vai .dashboard__side-item{
  padding: 8px 20px;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  position: relative;
}
#vai .dashboard__side-item.active{ color: var(--ink); font-weight: 500; background: var(--white); }
#vai .dashboard__side-item.active::before{
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: var(--accent);
}
#vai .dashboard__side-item .pill{
  margin-left: auto;
  font-family: var(--mono); font-size: 10px;
  background: var(--err-tint); color: var(--err);
  padding: 1px 6px; border-radius: 4px;
}
#vai .dashboard__side-item .dot{ display: none; }
#vai .dashboard__side-item.active .dot{ display: none; }

#vai .dashboard__main{
  padding: 20px 28px 24px;
  overflow: hidden;
  background: var(--white);
}
#vai .dashboard__topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 20px;
}
#vai .dashboard__topright{
  display: flex; align-items: center; gap: 10px;
}
#vai .dashboard__iconbtn{
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--mute); font-size: 13px;
}
#vai .dashboard__avatar{
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 10px;
}
#vai .dashboard__meta-chips{
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
#vai .dashboard__meta-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0;
}
#vai .dashboard__title{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 0;
}
#vai .dashboard__toolbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
#vai .dashboard__tabs-inner{
  display: flex;
  gap: 2px;
  background: #f5f3ed;
  padding: 3px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--mute);
  font-weight: 500;
}
#vai .dashboard__tabs-inner span{
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
}
#vai .dashboard__tabs-inner span.active{
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(11,11,15,0.06);
}
#vai .dashboard__meta{
  display: flex;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mute);
}
#vai .dashboard__meta span{
  padding: 4px 10px;
  background: #f5f3ed;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#vai .kpis{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
#vai .kpis--6{
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
#vai .kpi{
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  position: relative;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#vai .kpi__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
#vai .kpi__label{
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.1;
}
#vai .kpi__ico{
  font-size: 13px;
  color: var(--mute-2);
  line-height: 1;
}
#vai .kpi__value{
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
#vai .kpi__value .unit{ font-size: 15px; color: var(--ink); margin-left: 1px; font-weight: 700; }
/* pastel KPI backgrounds matching the real product */
#vai .kpi--mint{ background: #e3f5ec; border-color: #cde8dc; }
#vai .kpi--mint   .kpi__ico{ color: #1f7a3a; }
#vai .kpi--blue{ background: #e5eefc; border-color: #cfddf6; }
#vai .kpi--blue   .kpi__ico{ color: #1a5fd0; }
#vai .kpi--violet{ background: #ece3f8; border-color: #dccef0; }
#vai .kpi--violet .kpi__ico{ color: #5a3cc4; font-weight: 700; }
#vai .kpi--pink{ background: #fbe6ec; border-color: #f3d0dc; }
#vai .kpi--pink   .kpi__ico{ color: #b53a6e; }
#vai .kpi--teal{ background: #ddf0ee; border-color: #c6e4e0; }
#vai .kpi--teal   .kpi__ico{ color: #0f7a75; font-family: var(--serif); }
#vai .kpi--orange{ background: #fdeadb; border-color: #f6d6be; }
#vai .kpi--orange .kpi__ico{ color: #c26a1f; }
#vai .kpi__delta{
  font-family: var(--mono); font-size: 11px;
  margin-top: 8px;
  color: var(--ok);
}
#vai .kpi__delta.warn{ color: var(--warn); }
#vai .kpi__delta.err{ color: var(--err); }

#vai .chart-row{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 12px;
}
#vai .chart-box{
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  padding: 16px 18px;
}
#vai .chart-box__head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
#vai .chart-box__title{
  font-size: 13px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.005em;
}
#vai .chart-box__meta{
  font-family: var(--mono); font-size: 10px; color: var(--mute);
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* Competitor table */
#vai .comp-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
#vai .comp-table th{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  color: var(--mute);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-2);
}
#vai .comp-table th:first-child{ padding-left: 0; width: 18px; }
#vai .comp-table th:nth-child(3), #vai .comp-table th:nth-child(4){ text-align: right; }
#vai .comp-table td{
  padding: 8px 8px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
}
#vai .comp-table td:first-child{
  padding-left: 0;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11px;
}
#vai .comp-table td:nth-child(3), #vai .comp-table td:nth-child(4){
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#vai .comp-table tbody tr:last-child td{ border-bottom: 0; }
#vai .comp-table tr.you td{ color: var(--ink); font-weight: 500; }
#vai .comp-table__brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#vai .comp-table__dot{
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
}
#vai .comp-table__you{
  display: inline-block;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
  margin-left: 4px;
}

#vai .comp-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 7px 0;
  font-size: 12px;
  align-items: center;
}
#vai .comp-row + .comp-row{ border-top: 1px dashed var(--line-2); }
#vai .comp-row__name{ color: var(--ink-3); }
#vai .comp-row__name.you{ color: var(--accent); font-weight: 600; }
#vai .comp-row__bar{ position: relative; width: 120px; height: 6px; background: var(--line-2); border-radius: 3px; }
#vai .comp-row__fill{ position: absolute; inset: 0; border-radius: 3px; background: var(--mute-2); }
#vai .comp-row__name.you + .comp-row__bar .comp-row__fill{ background: var(--accent); }
#vai .comp-row__value{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); min-width: 28px; text-align: right; }
#vai .comp-row__name.you ~ .comp-row__value{ color: var(--accent); font-weight: 600; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
#vai .btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 500;
  transition: transform .15s, box-shadow .15s, background .15s;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
}
#vai .btn .arr{ font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 0; }
#vai .btn--primary{ background: var(--ink); color: var(--paper); }
#vai .btn--primary:hover{ background: var(--accent-ink); transform: translateY(-1px); }
#vai .btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
#vai .btn--ghost:hover{ border-color: var(--ink); }
#vai .btn--accent{ background: var(--accent); color: var(--white); }
#vai .btn--accent:hover{ background: var(--accent-ink); }
#vai .btn--light{ background: var(--paper); color: var(--ink); }
#vai .btn--light:hover{ background: var(--white); }

/* ==========================================================================
   Tweaks panel
   ========================================================================== */
#vai #tweaks-root{ display: none; }
#vai .tweaks{
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 200;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 14px;
  padding: 14px;
  font-size: 13px;
  box-shadow: 0 24px 56px -18px rgba(11,11,15,0.28);
  font-family: var(--sans);
}
#vai .tweaks__title{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute);
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
#vai .tweaks__row{ margin: 12px 0; }
#vai .tweaks__row label{
  display: block; font-size: 11px; color: var(--mute);
  margin-bottom: 6px; font-family: var(--mono);
  letter-spacing: 0.05em; text-transform: uppercase;
}
#vai .tweaks__opts{ display: flex; gap: 4px; flex-wrap: wrap; }
#vai .tweaks__opt{
  flex: 1;
  min-width: 60px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  background: var(--bg);
  color: var(--ink-3);
  text-align: center;
}
#vai .tweaks__opt.active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
#vai .tweaks__swatch{
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  display: inline-block;
}
#vai .tweaks__swatch.active{ border-color: var(--ink); transform: scale(1.12); }
#vai.tweaks-on #tweaks-root{ display: block; }

/* ==========================================================================
   SHIFT section
   ========================================================================== */
#vai .shift{ background: var(--ink); color: var(--paper); }
#vai .shift .section-head{ border-top-color: rgba(255,255,255,0.08); }
#vai .shift .section-head__label{ color: rgba(255,255,255,0.5); }
#vai .shift .section-head__label .num{ color: var(--paper); }
#vai .shift .section-head h2{ color: var(--paper); }
#vai .shift .section-head h2 em{ color: var(--orange); }
#vai .shift-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 24px;
}
#vai .shift-cell{
  padding: 40px 32px 48px;
  border-right: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
#vai .shift-cell:last-child{ border-right: 0; }
#vai .shift-cell__num{
  font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.05em;
  margin-bottom: 40px;
  display: flex; justify-content: space-between;
}
#vai .shift-cell__num .tag{ color: var(--orange); }
#vai .shift-cell h3{
  font-family: var(--display);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  color: var(--paper);
}
#vai .shift-cell p{
  font-size: 15px;
  color: rgba(255,255,255,0.68);
  line-height: 1.55;
  max-width: 32ch;
}
#vai .shift-cell__viz{ margin-top: 28px; height: 84px; }

#vai .shift-cta{
  padding: 48px 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
#vai .shift-cta p{
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  max-width: 620px;
}
#vai .shift-cta .line{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  display: block;
  text-transform: uppercase;
  font-style: normal;
}

/* ==========================================================================
   AGENT — three layers, interactive
   ========================================================================== */
#vai .agent{}
#vai .agent__lead{
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  max-width: 680px;
  margin-bottom: 48px;
  text-wrap: pretty;
}

#vai .layers{
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 80px);
}
#vai .layers__nav{
  display: flex; flex-direction: column;
  gap: 4px;
  position: sticky; top: 80px;
}
#vai .layer-tab{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 18px 18px 18px 0;
  text-align: left;
  border-top: 1px solid var(--line);
  color: var(--mute);
  transition: color .15s;
  align-items: start;
  cursor: pointer;
}
#vai .layer-tab:last-of-type{ border-bottom: 1px solid var(--line); }
#vai .layer-tab__idx{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute-2);
  letter-spacing: 0.05em;
  padding-top: 6px;
}
#vai .layer-tab h3{
  font-family: var(--display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink-3);
  line-height: 1.1;
  margin-bottom: 4px;
}
#vai .layer-tab p{
  font-size: 13px;
  color: var(--mute);
  line-height: 1.4;
}
#vai .layer-tab.active{ color: var(--ink); }
#vai .layer-tab.active h3{ color: var(--ink); }
#vai .layer-tab.active .layer-tab__idx{ color: var(--accent); }
#vai .layer-tab.active{ background: linear-gradient(to right, rgba(26,95,208,0.04), transparent 60%); }

#vai .layer-panel{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  min-height: 520px;
  position: relative;
}
#vai .layer-panel__head{
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px;
  color: var(--mute); letter-spacing: 0.05em;
  text-transform: uppercase;
}
#vai .layer-panel__head .live{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ok);
}
#vai .layer-panel__head .live::before{
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint);
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }

#vai .layer-panel__body{ padding: 28px; }

/* ==========================================================================
   CAPABILITIES
   ========================================================================== */
#vai .caps{
  background: var(--paper);
}
#vai .caps__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: 16px;
  padding-bottom: clamp(48px, 6vw, 80px);
}
#vai .cap{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  grid-column: span 6;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 320px;
}
#vai .cap--lg{ grid-column: span 12; min-height: 440px; }
#vai .cap--sm{ grid-column: span 4; min-height: 260px; padding: 24px; }
#vai .cap__tag{
  font-family: var(--mono); font-size: 10px;
  color: var(--mute); letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
#vai .cap__tag::before{ content: ''; width: 20px; height: 1px; background: var(--ink-3); }
#vai .cap h3{
  font-family: var(--display);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
  text-wrap: pretty;
}
#vai .cap--sm h3{ font-size: 22px; }
#vai .cap p{
  font-size: 14px;
  color: var(--mute);
  line-height: 1.55;
  max-width: 42ch;
}
#vai .cap__viz{
  margin-top: auto;
  padding-top: 24px;
}

/* Pipeline visualization */
#vai .pipeline{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.03em;
}
#vai .pipeline__step{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 4px;
  border-radius: 8px;
  background: var(--paper);
  text-align: center;
  text-transform: uppercase;
  position: relative;
  transition: background .3s, color .3s;
}
#vai .pipeline__step.active{
  background: var(--ink);
  color: var(--paper);
}
#vai .pipeline__step.done{
  background: var(--accent-tint);
  color: var(--accent);
}
#vai .pipeline__step.loop{
  background: var(--orange-tint);
  color: var(--orange);
}
#vai .pipeline__step .label{ font-weight: 500; font-size: 9px; letter-spacing: 0.05em; }
#vai .pipeline__step .val{ font-family: var(--serif); font-size: 20px; font-style: italic; font-weight: 400; }
#vai .pipeline__arrow{ height: 1px; background: var(--line); position: relative; }
#vai .pipeline__arrow::after{
  content: '→'; font-family: var(--mono); position: absolute;
  right: -4px; top: -8px; color: var(--mute-2);
}

/* MCP chat */
/* Claude-style dark MCP chat */
#vai .chat{
  background: #1e1e24;
  color: rgba(255,255,255,0.88);
  border-radius: 14px;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  height: 100%;
  min-height: 560px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
}
#vai .chat__head{
  padding: 12px 16px;
  font-family: var(--sans); font-size: 13px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex; align-items: center; gap: 12px;
  background: #26262c;
}
#vai .chat__head-title{
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
#vai .chat__head-title::after{
  content: ' ▾';
  color: rgba(255,255,255,0.4);
  font-size: 10px;
  margin-left: 2px;
}
#vai .chat__head .dots{ display: flex; gap: 6px; }
#vai .chat__head .dots span{ width: 10px; height: 10px; border-radius: 50%; }
#vai .chat__head .dots span:nth-child(1){ background: #e2826b; }
#vai .chat__head .dots span:nth-child(2){ background: #e0c164; }
#vai .chat__head .dots span:nth-child(3){ background: #7fae7a; }
#vai .chat__body{
  padding: 18px 22px 10px;
  display: flex; flex-direction: column;
  gap: 16px;
  flex: 1;
  overflow: hidden;
}
#vai .chat-section-head{
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-transform: uppercase;
  font-weight: 600;
}
#vai .chat-section-head__meta{ color: rgba(255,255,255,0.35); font-weight: 400; }

#vai .chat-radar{ display: flex; flex-direction: column; gap: 10px; }
#vai .chat-radar__legend{
  display: flex; justify-content: center; gap: 20px;
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(255,255,255,0.75);
}
#vai .chat-radar__key{ display: inline-flex; align-items: center; gap: 6px; }
#vai .chat-radar__key span{
  width: 10px; height: 10px; border-radius: 2px;
  display: inline-block;
}
#vai .cap .chat-radar__note, #vai .chat-radar__note{
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  text-align: center;
  padding: 0 8px;
  margin: 0 auto;
  max-width: 520px;
}

#vai .chat-bars{ font-family: var(--sans); }
#vai .chat-bars__head{
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
  font-weight: 500;
}
#vai .chat-bars__list{ display: flex; flex-direction: column; gap: 5px; }
#vai .chat-bar{
  display: grid;
  grid-template-columns: 130px 1fr 36px;
  gap: 12px;
  align-items: center;
  font-size: 11px;
}
#vai .chat-bar__lbl{ color: rgba(255,255,255,0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vai .chat-bar__lbl.acc{ color: #6da5ea; font-weight: 500; }
#vai .chat-bar__own{ color: rgba(255,255,255,0.4); font-size: 10px; font-weight: 400; }
#vai .chat-bar__track{
  height: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
#vai .chat-bar__fill{
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 2px;
}
#vai .chat-bar__val{
  text-align: right;
  color: rgba(255,255,255,0.7);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
#vai .chat-bars__groups{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
#vai .chat-bars__gt{
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  margin-right: 4px;
}
#vai .chat-bars__chip{
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(109,165,234,0.14);
  color: #8ab8ec;
  border: 1px solid rgba(109,165,234,0.22);
}
#vai .chat-bars__chip--own{
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: transparent;
}

#vai .chat-msg__text--assistant{
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
  font-size: 12.5px;
}
#vai .chat-msg__text .typing{
  display: inline-block;
  width: 6px; height: 14px;
  background: rgba(255,255,255,0.8);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0; } }

#vai .chat__input{
  margin: 10px 16px 14px;
  padding: 12px 14px 10px;
  background: #2a2a30;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  font-family: var(--sans); font-size: 13px;
  color: rgba(255,255,255,0.4);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px;
  min-height: 60px;
}
#vai .chat__input-ph{
  flex: 1;
  padding-top: 2px;
}
#vai .chat__input-model{
  color: rgba(255,255,255,0.55);
  font-size: 11.5px;
}

/* ==========================================================================
   RESULTS
   ========================================================================== */
#vai .results{}
#vai .results__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line);
}
#vai .result{
  padding: 32px 28px 36px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  min-height: 240px;
  display: flex; flex-direction: column;
}
#vai .result:last-child{ border-right: 0; }
#vai .result__brand{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--mute);
  margin-bottom: auto;
  text-transform: uppercase;
}
#vai .result__stat{
  font-family: var(--display);
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--accent);
  margin: 24px 0 8px;
}
#vai .result__stat .x{ font-style: italic; }
#vai .result__stat .sign{ color: var(--orange); font-style: italic; }
#vai .result__metric{
  font-size: 15px; color: var(--ink); font-weight: 500;
  margin-bottom: 8px;
}
#vai .result__detail{
  font-size: 13px; color: var(--mute); line-height: 1.45;
}

/* ==========================================================================
   COMPARISON
   ========================================================================== */
#vai .compare{ background: var(--paper); padding-bottom: clamp(48px, 6vw, 80px); }
#vai .compare__table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
#vai .compare__table th, #vai .compare__table td{
  padding: 18px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
  font-size: 14px;
  vertical-align: middle;
}
#vai .compare__table th{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mute);
  background: var(--paper);
  font-weight: 500;
}
#vai .compare__table th.us{
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
#vai .compare__table th.us::before{
  content: 'You';
  position: absolute; top: 6px; right: 10px;
  font-family: var(--mono); font-size: 9px;
  color: var(--orange); letter-spacing: 0.08em;
}
#vai .compare__table tbody tr:last-child td{ border-bottom: 0; }
#vai .compare__table td:first-child{
  font-weight: 500;
  color: var(--ink);
}
#vai .compare__table .us-col{
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-weight: 500;
  border-left: 1px solid var(--accent-tint-2);
  border-right: 1px solid var(--accent-tint-2);
}
#vai .compare__table .us-col.strong{
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
}
#vai .compare__table .x{ color: var(--mute-2); font-family: var(--mono); font-size: 16px; }
#vai .compare__table .check{ color: var(--accent); font-weight: 600; }
#vai .compare__row--head td{
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--ink);
  background: var(--paper-2);
}

/* Why list */
#vai .why{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
#vai .why__item{
  padding: 24px 20px 28px;
  border-right: 1px solid var(--line);
}
#vai .why__item:last-child{ border-right: 0; }
#vai .why__item__num{
  font-family: var(--mono); font-size: 11px;
  color: var(--accent); letter-spacing: 0.08em;
  margin-bottom: 24px;
}
#vai .why__item h4{
  font-family: var(--display);
  font-size: 20px; font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 10px;
  color: var(--ink);
}
#vai .why__item p{ font-size: 13.5px; color: var(--mute); line-height: 1.5; }

/* ==========================================================================
   STATS ROW
   ========================================================================== */
#vai .stats{
  background: var(--ink);
  color: var(--paper);
  padding: 56px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
#vai .stats__grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
#vai .stat{
  padding: 0 28px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
#vai .stat:last-child{ border-right: 0; }
#vai .stat__value{
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-bottom: 12px;
}
#vai .stat__value em{ font-style: italic; color: var(--orange); }
#vai .stat__label{
  font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1.45;
  max-width: 22ch;
}

/* ==========================================================================
   CTA
   ========================================================================== */
#vai .cta{}
#vai .cta__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 72px 0;
  border-top: 1px solid var(--line);
}
#vai .cta h2{
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
#vai .cta h2 em{ font-style: italic; color: var(--accent); }
#vai .cta__future{
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: 24px;
  max-width: 52ch;
}
#vai .cta__details{
  list-style: none;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.02em;
}
#vai .cta__details li{
  padding: 10px 0;
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 12px;
}
#vai .cta__details li::before{
  content: '✓'; color: var(--accent);
  font-weight: 600;
}

#vai .audit-form{
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 20px;
  padding: 32px;
  position: relative;
  box-shadow: 0 1px 0 var(--ink), 0 32px 80px -30px rgba(11,11,15,0.2);
}
#vai .audit-form__label{
  font-family: var(--mono); font-size: 11px;
  color: var(--mute); letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex; justify-content: space-between;
}
#vai .audit-form__label .step{ color: var(--orange); }
#vai .audit-form h3{
  font-family: var(--display);
  font-size: 28px; font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
#vai .audit-form__sub{
  font-size: 14px; color: var(--mute);
  margin-bottom: 24px;
}
#vai .audit-field{
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  gap: 12px;
}
#vai .audit-field label{
  font-family: var(--mono); font-size: 11px;
  color: var(--mute); letter-spacing: 0.05em;
  text-transform: uppercase;
}
#vai .audit-field input{
  border: 0;
  background: transparent;
  font-size: 16px;
  outline: none;
  padding: 4px 0;
  font-family: var(--sans);
}
#vai .audit-field input::placeholder{ color: var(--mute-2); }
#vai .audit-form__submit{
  margin-top: 24px;
  width: 100%;
  justify-content: center;
  padding: 16px;
  font-size: 15px;
}
#vai .audit-form__note{
  margin-top: 16px;
  font-family: var(--mono); font-size: 11px;
  color: var(--mute);
  text-align: center;
  letter-spacing: 0.02em;
}
#vai .audit-form__note a{ color: var(--accent); }

/* ==========================================================================
   LOGO BAR
   ========================================================================== */
#vai .logobar{
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
#vai .logobar__inner{
  display: flex; align-items: center; gap: 48px;
  flex-wrap: wrap;
  justify-content: center;
}
#vai .logobar__label{
  font-family: var(--mono); font-size: 11px;
  color: var(--mute); letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-basis: 100%;
  text-align: center;
  margin-bottom: 12px;
}
#vai .logobar__item{
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: -0.02em;
  font-style: italic;
  opacity: 0.78;
  transition: opacity .2s;
}
#vai .logobar__item:hover{ opacity: 1; }
#vai .logobar__logo{
  height: 28px;
  width: auto;
  max-width: 160px;
  opacity: 0.68;
  object-fit: contain;
  transition: opacity .2s;
}
#vai .logobar__logo:hover{ opacity: 1; }
#vai .logobar__item.mono{
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
}
#vai .logobar__item.small{ font-size: 20px; }
#vai .logobar__item.tracked{
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2em;
  font-size: 16px;
  text-transform: uppercase;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#vai .footer{
  padding: 72px 0 48px;
  background: #0E0E10;
  color: rgba(255,255,255,0.78);
  border-top: 1px solid #0E0E10;
}
#vai .footer__grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#vai .footer__brand h3{
  font-family: var(--display);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 18px;
  color: #fff;
}
#vai .footer__brand h3 em{ font-style: italic; color: var(--accent); }
#vai .footer__brand p{
  font-size: 14px; color: rgba(255,255,255,0.6);
  max-width: 36ch; line-height: 1.55;
}
#vai .footer__col h4{
  font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,0.45); letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 500;
}
#vai .footer__col ul{ list-style: none; }
#vai .footer__col li{ padding: 5px 0; font-size: 14px; color: rgba(255,255,255,0.72); }
#vai .footer__col li a{ transition: color .15s; }
#vai .footer__col li a:hover{ color: #fff; }
#vai .footer__bottom{
  padding-top: 32px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,0.45); letter-spacing: 0.03em;
}
#vai .footer__giant{
  padding: 48px 0 8px;
  font-family: var(--serif);
  font-size: clamp(80px, 18vw, 260px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: #fff;
  text-align: center;
  user-select: none;
}
#vai .footer__giant em{ font-style: italic; color: var(--accent); }
#vai .footer__giant .slash{ color: var(--orange); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  #vai .cta__inner, #vai .layers{ grid-template-columns: 1fr; }
  #vai .shift-grid, #vai .caps__grid, #vai .results__grid, #vai .stats__grid, #vai .why{ grid-template-columns: 1fr 1fr; }
  #vai .cap, #vai .cap--sm, #vai .cap--lg{ grid-column: span 6; }
  
  
  
  #vai .section-head{ grid-template-columns: 1fr; gap: 12px; }
  #vai .footer__grid{ grid-template-columns: 1fr 1fr; }
  #vai .layers__nav{ position: static; }
}
@media (max-width: 720px) {
  
  
  #vai .hero__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #vai .nav__links{ display: none; }
  #vai .shift-grid, #vai .caps__grid, #vai .results__grid, #vai .stats__grid, #vai .why, #vai .footer__grid{ grid-template-columns: 1fr; }
  #vai .cap, #vai .cap--sm, #vai .cap--lg{ grid-column: span 12; }
  #vai .shift-cell, #vai .stat, #vai .result, #vai .why__item{ border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
  #vai .stat{ border-bottom-color: rgba(255,255,255,0.08); }
  #vai .stat, #vai .shift-cell{ padding-top: 32px; padding-bottom: 32px; }
  #vai .audit-prompt{ flex-direction: column; align-items: stretch; }
  #vai .audit-prompt__label{ padding: 14px 18px 0; }
}

/* Accent variations via tweaks */
#vai[data-accent="orange"]{
  --accent: #d9791f;
  --accent-ink: #a95d0f;
  --accent-tint: #fbece0;
  --accent-tint-2: #f3d7b3;
}
#vai[data-accent="green"]{
  --accent: #1f7a3a;
  --accent-ink: #0f5826;
  --accent-tint: #e4f1e9;
  --accent-tint-2: #c1dfca;
}
#vai[data-accent="violet"]{
  --accent: #5a3cc4;
  --accent-ink: #3d278f;
  --accent-tint: #ece7fb;
  --accent-tint-2: #d5ccf5;
}

#vai[data-type="sans"]{
  --serif: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}
#vai[data-type="sans"] h1, #vai[data-type="sans"] h2, #vai[data-type="sans"] h3, #vai[data-type="sans"] h4{
  font-style: normal !important;
  font-weight: 600;
  letter-spacing: -0.025em;
}
#vai[data-type="sans"] em{
  font-style: italic !important;
  font-weight: 500;
}

#vai[data-density="compact"]{ --density: 0.6; }
#vai[data-density="airy"]{ --density: 1.4; }

/* ==========================================================================
   BRAND OVERRIDES — Virayo display system
   ========================================================================== */
/* UPPERCASE kept only on hero h1 + giant footer wordmark */
#vai .hero h1, #vai .footer__giant{
  text-transform: uppercase;
}
#vai .hero h1{ letter-spacing: -0.035em; line-height: 0.98; }
#vai .footer__giant{ letter-spacing: -0.04em; line-height: 0.82; }

/* Display headlines, Geograph Black in sentence case */
#vai .section-head h2, #vai .shift-cell h3, #vai .layer-tab h3, #vai .cap h3, #vai .result__stat, #vai .why__item h4, #vai .stat__value, #vai .cta h2, #vai .audit-form h3, #vai .footer__brand h3{
  text-transform: none;
  letter-spacing: -0.022em;
  line-height: 1.04;
}
#vai .cta h2{ letter-spacing: -0.028em; line-height: 0.98; }
#vai .result__stat, #vai .stat__value{ letter-spacing: -0.04em; line-height: 0.9; }

/* Italic serif accents inside display headlines — stays as Arbutus from virayo.css */
#vai .hero h1 em, #vai .section-head h2 em, #vai .cta h2 em, #vai .footer__brand h3 em, #vai .footer__giant em{
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Lead paragraphs + pull-quotes still use Arbutus italic */
#vai .agent__lead, #vai .shift-cta p, #vai .cta__future{
  font-family: var(--serif);
  font-weight: 400;
}
#vai .agent__lead::first-letter{ font-family: var(--serif); font-weight: 400; }

/* Logo bar — use clean Geograph instead of serif for brand-name placeholders */
#vai .logobar__item{
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 18px;
}

/* Nav + footer wordmark — replaced by logo.svg below, hide text */
#vai .nav__brand-text, #vai .footer__brand h3 .brand-text{ display: none; }

/* Dark hero variant */
#vai .hero--dark{
  background: var(--ink);
  color: var(--paper);
}
#vai .hero--dark .hero__eyebrow{ color: rgba(255,255,255,0.5); }
#vai .hero--dark .hero__eyebrow::before{ background: rgba(255,255,255,0.3); }
#vai .hero--dark h1{ color: var(--paper); }
#vai .hero--dark h1 em{ color: var(--accent); }
#vai .hero--dark .hero__sub{ color: rgba(255,255,255,0.7); }
#vai .hero--dark .hero__sub strong{ color: var(--paper); }
#vai .hero--dark .audit-prompt{
  background: var(--ink-2);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 24px 40px -20px rgba(0,0,0,0.5);
}
#vai .hero--dark .audit-prompt input{ color: var(--paper); }
#vai .hero--dark .audit-prompt input::placeholder{ color: rgba(255,255,255,0.3); }
#vai .hero--dark .audit-prompt__label{ color: rgba(255,255,255,0.5); }
#vai .hero--dark .audit-prompt__btn{ background: var(--paper); color: var(--ink); }
#vai .hero--dark .hero__meta{ color: rgba(255,255,255,0.5); }