:root{
  /* Mission Control Color System */
  /* Deep graphite backgrounds */
  --bg0: #0f1419;  /* Main background - deep graphite */
  --bg1: #1a1f26;  /* Panel background - slightly lighter */
  --bg2: #242932;  /* Hover/active states */
  
  /* Borders and dividers */
  --line: #2a3038;  /* Thin, low-contrast borders */
  --line-subtle: #1f252c;  /* Even more subtle dividers */
  
  /* Text colors */
  --text1: #e8eaed;  /* Primary text - off-white */
  --text2: #b8bcc3;  /* Secondary text - muted gray */
  --muted: #6b7785;  /* Tertiary text - more muted */
  
  /* Accent color - muted cyan */
  --accent: #5b8fa8;  /* Muted cyan for primary actions */
  --accent-hover: #6ba0b8;
  
  /* Status colors */
  --status-reviewable: #4a7c59;  /* Green for "reviewable" */
  --status-needs-review: #b8860b;  /* Amber for "needs review" */
  --status-critical: #c44e4e;  /* Red for critical alerts (sparingly) */
  
  /* Corner radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  
  /* Letter spacing */
  --letter-tight: 0.05em;
  --letter-normal: 0.08em;
  
  /* Parallax amplitude (keep subtle) */
  --p1: 0.15;
  --p2: 0.30;
  --p3: 0.45;

  /* runtime set by JS */
  --scroll: 0;
}

/* Retro Theme Overrides */
[data-theme="retro"] {
  /* Deeper, cooler background tones */
  --bg0: #0a0e12;
  --bg1: #14181d;
  --bg2: #1d2228;
  
  /* More pronounced borders */
  --line: #2d3440;
  --line-subtle: #252a32;
  
  /* Terminal cyan accent (brighter but still muted) */
  --accent: #6bb3c7;
  --accent-hover: #7bc5d9;
  
  /* Sharper corners */
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;
  
  /* Tighter letter spacing */
  --letter-tight: 0.03em;
  --letter-normal: 0.06em;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text2);
  background: var(--bg0);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular numbers for hashes/timestamps */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Page scaffold */
.page{
  min-height:200vh; /* so you can see parallax */
  position:relative;
  background: var(--bg0);
}

.dashboard-page {
  background: var(--bg0);
}

/* Parallax background container */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background: var(--bg0);
  opacity: 0.3;  /* Reduced opacity for mission control */
}

/* Soft vignette / light falloff - much lighter */
.bg::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(1000px 600px at 50% 30%,
      rgba(255,255,255,0.30) 0%,
      rgba(255,255,255,0.15) 40%,
      rgba(255,255,255,0.08) 70%,
      rgba(255,255,255,0.02) 100%);
  pointer-events:none;
  mix-blend-mode: normal;
  z-index: 3;
}

/* Optional "portal" glow behind hero */
.portal{
  position:absolute;
  left:50%;
  top:18%;
  width:min(900px, 90vw);
  height:min(520px, 55vh);
  transform:translateX(-50%);
  background:
    radial-gradient(closest-side at 50% 55%,
      rgba(255,255,255,0.95) 0%,
      rgba(215,221,227,0.35) 35%,
      rgba(215,221,227,0.15) 55%,
      rgba(215,221,227,0.00) 75%);
  filter: blur(0.2px);
  opacity:0.9;
  pointer-events:none;
}

/* Parallax layers */
.layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  will-change: transform;
  transform: translate3d(0,0,0);
  pointer-events:none;
}

.layer.layer-a{
  opacity:1.0;
  z-index: 1;
  transform: translate3d(0, calc(var(--scroll) * var(--p1) * 1px), 0);
}
.layer.layer-b{
  opacity:1.0;
  z-index: 2;
  transform: translate3d(0, calc(var(--scroll) * var(--p2) * 1px), 0);
}
.layer.layer-c{
  opacity:1.0;
  z-index: 2;
  transform: translate3d(0, calc(var(--scroll) * var(--p3) * 1px), 0);
}

/* Hero layout */
header{
  position:relative;
  padding: 40px 28px;
  max-width: 1200px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.wordmark{
  font-weight:600;
  letter-spacing:0.02em;
  color: var(--text2);
  font-size: 18px;
  user-select:none;
}
.wordmark a{
  color: inherit;
  text-decoration: none;
}
.wordmark a:hover{
  color: var(--text1);
}
nav a{
  color: var(--muted);
  text-decoration:none;
  margin-left:18px;
  font-size:14px;
  letter-spacing:0.02em;
}
nav a:hover{ color: var(--text2); }
nav a.nav-login{
  margin-left: 18px;
  color: var(--text2);
  font-weight: 500;
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.15s;
}

nav a.nav-login:hover {
  color: var(--text1);
}

nav button.nav-login {
  margin-left: 18px;
  color: var(--text2);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.15s;
}

nav button.nav-login:hover {
  color: var(--text1);
}

/* Retro Theme: Global subtle texture overlay */
[data-theme="retro"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(0, 0, 0, 0.015) 1px,
      rgba(0, 0, 0, 0.015) 2px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 1px,
      rgba(0, 0, 0, 0.01) 1px,
      rgba(0, 0, 0, 0.01) 2px
    );
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
}

[data-theme="retro"] .dashboard-shell {
  position: relative;
  z-index: 1;
}

.hero{
  position:relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 28px 60px;
}
h1{
  margin:0;
  font-size: clamp(34px, 4vw, 56px);
  font-weight:600;
  letter-spacing:0.02em;
  color: var(--text1);
  line-height:1.2;
  max-width: 28ch;
}
.sub{
  margin-top:18px;
  font-size: 18px;
  line-height:1.65;
  color: var(--text2);
  max-width: 62ch;
}
.hero-benefits{
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.hero-benefits span{
  display: inline-flex;
  align-items: center;
}
.hero-benefits span::before{
  content: "✓";
  margin-right: 6px;
  color: var(--text2);
  font-weight: 600;
}

/* —— Marketing home: hero grid, SVG art, benefit cards —— */
.hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 1100px){
  .hero-grid{
    /* Slightly favor the demo column so the hero video reads at product scale */
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
}
@media (max-width: 960px){
  .hero-grid{
    grid-template-columns: 1fr;
  }
  .hero-art{
    order: -1;
    width: 100%;
    max-width: min(100%, 640px);
    margin: 0 auto;
  }
}
.hero-copy{
  min-width: 0;
}
.hero-eyebrow{
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.hero-lead{
  max-width: 58ch;
}
.hero-benefit-cards{
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px){
  .hero-benefit-cards{
    grid-template-columns: 1fr;
  }
}
.hero-benefit-card{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(145deg, rgba(36,41,50,0.9), rgba(26,31,38,0.65));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.hero-benefit-icon{
  flex-shrink: 0;
  opacity: 0.95;
}
.hero-benefit-text{
  font-size: 13px;
  line-height: 1.45;
  color: var(--text2);
  letter-spacing: 0.02em;
}
.hero-llm-line{
  margin: 18px 0 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text2);
}
.hero-cta-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}
.page--marketing .hero-cta-row{
  margin-top: 22px;
}
.hero-cta-primary{
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 8px 28px rgba(91,143,168,0.25);
}
.hero-cta-primary:hover{
  filter: brightness(1.06);
}
.cta-ghost{
  margin-top: 0;
  border-bottom-color: rgba(91,143,168,0.35);
}
.cta-ghost:hover{
  border-bottom-color: var(--accent);
  color: var(--accent-hover);
}
.hero-art{
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  width: 100%;
}
.hero-art-img{
  width: 100%;
  max-width: 400px;
  height: auto;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.45));
}
.hero-art-video{
  width: 100%;
  max-width: min(100%, 820px);
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg1);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  vertical-align: middle;
}
.hero-art-fallback{
  display: none;
  width: 100%;
  max-width: min(100%, 820px);
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}
@media (prefers-reduced-motion: reduce){
  .hero-art-video{
    display: none;
  }
  .hero-art-fallback{
    display: block;
  }
}

/* Problem section: workplace screenshot frame */
.stack-lead{
  max-width: 72ch;
}
.stack-compare{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
  list-style: none;
  padding: 0;
}
@media (max-width: 900px){
  .stack-compare{
    grid-template-columns: 1fr;
  }
}
.stack-card{
  margin: 0;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(36,41,50,0.55), rgba(20,24,30,0.4));
}
.stack-card--amnesis{
  border-color: rgba(91,143,168,0.45);
  box-shadow: 0 0 0 1px rgba(123,197,217,0.12) inset;
  background: linear-gradient(165deg, rgba(91,143,168,0.1), rgba(20,24,30,0.45));
}
.stack-card-title{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text1);
}
.stack-card-body{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text2);
}

.marketing-figure--product{
  padding: 16px 18px 20px;
}
.marketing-image-frame,
.problem-product-frame{
  margin: 0 auto;
  max-width: min(100%, 920px);
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg1);
  box-shadow:
    0 4px 6px rgba(0,0,0,0.15),
    0 24px 56px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow: hidden;
}
.marketing-image-shot,
.problem-product-shot{
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}
.marketing-image-caption,
.problem-product-caption{
  padding: 12px 16px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text2);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--line-subtle);
  background: rgba(0,0,0,0.2);
}
@media (prefers-reduced-motion: no-preference){
  .marketing-drift{
    animation: marketing-drift 14s ease-in-out infinite;
  }
}
@keyframes marketing-drift{
  0%, 100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-8px) scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  .marketing-drift{
    animation: none;
  }
}
.section-kicker-row{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.section-kicker-icon{
  flex-shrink: 0;
  opacity: 0.9;
}
.marketing-figure{
  margin: 32px 0 0;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(36,41,50,0.5), rgba(26,31,38,0.35));
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
}
.marketing-figure img{
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.marketing-figure--diagram{
  margin-top: 28px;
  padding: 18px 20px 16px;
  max-width: min(100%, 880px);
  margin-left: auto;
  margin-right: auto;
}
.marketing-diagram-img{
  display: block;
  margin: 0 auto;
  max-width: min(100%, 760px);
}
.marketing-diagram-caption{
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text2);
  letter-spacing: 0.02em;
}

.cta{
  display:inline-block;
  margin-top:32px;
  font-size:15px;
  letter-spacing:0.02em;
  font-weight: 500;
  color: var(--text1);
  text-decoration:none;
  border-bottom: 2px solid rgba(46,58,70,0.25);
  padding-bottom: 4px;
  transition: border-color 0.2s;
}
.cta:hover{
  border-bottom-color: rgba(46,58,70,0.50);
}

button.cta {
  background: none;
  cursor: pointer;
  font: inherit;
}

/* "Amnesis" overlay wordmark (transparent) */
.overlay-word{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  user-select:none;
  transform: translateY(10px);
  opacity:0.10;
  font-weight:600;
  letter-spacing:0.02em;
  font-size: clamp(56px, 9vw, 140px);
  color: var(--text2);
  mix-blend-mode: multiply;
  filter: blur(0.0px);
}

/* Section styling */
.section{
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 28px;
}
.divider{
  height:1px;
  background: linear-gradient(90deg,
    rgba(215,221,227,0),
    rgba(215,221,227,1),
    rgba(215,221,227,0));
  opacity:0.75;
  margin: 30px 0;
}
.kicker{
  font-size:12px;
  letter-spacing:0.16em;
  color: var(--muted);
  text-transform: uppercase;
}
.p{
  margin-top:12px;
  font-size:16px;
  line-height:1.8;
  color: var(--text2);
  max-width: 70ch;
}

footer{
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 28px 110px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing:0.02em;
}

/* Form styles */
.form-wrap{
  max-width: 400px;
  margin-top: 24px;
}

.form{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input{
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text1);
  background: var(--bg2);
}

.input:focus{
  outline: none;
  border-color: var(--accent);
  background: var(--bg1);
}

.btn{
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--letter-tight);
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
}

.btn-primary{
  background: var(--accent);
  color: var(--text1);
}

.btn-primary:hover{
  background: var(--accent-hover);
}

.btn-outline{
  background: transparent;
  color: var(--text2);
  border-color: var(--line);
  width: 100%;
}

.btn-outline:hover{
  background: var(--bg2);
  border-color: var(--accent);
  color: var(--text1);
}

.error{
  margin-top: 12px;
  color: #dc2626;
  font-size: 13px;
  display: none;
}

.error.show{
  display: block;
}

.form-switch{
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.form-switch-label{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

@media (max-width: 700px){
  header{ gap: 14px; }
  nav{ display:none; }
  .portal{ top: 14%; height: 44vh; }
  .overlay-word{ opacity:0.08; }
}

/* Dashboard Layout */
.dashboard-page {
  min-height: 100vh;
  background: var(--bg1);
}

.dashboard-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Top Bar */
.dashboard-topbar {
  background: var(--bg0);
  border-bottom: 1px solid var(--line);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Retro theme: Subtle texture overlay */
[data-theme="retro"] .dashboard-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    );
  pointer-events: none;
  z-index: 1;
}

[data-theme="retro"] .dashboard-topbar > * {
  position: relative;
  z-index: 2;
}

/* Status dots (retro theme only) */
[data-theme="retro"] .dashboard-topbar::after {
  content: "● ● ●";
  display: block;
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  font-size: 6px;
  color: var(--accent);
  opacity: 0.4;
  letter-spacing: 6px;
  font-family: system-ui, sans-serif;
  line-height: 1;
}

.dashboard-brand {
  margin-left: 32px;  /* Space for status dots in retro theme */
}

[data-theme="default"] .dashboard-brand {
  margin-left: 0;
}

.dashboard-brand .wordmark {
  font-size: 15px;
  font-weight: 600;
  color: var(--text1);
  letter-spacing: var(--letter-normal);
  text-transform: uppercase;
  font-size: 12px;
}

.dashboard-topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dashboard-select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text1);
  background: var(--bg2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dashboard-select:hover {
  background: var(--bg1);
  border-color: var(--line-subtle);
}

.dashboard-select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg1);
}

/* Theme Selector */
.theme-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
}

.theme-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-tight);
}

.theme-select-input {
  min-width: 80px;
}

/* Dashboard Container */
.dashboard-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left Navigation */
.dashboard-nav {
  width: 200px;
  background: var(--bg1);
  border-right: 1px solid var(--line);
  padding: 16px 0;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 32px;
}

.nav-item {
  display: block;
  padding: 10px 24px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: var(--letter-tight);
}

.nav-item:hover {
  background: var(--bg2);
  color: var(--text2);
}

.nav-item.active {
  background: var(--bg2);
  color: var(--text1);
  font-weight: 500;
  border-left: 2px solid var(--accent);
  letter-spacing: var(--letter-tight);
}

.nav-label {
  display: block;
}

/* Main Content */
.dashboard-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: var(--bg0);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.dashboard-header h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text1);
  margin: 0;
  letter-spacing: -0.01em;
}

.as-of-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.as-of-selector label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 8px;
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Dashboard Cards */
.dashboard-card {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px;
  box-shadow: none;
  position: relative;
}

/* Retro theme: Subtle texture on cards */
[data-theme="retro"] .dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 1px,
      rgba(0, 0, 0, 0.02) 1px,
      rgba(0, 0, 0, 0.02) 2px
    );
  pointer-events: none;
  border-radius: var(--radius-sm);
  opacity: 0.5;
}

[data-theme="retro"] .dashboard-card > * {
  position: relative;
  z-index: 1;
}

.dashboard-card.full-width {
  grid-column: 1 / -1;
}

.dashboard-card h2 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text1);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: var(--letter-normal);
}

/* Decision Output */
.decision-output {
  font-size: 13px;
  line-height: 1.65;
}

.ai-response {
  background: var(--bg2);
  padding: 14px;
  border-radius: var(--radius-sm);
  margin: 12px 0;
  border-left: 2px solid var(--accent);
  color: var(--text2);
}

.decision-meta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.meta-item {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}

.meta-label {
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}

.meta-value {
  color: var(--text2);
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 11px;
}

/* Evidence List */
.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
}

.evidence-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  background: var(--bg2);
}

.evidence-item:hover {
  background: var(--bg1);
  border-color: var(--line-subtle);
}

.evidence-item-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 8px;
}

.evidence-item-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text1);
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.evidence-item-source {
  font-size: 11px;
  color: var(--muted);
  margin-left: 8px;
}

.evidence-item-excerpt {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evidence-item-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}

/* Evidence Drawer */
.evidence-drawer {
  position: fixed;
  right: -400px;
  top: 0;
  width: 400px;
  height: 100vh;
  background: var(--bg0);
  border-left: 1px solid var(--line);
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  transition: right 0.3s;
  z-index: 200;
  overflow-y: auto;
}

.evidence-drawer.open {
  right: 0;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
  display: none;
}

.drawer-backdrop.show {
  display: block;
}

.evidence-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg2);
}

.evidence-drawer-header h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.evidence-drawer-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
}

.evidence-drawer-content {
  padding: 16px 20px;
}

.evidence-drawer-full-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text2);
  white-space: pre-wrap;
  margin-top: 12px;
}

/* Readiness Cards */
.readiness-card {
  margin-bottom: 12px;
  padding: 14px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.readiness-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.readiness-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text1);
  text-transform: uppercase;
  letter-spacing: var(--letter-normal);
}

.readiness-badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 500;
}

.readiness-badge.ready {
  background: var(--status-reviewable);
  color: var(--text1);
  font-size: 10px;
  padding: 3px 8px;
}

.readiness-badge.warning {
  background: var(--status-needs-review);
  color: var(--text1);
  font-size: 10px;
  padding: 3px 8px;
}

.readiness-value {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 4px;
  margin-top: 6px;
}

.readiness-detail {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

/* Snapshot Info */
.snapshot-info {
  margin-top: 12px;
}

.snapshot-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}

.snapshot-label {
  color: var(--muted);
}

.snapshot-value {
  color: var(--text2);
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Audit Trail */
.audit-trail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.audit-item {
  padding: 12px;
  border-left: 2px solid var(--line);
  background: var(--bg2);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.audit-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.audit-item-action {
  font-size: 12px;
  font-weight: 500;
  color: var(--text1);
  text-transform: uppercase;
  letter-spacing: var(--letter-tight);
}

.audit-item-timestamp {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
}

.audit-item-detail {
  font-size: 12px;
  color: var(--text2);
  margin-top: 6px;
  line-height: 1.5;
}

/* Accordion */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.accordion-header h2 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text1);
  text-transform: uppercase;
  letter-spacing: var(--letter-normal);
  margin: 0;
}

.accordion-toggle {
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.15s;
}

.accordion-content {
  padding: 16px 0;
}

.accordion-content.show .accordion-toggle {
  transform: rotate(180deg);
}

.tech-section {
  margin-bottom: 24px;
}

.tech-section h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text1);
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: var(--letter-normal);
}

.tech-json {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 10px;
  overflow-x: auto;
  color: var(--text2);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 400px;
  overflow-y: auto;
  line-height: 1.5;
}

/* Dashboard Footer */
.dashboard-footer {
  background: var(--bg1);
  border-top: 1px solid var(--line);
  padding: 16px 24px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Interactive Panel */
.interactive-notice {
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 4px;
  font-size: 13px;
  display: none;
}

.interactive-notice.show {
  display: block;
}

.interactive-notice.info {
  background: #e0f2fe;
  border-left: 3px solid #0284c7;
  color: #0c4a6e;
}

.interactive-notice.error {
  background: #fee2e2;
  border-left: 3px solid #dc2626;
  color: #991b1b;
}

.interactive-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text1);
}

.interactive-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.interactive-buttons .btn {
  min-width: 140px;
}

/* Mode Selector */
.mode-selector {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-right: 16px;
}

.mode-btn {
  padding: 6px 14px;
  border: none;
  background: var(--bg2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border-right: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: var(--letter-tight);
}

.mode-btn:last-child {
  border-right: none;
}

.mode-btn:hover {
  background: var(--bg1);
  color: var(--text2);
}

.mode-btn.active {
  background: var(--accent);
  color: var(--text1);
  font-weight: 600;
}

/* Demo Mode Container */
.demo-mode {
  display: none;
  min-height: calc(100vh - 60px);
}

.demo-mode.active {
  display: block;
}

/* Chat Container (Use Avatar Mode) */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  background: var(--bg0);
}

.chat-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg1);
}

.chat-header h1 {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text1);
  letter-spacing: -0.01em;
}

.chat-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chat-status {
  display: inline-flex;
  align-items: center;
}

.chat-status::before {
  content: "●";
  color: var(--status-reviewable);
  margin-right: 6px;
  font-size: 6px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg0);
}

.chat-message {
  display: flex;
  gap: 10px;
  max-width: 75%;
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--text1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  text-transform: uppercase;
}

.chat-message.user .chat-message-avatar {
  background: var(--accent);
  color: var(--text1);
  border-color: var(--accent);
}

.chat-message-content {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text2);
  position: relative;
}

.chat-message.user .chat-message-content {
  background: var(--bg2);
  color: var(--text1);
  border-color: var(--line-subtle);
}

/* Status tag for assistant messages */
.chat-message-status {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--letter-tight);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.chat-message-status.reviewable {
  background: var(--status-reviewable);
  color: var(--text1);
}

.chat-message-status.needs-review {
  background: var(--status-needs-review);
  color: var(--text1);
}

.chat-input-area {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg1);
}

.suggested-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.prompt-chip {
  padding: 5px 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
  text-transform: none;
}

.prompt-chip:hover {
  background: var(--bg1);
  color: var(--text1);
  border-color: var(--accent);
}

.chat-input-wrapper {
  display: flex;
  gap: 8px;
}

.chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  color: var(--text1);
  background: var(--bg2);
}

.chat-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg1);
}

.chat-input:disabled {
  background: var(--bg2);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.chat-send-btn {
  padding: 10px 20px;
  background: var(--accent);
  color: var(--text1);
  border: none;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  text-transform: uppercase;
  letter-spacing: var(--letter-tight);
}

.chat-send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.chat-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-footer-note {
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--letter-tight);
}

/* Evidence Drawer Tab (for Use Avatar mode) */
.evidence-drawer-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  background: var(--bg1);
  color: var(--text2);
  padding: 6px 12px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  z-index: 150;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-bottom: none;
  text-transform: uppercase;
  letter-spacing: var(--letter-normal);
}

.evidence-drawer-tab:hover {
  background: var(--bg2);
  color: var(--text1);
}

.evidence-drawer-tab span {
  display: inline-block;
}

/* Evidence Drawer (for Use Avatar mode) */
.evidence-drawer-chat {
  position: fixed;
  right: -400px;
  top: 56px;
  width: 400px;
  height: calc(100vh - 56px);
  background: var(--bg1);
  border-left: 1px solid var(--line);
  box-shadow: none;
  transition: right 0.25s;
  z-index: 200;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.evidence-drawer-chat.open {
  right: 0;
}

.evidence-drawer-chat .evidence-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: var(--bg2);
}

.evidence-drawer-chat .evidence-drawer-header h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text1);
  text-transform: uppercase;
  letter-spacing: var(--letter-normal);
}

.evidence-drawer-chat .evidence-drawer-content {
  padding: 16px 20px;
  flex: 1;
  overflow-y: auto;
}

.evidence-approved-version {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.evidence-approved-version label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text1);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: var(--letter-tight);
}

.evidence-sources-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.evidence-source-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  background: var(--bg2);
  margin-bottom: 8px;
}

.evidence-source-item:hover {
  background: var(--bg1);
  border-color: var(--line-subtle);
}

.evidence-source-item-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text1);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: var(--letter-tight);
}

.evidence-source-item-excerpt {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evidence-source-item-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
}

.evidence-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.evidence-action-link {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.15s;
  text-transform: uppercase;
  letter-spacing: var(--letter-tight);
}

.evidence-action-link:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

/* ============================================================================
   PHASE B: GLASS + PRECISION (App Mode Only)
   ============================================================================ */

/* App Mode Overlay (subtle backdrop for readability) */
.mode-app .chat-container::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.4);
  z-index: -1;
  pointer-events: none;
}

/* Glass Panel Styling (App Mode Only) */
.mode-app .chat-container {
  background: rgba(15, 20, 25, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mode-app .chat-header {
  background: rgba(26, 31, 38, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mode-app .chat-messages {
  background: transparent;
}

/* Message Bubbles - Glass + Precision (App Mode) */
.mode-app .chat-message-content {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Retro theme: Sharper message bubbles */
[data-theme="retro"].mode-app .chat-message-content {
  border-radius: var(--radius-lg);
}

.mode-app .chat-message.user .chat-message-content {
  background: rgba(91, 143, 168, 0.15);
  border-color: rgba(91, 143, 168, 0.25);
}

/* Retro theme: Brighter accent in user messages */
[data-theme="retro"].mode-app .chat-message.user .chat-message-content {
  background: rgba(107, 179, 199, 0.18);
  border-color: rgba(107, 179, 199, 0.3);
}

.mode-app .chat-message-avatar {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

.mode-app .chat-message.user .chat-message-avatar {
  background: rgba(91, 143, 168, 0.25);
  border-color: rgba(91, 143, 168, 0.35);
}

/* Status Tags - Refined (App Mode) */
.mode-app .chat-message-status {
  border-radius: 4px;
  margin-top: 10px;
  padding: 4px 10px;
}

/* Chat Input Area - Glass (App Mode) */
.mode-app .chat-input-area {
  background: rgba(26, 31, 38, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 24px;
}

/* Prompt Chips - Refined (App Mode) */
.mode-app .prompt-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 12px;
  transition: all 0.15s;
}

/* Retro theme: Sharper prompt chips */
[data-theme="retro"].mode-app .prompt-chip {
  border-radius: var(--radius-sm);
}

.mode-app .prompt-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(91, 143, 168, 0.4);
  color: var(--text1);
}

/* Input Fields - Cleaner (App Mode) */
.mode-app .chat-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.15s;
}

/* Retro theme: Sharper input */
[data-theme="retro"].mode-app .chat-input {
  border-radius: var(--radius-md);
}

.mode-app .chat-input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(91, 143, 168, 0.2);
}

.mode-app .chat-input:disabled {
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.5;
}

/* Buttons - Refined (App Mode) */
.mode-app .chat-send-btn {
  border-radius: 8px;
  padding: 12px 24px;
  transition: all 0.15s;
}

/* Retro theme: Sharper button */
[data-theme="retro"].mode-app .chat-send-btn {
  border-radius: var(--radius-md);
}

.mode-app .chat-send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(91, 143, 168, 0.3);
}

/* Evidence Drawer Tab - Refined (App Mode) */
.mode-app .evidence-drawer-tab {
  background: rgba(26, 31, 38, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  padding: 8px 14px;
  border-radius: 4px 4px 0 0;
}

.mode-app .evidence-drawer-tab:hover {
  background: rgba(26, 31, 38, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Evidence Drawer - Glass (App Mode) */
.mode-app .evidence-drawer-chat {
  background: rgba(15, 20, 25, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}

.mode-app .evidence-drawer-chat .evidence-drawer-header {
  background: rgba(26, 31, 38, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 24px;
}

.mode-app .evidence-drawer-chat .evidence-drawer-content {
  padding: 24px;
}

/* Evidence Source Items - Refined (App Mode) */
.mode-app .evidence-source-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px;
  transition: all 0.15s;
}

/* Retro theme: Sharper evidence items */
[data-theme="retro"].mode-app .evidence-source-item {
  border-radius: var(--radius-sm);
}

.mode-app .evidence-source-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(2px);
}

/* Select Dropdowns - Refined (App Mode) */
.mode-app .dashboard-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 8px 12px;
}

.mode-app .dashboard-select:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.mode-app .dashboard-select:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(91, 143, 168, 0.2);
}

/* Action Links - Refined (App Mode) */
.mode-app .evidence-action-link {
  padding: 8px 0;
  transition: all 0.15s;
}

.mode-app .evidence-action-link:hover {
  padding-left: 4px;
}

/* Increased Whitespace (App Mode) */
.mode-app .chat-messages {
  padding: 24px;
  gap: 16px;
}

.mode-app .chat-message {
  max-width: 70%;
}

/* Calmer Typography (App Mode) */
.mode-app .chat-header h1 {
  font-weight: 500;
  letter-spacing: -0.02em;
}

.mode-app .chat-meta {
  font-weight: 400;
  opacity: 0.8;
}

/* Footer Note - Softer (App Mode) */
.mode-app .chat-footer-note {
  opacity: 0.6;
  font-weight: 400;
}

/* -------------------------------------------------------------------------- */
/* Auth drawer (marketing + demo) — aligned with client workspace weight */
/* -------------------------------------------------------------------------- */
body.auth-drawer-open {
  overflow: hidden;
}

.auth-drawer-root[hidden] {
  display: none !important;
}

.auth-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: none;
  --auth-ease: 0.2s ease;
}

.auth-drawer-root:not([hidden]) {
  pointer-events: auto;
}

.auth-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.55);
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--auth-ease);
}

.auth-drawer-panel {
  position: relative;
  width: min(440px, 100vw);
  max-width: 100%;
  background: var(--bg1);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);
  padding: 1.35rem 1.65rem 2rem;
  overflow-y: auto;
  pointer-events: auto;
  outline: none;
  transition: box-shadow var(--auth-ease), border-color var(--auth-ease);
}

.auth-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.auth-drawer-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text1);
}

.auth-drawer-close {
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text2);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: border-color var(--auth-ease), color var(--auth-ease), background var(--auth-ease);
}

.auth-drawer-close:hover {
  border-color: var(--accent);
  color: var(--text1);
}

.auth-drawer-panel .btn-primary {
  width: 100%;
  margin-top: 0.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 0.65rem 1rem;
}

.auth-drawer-panel .input,
.auth-drawer-panel select.input {
  border-radius: var(--radius-md);
  transition: border-color var(--auth-ease), box-shadow var(--auth-ease);
}

.auth-drawer-panel .input:focus-visible,
.auth-drawer-panel select.input:focus-visible,
.auth-drawer-close:focus-visible,
.auth-drawer-panel .btn-primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-form .form-field {
  margin-bottom: 0.9rem;
}

.auth-form .form-field label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.auth-switch {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--text2);
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-link:hover {
  color: var(--accent-hover);
}

.btn-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.site-signin-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------- */
/* Client workspace (better_rag_demo.html, military_demo.html) — corporate memory HCI */
/* -------------------------------------------------------------------------- */
#client-workspace-mode {
  --cw-ease: 0.2s ease;
  --cw-radius: 10px;
  --cw-text-xs: 0.72rem;
  --cw-text-sm: 0.8125rem;
  --cw-text-base: 0.9375rem;
  --cw-text-md: 1.05rem;
  --cw-max-read: 52rem;
}

@media (prefers-reduced-motion: reduce) {
  #client-workspace-mode,
  #client-workspace-mode *,
  .auth-drawer-root,
  .auth-drawer-root * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@keyframes cw-msg-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.client-auth-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1.35rem;
  background: rgba(184, 134, 11, 0.12);
  border-bottom: 1px solid var(--line);
  font-size: var(--cw-text-base);
  line-height: 1.45;
}

.client-auth-banner[hidden] {
  display: none !important;
}

.client-workspace-layout {
  min-height: 58vh;
}

.client-left-nav .nav-label {
  font-size: var(--cw-text-sm);
  letter-spacing: 0.04em;
}

button.nav-item.client-nav-item {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  transition: background var(--cw-ease), color var(--cw-ease), border-color var(--cw-ease);
}

.client-nav-stub {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.cw-main {
  max-width: 100%;
}

.cw-demo-layout {
  align-items: stretch;
}

.cw-demo-main-wrap {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
}

.cw-demo-aside {
  width: min(300px, 36vw);
  flex-shrink: 0;
  border-left: 1px solid var(--line);
  background: var(--bg1);
  padding: 16px 14px;
  overflow-y: auto;
  font-size: var(--cw-text-sm);
  line-height: 1.5;
  color: var(--text2);
}

.cw-demo-strip {
  margin-bottom: 1rem;
  padding: 12px 14px;
  border-radius: var(--cw-radius);
  border: 1px solid var(--line);
  background: rgba(91, 143, 168, 0.09);
}

.cw-demo-strip--military {
  background: rgba(91, 143, 168, 0.12);
}

.cw-demo-strip__title {
  margin: 0 0 8px;
  font-size: var(--cw-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.cw-demo-flow {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text2);
}

.cw-demo-flow li {
  margin: 0.2em 0;
}

.cw-demo-strip__meta {
  margin: 10px 0 0;
  font-size: var(--cw-text-xs);
}

.cw-demo-strip__meta a {
  color: var(--accent-hover);
}

.cw-demo-aside__kicker {
  margin: 0 0 6px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.cw-demo-aside__h {
  margin: 0 0 10px;
  font-size: var(--cw-text-base);
  font-weight: 600;
  color: var(--text1);
  letter-spacing: -0.02em;
}

.cw-demo-aside__p {
  margin: 0 0 14px;
}

.cw-demo-aside__spec {
  margin: 14px 0 0;
  font-size: var(--cw-text-xs);
  color: var(--muted);
  line-height: 1.45;
  word-break: break-word;
}

.cw-phone-sim-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cw-phone-sim-card {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg0);
}

.cw-phone-sim-card--featured {
  border-color: rgba(91, 143, 168, 0.5);
}

.cw-phone-sim-card__title {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text1);
}

.cw-phone-sim-card__p {
  margin: 0 0 10px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted);
}

.cw-phone-sim-card__btn {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

details.cw-nav-stubs {
  border-top: 1px solid var(--line-subtle);
  margin-top: 8px;
  padding-top: 4px;
}

.cw-nav-stubs__summary {
  cursor: pointer;
  padding: 8px 24px 8px 20px;
  font-size: 11px;
  color: var(--muted);
  list-style: none;
}

.cw-nav-stubs__summary::-webkit-details-marker {
  display: none;
}

.cw-nav-stubs__note {
  font-size: 11px !important;
  line-height: 1.4 !important;
  padding: 0.25rem 1rem 0.5rem !important;
}

@media (max-width: 1024px) {
  .cw-demo-main-wrap {
    flex-direction: column;
  }

  .cw-demo-aside {
    width: 100%;
    max-height: none;
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

.phone-sim-banner {
  padding: 10px 12px;
  margin-bottom: 1.25rem;
  border-radius: 8px;
  border: 1px solid rgba(184, 134, 11, 0.35);
  background: rgba(184, 134, 11, 0.1);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text2);
}

.phone-sim-prose p {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.58;
  color: var(--text2);
}

.cw-scope-panel {
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--cw-radius);
  align-items: flex-start;
}

.cw-scope-title {
  margin: 0;
  font-size: var(--cw-text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text1);
}

.cw-scope-tagline {
  margin: 0.45rem 0 0;
  max-width: var(--cw-max-read);
  font-size: var(--cw-text-sm);
  line-height: 1.45;
  color: var(--text2);
  font-weight: 400;
}

.cw-scope-line {
  margin: 0.35rem 0 0;
  font-size: var(--cw-text-sm);
  color: var(--text2);
  line-height: 1.5;
  max-width: var(--cw-max-read);
}

.cw-scope-line--sub {
  color: var(--muted);
  font-size: var(--cw-text-xs);
}

.cw-scope-kicker {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.68rem;
  color: var(--muted);
  margin-right: 0.35rem;
}

.cw-scope-value {
  word-break: break-all;
}

.cw-section-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text1);
}

.cw-section-lead {
  margin: 0 0 1rem;
  font-size: var(--cw-text-sm);
  line-height: 1.55;
  color: var(--text2);
  max-width: var(--cw-max-read);
}

.cw-section-lead code {
  font-size: 0.88em;
}

.cw-section-lead-api {
  display: block;
  margin-top: 0.65rem;
  font-size: var(--cw-text-xs);
  color: var(--muted);
}

.cw-ingest-verify-panel {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--cw-radius);
  border: 1px solid rgba(91, 143, 168, 0.45);
  background: linear-gradient(165deg, rgba(91, 143, 168, 0.12), rgba(26, 31, 38, 0.5));
  box-shadow: 0 0 0 1px rgba(123, 197, 217, 0.08) inset;
}

.cw-ingest-verify-panel__title {
  margin: 0 0 0.35rem;
  font-size: var(--cw-text-md);
  font-weight: 600;
  color: var(--text1);
  letter-spacing: -0.02em;
}

.cw-ingest-verify-panel__sub {
  margin: 0 0 0.85rem;
  font-size: var(--cw-text-sm);
  line-height: 1.5;
  color: var(--text2);
  max-width: var(--cw-max-read);
}

.cw-ingest-verify-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  align-items: center;
}

button.nav-item.client-nav-item.client-nav-item--primary .nav-label {
  font-weight: 600;
  color: var(--accent);
}

button.nav-item.client-nav-item.client-nav-item--primary.active .nav-label {
  color: var(--text1);
}

.cw-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0.75rem;
  font-size: var(--cw-text-sm);
  color: var(--muted);
}

.cw-field-hint {
  min-height: 1.25em;
  margin: 0.5rem 0 0;
  font-size: var(--cw-text-xs);
  color: var(--status-needs-review);
}

.cw-output-block {
  margin-top: 0.75rem;
  min-height: 2.5rem;
}

.cw-output--loading {
  opacity: 0.92;
}

.cw-loading-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--cw-text-sm);
  color: var(--text2);
  padding: 0.65rem 0.85rem;
  border: 1px dashed var(--line);
  border-radius: var(--cw-radius);
  background: var(--bg1);
}

.cw-loading-inline::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cw-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cw-loading-inline::before {
    animation: none;
    border-top-color: var(--line);
  }
}

@keyframes cw-spin {
  to {
    transform: rotate(360deg);
  }
}

.cw-result-summary {
  font-size: var(--cw-text-sm);
  line-height: 1.5;
  color: var(--text2);
  margin: 0 0 0.65rem;
  max-width: var(--cw-max-read);
}

.cw-raw-details {
  margin-top: 0.5rem;
  font-size: var(--cw-text-sm);
}

.cw-raw-details summary {
  cursor: pointer;
  color: var(--accent);
  user-select: none;
}

.cw-inline-error {
  color: var(--status-critical);
  font-size: var(--cw-text-sm);
  margin: 0 0 0.5rem;
}

.cw-inline-hint {
  color: var(--text2);
  font-size: var(--cw-text-sm);
  margin: 0;
}

.cw-empty-state {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--cw-radius);
  background: var(--bg1);
  max-width: var(--cw-max-read);
}

.cw-empty-state__title {
  margin: 0 0 0.35rem;
  font-size: var(--cw-text-sm);
  font-weight: 600;
  color: var(--text1);
}

.cw-empty-state__sub {
  margin: 0;
  font-size: var(--cw-text-xs);
  line-height: 1.5;
  color: var(--muted);
}

.client-pre {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: var(--cw-text-xs);
  overflow: auto;
  max-height: 240px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
}

.cw-pre-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.cw-pre-json--tight {
  max-height: 160px;
  margin: 0.35rem 0 0;
}

.cw-recall-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.cw-recall-card {
  border: 1px solid var(--line);
  border-radius: var(--cw-radius);
  padding: 0.85rem 1rem;
  background: var(--bg1);
  transition: border-color var(--cw-ease), box-shadow var(--cw-ease);
  animation: cw-msg-in 0.22s ease both;
}

.cw-recall-card:hover {
  border-color: rgba(91, 143, 168, 0.45);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.cw-recall-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.cw-score-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--cw-text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bg0);
  background: linear-gradient(135deg, var(--accent) 0%, #4a7a8f 100%);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

.cw-recall-card__rank {
  font-size: var(--cw-text-xs);
  color: var(--muted);
}

.cw-recall-card__snippet {
  margin: 0 0 0.65rem;
  font-size: var(--cw-text-base);
  line-height: 1.55;
  color: var(--text2);
  max-width: var(--cw-max-read);
}

.cw-recall-card__footer {
  margin-bottom: 0.35rem;
}

.cw-node-pill {
  display: inline-block;
  font-size: var(--cw-text-xs);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--bg2);
  border: 1px solid var(--line-subtle);
  color: var(--muted);
}

.cw-prov-details {
  margin-top: 0.35rem;
  font-size: var(--cw-text-xs);
}

.cw-prov-details summary {
  cursor: pointer;
  color: var(--accent);
  user-select: none;
}

/* Chat thread */
.cw-chat-shell {
  max-width: none;
  border: 1px solid var(--line);
  border-radius: var(--cw-radius);
  background: var(--bg0);
  overflow: hidden;
}

.cw-chat-thread {
  min-height: 220px;
  max-height: min(52vh, 520px);
  padding: 1rem 1.1rem;
  gap: 0.85rem;
  display: flex;
  flex-direction: column;
}

.cw-msg {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  max-width: min(100%, 44rem);
  animation: cw-msg-in 0.24s ease both;
}

.cw-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
  max-width: min(100%, 36rem);
}

.cw-msg__avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text1);
  background: var(--bg2);
  border: 1px solid var(--line);
}

.cw-msg__avatar--user {
  background: rgba(91, 143, 168, 0.2);
  border-color: rgba(91, 143, 168, 0.45);
}

.cw-msg__column {
  flex: 1;
  min-width: 0;
}

.cw-msg__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
}

.cw-role-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text2);
}

.cw-role-chip--guide {
  border-color: rgba(74, 124, 89, 0.5);
  background: rgba(74, 124, 89, 0.15);
  color: var(--status-reviewable);
}

.cw-role-chip--avatar {
  border-color: rgba(91, 143, 168, 0.55);
  background: rgba(91, 143, 168, 0.12);
  color: var(--accent);
}

.cw-role-chip--validator {
  border-color: rgba(184, 134, 11, 0.45);
  background: rgba(184, 134, 11, 0.12);
  color: var(--status-needs-review);
}

.cw-role-chip--system {
  border-color: rgba(196, 78, 78, 0.45);
  background: rgba(196, 78, 78, 0.1);
  color: var(--status-critical);
}

.cw-role-chip--neutral {
  color: var(--muted);
}

.cw-role-chip--pending {
  border-style: dashed;
  animation: none;
}

.cw-role-chip-sublabel {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

.cw-trust-badge {
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--text2);
}

.cw-trust-badge--zero {
  border-color: rgba(184, 134, 11, 0.45);
  color: var(--status-needs-review);
}

.cw-msg__body {
  font-size: var(--cw-text-base);
  line-height: 1.55;
  color: var(--text2);
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg1);
}

.cw-msg--user .cw-msg__body {
  background: rgba(91, 143, 168, 0.1);
  border-color: rgba(91, 143, 168, 0.28);
}

.cw-msg--error .cw-msg__body {
  border-color: rgba(196, 78, 78, 0.35);
  background: rgba(196, 78, 78, 0.06);
}

.cw-msg__body--user {
  text-align: left;
}

.cw-msg__body--pending {
  font-size: var(--cw-text-sm);
  color: var(--muted);
  font-style: italic;
}

.cw-pending-dots::after {
  content: "…";
  animation: cw-dots 1.2s steps(4, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cw-pending-dots::after {
    animation: none;
    content: "…";
  }
}

@keyframes cw-dots {
  0%,
  20% {
    content: "";
  }
  40% {
    content: ".";
  }
  60% {
    content: "..";
  }
  80%,
  100% {
    content: "...";
  }
}

.cw-msg__text {
  margin: 0;
  max-width: 65ch;
}

.cw-msg__text--muted {
  color: var(--muted);
}

.cw-msg__text code {
  font-size: 0.88em;
}

.cw-msg__metafoot {
  margin: 0.5rem 0 0;
  font-size: var(--cw-text-xs);
  color: var(--muted);
}

.mode-app .cw-chat-shell .chat-input-area {
  border-top: 1px solid var(--line);
  background: var(--bg1);
}

.mode-app .cw-chat-shell .chat-input {
  max-width: none;
}

.client-guide-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  background: rgba(91, 143, 168, 0.08);
}

.client-guide-strip[hidden] {
  display: none !important;
}

.client-guide-strip-text {
  margin: 0;
  flex: 1 1 220px;
  font-size: var(--cw-text-sm);
  line-height: 1.45;
  color: var(--text2);
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

.client-demo-script {
  margin: 0.75rem 0 1rem;
  font-size: var(--cw-text-sm);
  color: var(--text2);
}

.client-demo-script summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 500;
}

.client-demo-script-list {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
  line-height: 1.55;
}

.client-demo-script-list code {
  font-size: 0.85em;
}

.client-demo-script-caveat {
  font-size: var(--cw-text-xs);
  margin-top: 0.65rem;
  line-height: 1.45;
}

.auth-workspace-manual-details {
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  color: var(--text2);
}

.auth-workspace-manual-details summary {
  cursor: pointer;
  user-select: none;
}

/* ─── Marketing homepage: light “premium enterprise” surface (Cohere-adjacent: space, contrast, grain bands) ─── */
body:has(.page--marketing) {
  background: #f4f3f0;
  color: #4a5568;
  color-scheme: light;
}

.page.page--marketing {
  --text1: #0f1419;
  --text2: #4a5568;
  --muted: #6b7280;
  --bg0: #f4f3f0;
  --bg1: #ffffff;
  --bg2: #f0efec;
  --line: rgba(15, 20, 25, 0.1);
  --line-subtle: rgba(15, 20, 25, 0.06);
  --accent: #0f1419;
  --accent-hover: #1f2937;
  --brand-better-rag: #0d4f5c;
  --brand-better-rag-on-dark: #7bc5d9;
  background: transparent;
  min-height: 100vh;
}

/* Product mark: “Better RAG” — teal + tight tracking (Inter; no extra webfont) */
.brand-better-rag {
  color: var(--brand-better-rag, #0d4f5c);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.page--marketing .sol-premium-dark .brand-better-rag,
.page--marketing .finserve-dark .brand-better-rag,
.page--marketing .marketing-pillar .brand-better-rag,
.page--marketing .sol-premium-forest .brand-better-rag {
  color: var(--brand-better-rag-on-dark, #7bc5d9);
}

.page--marketing .btn-primary .brand-better-rag,
.page--marketing .hero-cta-primary .brand-better-rag {
  color: #7dd3fc;
}

.dashboard-page .brand-better-rag {
  color: var(--accent-hover);
}

.mode-btn:not(.active) .brand-better-rag {
  color: var(--accent);
  font-weight: 600;
}

.mode-btn.active .brand-better-rag {
  color: #f8fafc;
  font-weight: 700;
}

.page--marketing > .bg {
  display: none;
}

.page--marketing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 720px at 88% 6%, rgba(91, 143, 168, 0.09), transparent 52%),
    radial-gradient(720px 480px at 4% 92%, rgba(15, 20, 25, 0.035), transparent 48%),
    #f4f3f0;
}

.page--marketing::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .page--marketing::after {
    opacity: 0.2;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page--marketing header {
  position: sticky;
  top: 0;
  z-index: 40;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 18px clamp(20px, 4vw, 40px);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(15, 20, 25, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* Injected nav on legacy parallax pages (how-it-works, security): keep .bg visible */
.page:not(.page--marketing) > header[data-marketing-nav-root] {
  position: sticky;
  top: 0;
  z-index: 40;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 18px clamp(20px, 4vw, 40px);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  background: rgba(26, 31, 38, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.page:not(.page--marketing) > header[data-marketing-nav-root] .wordmark {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text1);
}

.page--marketing .wordmark {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text1);
}

.page--marketing nav a {
  margin-left: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
}

.page--marketing nav a:hover {
  color: var(--text1);
}

.page--marketing nav a.nav-login,
.page--marketing nav button.nav-login {
  color: var(--muted);
}

.page--marketing nav a.nav-login:hover,
.page--marketing nav button.nav-login:hover {
  color: var(--text1);
}

.page--marketing .marketing-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.page--marketing .marketing-nav > a,
.page--marketing .marketing-nav > .nav-dropdown {
  margin-left: 20px;
}

.page--marketing .marketing-nav > a:first-child {
  margin-left: 0;
}

.page--marketing .marketing-nav > .nav-dropdown {
  margin-left: 20px;
}

.page .marketing-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.page .marketing-nav > a,
.page .marketing-nav > .nav-dropdown {
  margin-left: 18px;
}

.page .marketing-nav > a:first-child {
  margin-left: 0;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.02em;
}

.page--marketing .nav-dropdown__trigger {
  color: var(--text2);
}

.nav-dropdown__trigger:hover,
.nav-dropdown__trigger:focus-visible {
  color: var(--text1);
  outline: none;
}

.nav-dropdown__caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.65;
  margin-top: 2px;
}

.nav-dropdown--open .nav-dropdown__caret {
  transform: rotate(180deg);
}

.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: min(320px, calc(100vw - 32px));
  max-width: min(380px, calc(100vw - 24px));
  padding: 12px 0;
  background: #fff;
  border: 1px solid rgba(15, 20, 25, 0.1);
  border-radius: 14px;
  box-shadow:
    0 16px 48px rgba(15, 20, 25, 0.12),
    0 2px 8px rgba(15, 20, 25, 0.06);
  z-index: 200;
  text-align: left;
}

.nav-dropdown__section {
  padding: 4px 12px 12px;
  border-bottom: 1px solid rgba(15, 20, 25, 0.06);
}

.nav-dropdown__section:last-of-type {
  border-bottom: none;
}

.nav-dropdown__heading {
  margin: 8px 8px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-dropdown__heading--muted {
  margin-top: 14px;
  opacity: 0.9;
}

.nav-dropdown__item {
  display: block;
  padding: 10px 10px;
  margin: 2px 0;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}

.nav-dropdown__item:hover,
.nav-dropdown__item:focus-visible {
  background: rgba(15, 20, 25, 0.04);
  outline: none;
}

.nav-dropdown__item--disabled {
  opacity: 0.55;
  cursor: default;
}

.nav-dropdown__item--disabled:hover {
  background: transparent;
}

.nav-dropdown__item-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text1);
}

.nav-dropdown__item-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}

.nav-dropdown__footer {
  padding: 10px 16px 4px;
}

.nav-dropdown__all {
  font-size: 13px;
  font-weight: 600;
  color: #3d6a7d;
  text-decoration: none;
}

.nav-dropdown__all:hover {
  text-decoration: underline;
}

.nav-marketing-cta {
  margin-left: 20px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #fafaf9 !important;
  background: #0f1419;
  border: 1px solid #0f1419;
  box-shadow: 0 2px 14px rgba(15, 20, 25, 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.nav-marketing-cta:hover {
  background: #1f2937;
  border-color: #1f2937;
  box-shadow: 0 4px 22px rgba(15, 20, 25, 0.18);
  color: #fff !important;
  filter: none;
}

.section-band {
  background: linear-gradient(180deg, rgba(26, 31, 38, 0.92) 0%, rgba(18, 22, 28, 0.55) 100%);
  border-top: 1px solid var(--line-subtle);
  border-bottom: 1px solid var(--line-subtle);
}

.page--marketing .section-band {
  background: linear-gradient(180deg, #ebe9e4 0%, #f3f2ef 55%, #ebe9e4 100%);
  border-color: rgba(15, 20, 25, 0.06);
}

.page--marketing .section {
  padding: clamp(72px, 11vw, 120px) clamp(20px, 4vw, 40px);
}

.page--marketing .marketing-trust {
  padding-top: clamp(40px, 6vw, 56px);
  padding-bottom: clamp(32px, 5vw, 48px);
  text-align: center;
}

.marketing-trust-label {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.marketing-trust-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  max-width: 920px;
  margin: 0 auto;
}

.marketing-trust-pill {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text2);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 20, 25, 0.08);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 20, 25, 0.04);
}

.page--marketing .hero {
  max-width: min(100%, 1400px);
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(56px, 8vw, 88px);
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}

.page--marketing h1 {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 14ch;
  color: var(--text1);
}

.page--marketing .sub {
  font-size: clamp(1.1rem, 2.1vw, 1.4rem);
  line-height: 1.5;
  max-width: 36ch;
  color: var(--text2);
  opacity: 1;
  font-weight: 500;
}

.page--marketing .hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #3d6a7d;
}

.page--marketing .hero-lead {
  color: var(--text2);
}

.page--marketing .btn-primary,
.page--marketing .hero-cta-primary {
  background: #0f1419;
  color: #fafaf9;
  border-color: #0f1419;
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 20px rgba(15, 20, 25, 0.12);
}

.page--marketing .btn-primary:hover,
.page--marketing .hero-cta-primary:hover {
  background: #1f2937;
  border-color: #1f2937;
  filter: none;
}

.page--marketing .btn-outline {
  border-radius: 999px;
  border-color: rgba(15, 20, 25, 0.15);
  color: var(--text1);
  width: auto;
}

.page--marketing .btn-outline:hover {
  background: rgba(15, 20, 25, 0.04);
  border-color: rgba(15, 20, 25, 0.25);
  color: var(--text1);
}

.btn-marketing-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--text1);
  background: transparent;
  border: 1px solid rgba(232, 234, 237, 0.35);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.page--marketing .btn-marketing-secondary {
  border-color: rgba(15, 20, 25, 0.2);
  color: var(--text1);
}

.page--marketing .btn-marketing-secondary:hover {
  background: rgba(15, 20, 25, 0.04);
  border-color: rgba(15, 20, 25, 0.28);
  color: var(--text1);
}

.marketing-section-title {
  margin: 0 auto 12px;
  max-width: 24ch;
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text1);
}

.marketing-section-sub {
  margin: 0 auto 48px;
  max-width: 52ch;
  text-align: center;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text2);
}

.marketing-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 28px);
  max-width: 1100px;
  margin: 0 auto;
}

/* Avoid a lone 4th card on row 2 (3+1): use balanced 2×2 when there are exactly four pillars. */
.marketing-pillars-grid:has(> *:nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px;
}

/* Five pillars: 2×2, then one full-width row so the last item is not a dangling pair. */
.marketing-pillars-grid:has(> *:nth-child(5):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px;
}

.marketing-pillars-grid:has(> *:nth-child(5):last-child) > :nth-child(5) {
  grid-column: 1 / -1;
}

@media (max-width: 800px) {
  .marketing-pillars-grid {
    grid-template-columns: 1fr;
    max-width: 1100px;
  }

  .marketing-pillars-grid:has(> *:nth-child(4):last-child),
  .marketing-pillars-grid:has(> *:nth-child(5):last-child) {
    grid-template-columns: 1fr;
    max-width: 1100px;
  }

  .marketing-pillars-grid:has(> *:nth-child(5):last-child) > :nth-child(5) {
    grid-column: auto;
  }
}

.marketing-pillar {
  margin: 0;
  padding: 28px 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(36, 41, 50, 0.65) 0%, rgba(20, 24, 30, 0.5) 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}

.page--marketing .marketing-pillar {
  background: #fff;
  border-color: rgba(15, 20, 25, 0.08);
  box-shadow:
    0 4px 28px rgba(15, 20, 25, 0.06),
    0 1px 3px rgba(15, 20, 25, 0.04);
}

.marketing-pillar-icon {
  display: block;
  margin-bottom: 16px;
}

.marketing-pillar-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text1);
}

.marketing-pillar-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text2);
}

.marketing-section-title--sfbb {
  max-width: min(100%, 34ch);
}

.marketing-section-sub--tight {
  margin-bottom: 36px;
  font-size: 16px;
  max-width: 42ch;
}

.marketing-pillar-title--sentence {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text1);
}

.marketing-pillar-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text1);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 20, 25, 0.22);
  padding-bottom: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.page--marketing .marketing-pillar-link:hover {
  border-bottom-color: rgba(15, 20, 25, 0.5);
  color: var(--text1);
}

.page--marketing .hero-benefit-card {
  background: #fff;
  border-color: rgba(15, 20, 25, 0.08);
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(15, 20, 25, 0.05);
}

.page--marketing .hero-benefit-text {
  color: var(--text2);
}

.page--marketing .stack-card {
  background: #fff;
  border-color: rgba(15, 20, 25, 0.08);
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(15, 20, 25, 0.04);
}

.page--marketing .stack-card--amnesis {
  border-color: rgba(91, 143, 168, 0.4);
  background: linear-gradient(165deg, rgba(91, 143, 168, 0.1) 0%, #fff 55%);
  box-shadow:
    0 4px 24px rgba(91, 143, 168, 0.12),
    0 1px 3px rgba(15, 20, 25, 0.04);
}

.page--marketing .marketing-image-frame,
.page--marketing .problem-product-frame {
  border-radius: 22px;
  border-color: rgba(15, 20, 25, 0.1);
  box-shadow:
    0 12px 48px rgba(15, 20, 25, 0.1),
    0 2px 8px rgba(15, 20, 25, 0.04);
}

.page--marketing .marketing-image-caption,
.page--marketing .problem-product-caption {
  background: rgba(255, 255, 255, 0.96);
  border-top-color: rgba(15, 20, 25, 0.08);
  color: var(--text2);
}

.page--marketing .marketing-figure {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(15, 20, 25, 0.08);
  border-radius: 18px;
}

.page--marketing .marketing-diagram-caption {
  color: var(--text2);
}

.page--marketing .divider {
  background: linear-gradient(90deg, transparent, rgba(15, 20, 25, 0.12), transparent);
  opacity: 1;
}

.page--marketing .kicker {
  color: var(--muted);
}

.page--marketing .overlay-word {
  color: #0f1419;
  opacity: 0.035;
  mix-blend-mode: normal;
}

.page--marketing .hero-art-img {
  filter: drop-shadow(0 16px 40px rgba(15, 20, 25, 0.12));
}

.page--marketing .hero-art-video {
  border-color: rgba(15, 20, 25, 0.12);
  box-shadow:
    0 16px 48px rgba(15, 20, 25, 0.14),
    0 2px 8px rgba(15, 20, 25, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  background: #0f1419;
}

.page--marketing .hero-art-fallback {
  border-color: rgba(15, 20, 25, 0.12);
  box-shadow:
    0 16px 48px rgba(15, 20, 25, 0.12),
    0 2px 8px rgba(15, 20, 25, 0.04);
}

/* —— Marketing home: solutions horizontal rail —— */
.solutions-section {
  padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 8vw, 88px);
  border-top: 1px solid rgba(15, 20, 25, 0.08);
  background: #f0efec;
}

.solutions-section-head {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px) clamp(20px, 3vw, 28px);
}

.solutions-section-title {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text1);
}

.solutions-section-lead {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text2);
}

.solutions-section-lead-link {
  color: var(--text1);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 20, 25, 0.2);
  padding-bottom: 1px;
}

.solutions-section-lead-link:hover {
  border-bottom-color: rgba(91, 143, 168, 0.65);
  color: #3d6a7d;
}

.solutions-section-lead .solutions-section-lead-link:not(:first-of-type) {
  margin-left: 12px;
}

.solutions-subsection-title {
  max-width: 1400px;
  margin: clamp(28px, 4vw, 40px) auto 0;
  padding: 0 clamp(20px, 4vw, 48px);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.solutions-subsection-title:first-of-type {
  margin-top: clamp(8px, 2vw, 16px);
}

.solutions-rail-outer {
  padding: 0 0 8px;
}

.solutions-rail {
  display: flex;
  gap: clamp(12px, 2vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(20px, 4vw, 48px);
  padding: 8px clamp(20px, 4vw, 48px) 20px;
  list-style: none;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.solutions-rail::-webkit-scrollbar {
  display: none;
}

.solutions-card {
  position: relative;
  flex: 0 0 clamp(200px, 42vw, 260px);
  aspect-ratio: 3 / 4;
  border-radius: clamp(1.1rem, 2vw, 1.65rem);
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
  color: #fafaf9;
  box-shadow:
    0 12px 40px rgba(15, 20, 25, 0.12),
    0 2px 8px rgba(15, 20, 25, 0.06);
  outline: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.solutions-card:focus-visible {
  box-shadow:
    0 0 0 3px #f4f3f0,
    0 0 0 6px rgba(91, 143, 168, 0.85);
}

@media (prefers-reduced-motion: no-preference) {
  .solutions-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 20px 48px rgba(15, 20, 25, 0.16),
      0 4px 12px rgba(15, 20, 25, 0.08);
  }
}

.solutions-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solutions-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(15, 20, 25, 0.75) 0%,
    rgba(15, 20, 25, 0.05) 42%,
    rgba(15, 20, 25, 0.35) 100%
  );
  pointer-events: none;
}

.solutions-card__label {
  position: absolute;
  top: clamp(1rem, 3vw, 1.35rem);
  left: clamp(1rem, 3vw, 1.35rem);
  right: clamp(0.75rem, 2vw, 1rem);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-shadow: 0 1px 12px rgba(15, 20, 25, 0.65);
  z-index: 1;
}

.solutions-rail-progress {
  max-width: min(200px, 40vw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.solutions-rail-progress__track {
  height: 3px;
  border-radius: 2px;
  background: rgba(15, 20, 25, 0.12);
  overflow: hidden;
}

.solutions-rail-progress__thumb {
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: linear-gradient(90deg, #3d6a7d, #5b8fa8);
  margin-left: 0;
  will-change: width, margin-left;
}

.landing-better-rag .use-cases-hub__h2:first-of-type {
  margin-top: 0.5rem;
}

.try-now-panel {
  margin: 28px 0 40px;
  padding: clamp(28px, 5vw, 44px) clamp(22px, 4vw, 36px);
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(135deg, #1a1f35 0%, #2d1f4a 42%, #1e2d4a 100%);
  box-shadow: 0 16px 48px rgba(15, 20, 25, 0.12);
}

.btn-try-now {
  display: inline-block;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  padding: 16px 34px;
}

.try-now-panel__hint {
  margin: 14px auto 0;
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(250, 250, 249, 0.78);
}

.try-now-panel__secondary {
  margin-top: 16px;
  background: transparent;
  color: #fafaf9;
  border: 1px solid rgba(250, 250, 249, 0.38);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.try-now-panel__secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(250, 250, 249, 0.55);
}

.better-rag-demo-steps {
  margin: 0 0 28px;
  padding-left: 1.35rem;
  max-width: 62ch;
  color: var(--text2);
  line-height: 1.6;
}

.better-rag-demo-steps li {
  margin-bottom: 14px;
}

.better-rag-demo-steps strong {
  color: var(--text1);
}

.better-rag-demo-teaser {
  margin: 4px 0 2px;
}

.better-rag-demo-teaser__link {
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: #3d6a7d;
  border-bottom: 1px solid rgba(61, 106, 125, 0.35);
  padding-bottom: 2px;
}

.better-rag-demo-teaser__link:hover {
  color: #2d5566;
  border-bottom-color: rgba(61, 106, 125, 0.55);
}

.products-hub__links {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.products-hub__links li {
  margin: 0 0 10px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 20, 25, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.5);
}

.products-hub__links a {
  font-weight: 600;
  color: var(--text1);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 20, 25, 0.12);
  padding-bottom: 1px;
}

.products-hub__links a:hover {
  border-bottom-color: rgba(91, 143, 168, 0.55);
  color: #3d6a7d;
}

.products-hub__meta {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}

.products-hub__muted {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 1rem;
  max-width: 52ch;
}

.products-hub__links--disabled .products-hub__disabled-title {
  display: block;
  font-weight: 600;
  color: var(--text1);
}

.products-hub__links--disabled {
  opacity: 0.88;
}

.solution-numbered-list {
  margin: 0 0 1.25rem;
  padding-left: 1.35rem;
  color: var(--text2);
  line-height: 1.65;
  max-width: 62ch;
}

.solution-numbered-list li {
  margin-bottom: 0.45rem;
}

.solution-bullets {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  color: var(--text2);
  line-height: 1.65;
  max-width: 62ch;
}

.solution-bullets li {
  margin-bottom: 0.5rem;
}

.military-trust-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15, 20, 25, 0.08);
  background: rgba(255, 255, 255, 0.45);
}

.military-trust-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}

.military-trust-table th,
.military-trust-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(15, 20, 25, 0.08);
}

.military-trust-table th {
  font-weight: 600;
  color: var(--text1);
  background: rgba(15, 20, 25, 0.03);
}

.military-trust-table td:first-child {
  font-weight: 600;
  color: var(--text1);
  width: 32%;
  min-width: 7.5rem;
}

.military-trust-table td:last-child {
  color: var(--text2);
}

.military-trust-table tbody tr:last-child td {
  border-bottom: none;
}

.page--marketing nav a[aria-current="page"] {
  color: var(--text1);
  font-weight: 600;
}

.page:not(.page--marketing) .marketing-nav > a[aria-current="page"] {
  color: var(--text1);
  font-weight: 600;
}

.page--marketing .marketing-site-footer--compact {
  background: transparent;
  color: var(--muted);
  padding: 32px clamp(20px, 4vw, 48px) 48px;
  border-top: 1px solid rgba(15, 20, 25, 0.08);
}

.page--marketing .marketing-site-footer--compact .marketing-site-footer-meta {
  color: var(--muted);
}

.page--marketing .marketing-site-footer--compact .marketing-site-footer-meta a {
  color: var(--text2);
  border-bottom-color: rgba(15, 20, 25, 0.15);
}

.page--marketing .marketing-site-footer--compact .marketing-site-footer-meta a:hover {
  color: var(--text1);
  border-bottom-color: rgba(15, 20, 25, 0.35);
}

.marketing-site-footer.marketing-site-footer--minimal {
  max-width: none;
  margin: 0;
  padding: 28px clamp(20px, 4vw, 40px) 44px;
  background: transparent;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
}

.marketing-site-footer--minimal .marketing-site-footer-meta {
  margin-top: 0;
}

.page--marketing .marketing-site-footer--minimal {
  border-top-color: rgba(15, 20, 25, 0.08);
  color: var(--muted);
}

.page--marketing .marketing-site-footer--minimal .marketing-site-footer-meta {
  color: var(--muted);
}

.page--marketing .marketing-site-footer--minimal .marketing-site-footer-meta a,
.page--marketing .marketing-site-footer--minimal .marketing-footer-signin {
  color: var(--text2);
  border-bottom-color: rgba(15, 20, 25, 0.15);
}

.page--marketing .marketing-site-footer--minimal .marketing-site-footer-meta a:hover,
.page--marketing .marketing-site-footer--minimal .marketing-footer-signin:hover {
  color: var(--text1);
  border-bottom-color: rgba(15, 20, 25, 0.35);
}

.marketing-footer-signin {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text2);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 20, 25, 0.15);
  padding: 0 0 1px;
  margin: 0;
}

.marketing-footer-signin:hover {
  color: var(--text1);
  border-bottom-color: rgba(15, 20, 25, 0.35);
}

.page--solution .solution-main {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 72px) clamp(20px, 4vw, 40px) 56px;
}

.page--solution .solution-main--long {
  max-width: 800px;
}

.page--solution .solution-main--wide {
  max-width: 820px;
}

.page--solution .solution-kicker {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.page--solution .solution-kicker a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 20, 25, 0.12);
  padding-bottom: 1px;
}

.page--solution .solution-kicker a:hover {
  color: var(--text1);
  border-bottom-color: rgba(15, 20, 25, 0.28);
}

.page--solution .solution-main h1 {
  max-width: none;
  margin: 0 0 16px;
  font-size: clamp(2rem, 4vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--text1);
}

.page--solution .solution-lead {
  margin: 0 0 20px;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.55;
  color: var(--text2);
  max-width: 60ch;
}

.page--solution .solution-main > p:not(.solution-lead):not(.solution-cta-row):not(.solution-spec-note) {
  margin: 0 0 16px;
  color: var(--text2);
  line-height: 1.65;
  max-width: 65ch;
}

.page--solution .solution-spec-note {
  margin: 24px 0 0;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  background: rgba(15, 20, 25, 0.04);
  border: 1px solid rgba(15, 20, 25, 0.08);
  border-radius: var(--radius-lg);
  max-width: 65ch;
}

.page--solution .solution-spec-note code {
  font-size: 12px;
  word-break: break-word;
}

.use-cases-hub .use-cases-hub__h2 {
  margin: 2.25rem 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.use-cases-hub .use-cases-hub__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.use-cases-hub .use-cases-hub__list > li {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(15, 20, 25, 0.08);
}

.use-cases-hub .use-cases-hub__list > li:last-child {
  border-bottom: none;
}

.use-cases-hub .use-cases-hub__list h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text1);
  letter-spacing: -0.02em;
}

.use-cases-hub .use-cases-hub__list p {
  margin: 0;
  color: var(--text2);
  line-height: 1.6;
  max-width: 62ch;
}

.use-cases-hub__tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: middle;
}

.use-cases-hub__better-rag {
  margin: 12px 0 0;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  background: rgba(15, 20, 25, 0.04);
  border: 1px solid rgba(15, 20, 25, 0.08);
  border-radius: var(--radius-lg);
  max-width: 65ch;
}

.use-cases-hub__better-rag a {
  color: var(--text1);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 20, 25, 0.18);
  padding-bottom: 1px;
}

.use-cases-hub__better-rag a:hover {
  border-bottom-color: rgba(91, 143, 168, 0.55);
}

.page--solution .solution-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
}

.page--solution .solution-cta-row--early {
  margin-top: 20px;
  margin-bottom: 2rem;
}

.page--solution .solution-cta-row .btn {
  text-decoration: none;
}

.marketing-final-cta {
  position: relative;
  overflow: hidden;
  margin-top: clamp(48px, 8vw, 80px);
  padding: clamp(72px, 10vw, 112px) clamp(20px, 4vw, 40px);
  background: linear-gradient(135deg, #1a1f35 0%, #2d1f4a 42%, #1e2d4a 100%);
}

.marketing-final-cta-noise {
  position: absolute;
  inset: -40%;
  opacity: 0.22;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.marketing-final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.marketing-final-cta-title {
  margin: 0 0 16px;
  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fafaf9;
}

.marketing-final-cta-sub {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(250, 250, 249, 0.82);
}

.marketing-final-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 28px;
}

.marketing-final-cta-btn {
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #0f1419 !important;
  background: #fafaf9;
  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.marketing-final-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  color: #0f1419 !important;
}

.marketing-final-cta-link {
  font-size: 15px;
  font-weight: 600;
  color: rgba(250, 250, 249, 0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 250, 249, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.marketing-final-cta-link:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.65);
}

.marketing-final-cta-arrow {
  display: inline-block;
  margin-left: 2px;
  font-size: 0.95em;
}

.marketing-site-footer {
  max-width: none;
  margin: 0;
  padding: 56px clamp(20px, 4vw, 40px) 48px;
  background: #0f1419;
  color: #9ca3af;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.marketing-site-footer-meta {
  display: block;
  margin-top: 12px;
  font-size: 0.85rem;
  color: #6b7280;
}

.marketing-site-footer a,
.marketing-site-footer-meta a {
  color: #d1d5db;
  text-decoration: none;
  border-bottom: 1px solid rgba(209, 213, 219, 0.25);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.marketing-site-footer a:hover,
.marketing-site-footer-meta a:hover {
  color: #f3f4f6;
  border-bottom-color: rgba(243, 244, 246, 0.5);
}

.page--marketing .marketing-text-link {
  color: var(--text1);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 20, 25, 0.22);
  padding-bottom: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.page--marketing .marketing-text-link:hover {
  border-bottom-color: rgba(15, 20, 25, 0.45);
  color: var(--text1);
}

@media (max-width: 640px) {
  .nav-marketing-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-marketing-cta {
    transition: none;
  }
  .marketing-final-cta-btn:hover {
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Better RAG dashboard layout (demo + saas/dashboard) — nav | center | sources */
/* -------------------------------------------------------------------------- */
.dashboard-container.br-rag-outer {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) minmax(220px, 300px);
  align-items: stretch;
  overflow: auto;
  min-height: 56vh;
}

.br-rag-sidebar.client-left-nav {
  width: auto;
  border-right: 1px solid var(--line);
}

button.client-nav-item.br-rag-nav-btn {
  width: 100%;
  border-radius: 0;
}

button.client-nav-item.br-rag-nav-btn.active {
  background: rgba(91, 143, 168, 0.14);
}

.br-rag-nav-meta {
  margin-top: 0.75rem;
  padding: 10px 12px;
  border-radius: var(--cw-radius, 10px);
  border: 1px solid var(--line);
  background: var(--bg0);
  font-size: var(--cw-text-xs, 0.72rem);
  line-height: 1.45;
  color: var(--text2);
}

.br-rag-nav-meta__title {
  margin: 0 0 6px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.br-rag-nav-meta p {
  margin: 0.15em 0;
}

/* Better RAG: corpus tools (add file + session list) — default separator for legacy left placement */
.br-corpus-panel {
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.br-corpus-panel--rail {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.br-corpus-panel__title {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.br-corpus-panel__sub {
  margin: 0.65rem 0 0.35rem;
  font-size: var(--cw-text-xs, 0.72rem);
}

.br-corpus-add-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.br-corpus-reflection-note {
  margin: 0 0 0.5rem;
  font-size: var(--cw-text-xs, 0.72rem);
  line-height: 1.4;
}

.br-corpus-skip {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: var(--cw-text-xs, 0.72rem);
  color: var(--text2);
  margin: 0 0 0.35rem;
  cursor: pointer;
  line-height: 1.35;
}

.br-corpus-skip input {
  margin-top: 0.12rem;
  flex-shrink: 0;
}

.br-corpus-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 11rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg0);
}

.br-corpus-file-list__empty {
  padding: 0.5rem 0.65rem;
  font-size: var(--cw-text-xs, 0.72rem);
}

.br-corpus-file-list__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--cw-text-xs, 0.72rem);
}

.br-corpus-file-list__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}

.br-corpus-file-list__text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.br-corpus-file-menu-trigger {
  flex-shrink: 0;
  margin: 0;
  padding: 0.1rem 0.35rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.br-corpus-file-menu-trigger:hover,
.br-corpus-file-menu-trigger:focus-visible {
  color: var(--text1);
  background: var(--bg1, rgba(255, 255, 255, 0.06));
  outline: none;
}

.br-corpus-file-menu {
  position: absolute;
  right: 0.5rem;
  top: 100%;
  z-index: 30;
  margin-top: 2px;
  min-width: 11.5rem;
  padding: 0.25rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.br-corpus-file-menu__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text1);
  font-size: var(--cw-text-xs, 0.72rem);
  text-align: left;
  cursor: pointer;
}

.br-corpus-file-menu__item:hover {
  background: var(--bg1, rgba(255, 255, 255, 0.06));
}

.br-corpus-file-menu__item--danger {
  color: var(--danger, #f87171);
}

.br-corpus-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.br-corpus-modal[hidden] {
  display: none;
}

.br-corpus-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.br-corpus-modal__panel {
  position: relative;
  z-index: 1;
  width: min(36rem, 100%);
  max-height: min(80vh, 32rem);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg0);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.br-corpus-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--line);
}

.br-corpus-modal__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.br-corpus-modal__close {
  margin: 0;
  padding: 0.15rem 0.45rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.br-corpus-modal__body {
  padding: 0.75rem 0.85rem;
  overflow: auto;
  font-size: var(--cw-text-xs, 0.72rem);
}

.br-corpus-meta-pre {
  max-height: 18rem;
  margin: 0;
}

.br-corpus-inspect-ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.br-corpus-inspect-li {
  margin: 0 0 0.35rem;
  padding: 0.35rem 0.4rem;
  border-radius: 6px;
  background: var(--bg1, rgba(255, 255, 255, 0.04));
  font-size: 0.68rem;
  line-height: 1.35;
  word-break: break-word;
}

.br-corpus-inspect-lead {
  margin: 0 0 0.5rem;
}

.br-corpus-file-list__item:last-child {
  border-bottom: none;
}

.br-corpus-file-list__name {
  font-weight: 600;
  color: var(--text1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.br-corpus-file-list__meta {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.br-corpus-hint {
  margin: 0.35rem 0 0;
  font-size: var(--cw-text-xs, 0.72rem);
}

.br-corpus-out {
  margin-top: 0.35rem;
  max-height: 10rem;
  overflow: auto;
  font-size: var(--cw-text-xs, 0.72rem);
}

.br-corpus-out .cw-pre-json {
  font-size: 0.68rem;
  max-height: 8rem;
  overflow: auto;
}

.br-corpus-verify {
  margin-top: 0.5rem;
}

.br-nodes-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-bottom: 0.75rem;
}

.br-nodes-count {
  font-size: var(--cw-text-xs, 0.72rem);
}

.br-nodes-out {
  flex: 1;
  min-height: 0;
  max-height: min(52vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.br-rag-center-col .cw-main.cw-main--br-primary > .cw-section--nodes:not([hidden]) {
  flex: 1;
  min-height: 0;
}

.br-node-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.br-node-tree details {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.5rem;
  background: var(--bg0);
}

.br-node-tree summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--cw-text-sm, 0.8125rem);
  color: var(--text1);
  list-style-position: outside;
}

.br-node-tree summary::-webkit-details-marker {
  color: var(--muted);
}

.br-node-tree__sub {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0 0 0 0.75rem;
}

.br-node-tree__leaf {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.35rem 0.45rem;
  margin-bottom: 0.35rem;
  background: var(--bg1);
}

.br-node-tree__leaf summary {
  font-weight: 500;
  font-size: 0.75rem;
}

.br-node-tree__preview {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text2);
  white-space: pre-wrap;
  word-break: break-word;
}

.br-node-tree__actions {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.br-node-inspect {
  margin-top: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem;
  max-height: min(36vh, 420px);
  overflow: auto;
  font-size: 0.7rem;
  line-height: 1.35;
  background: var(--bg1);
  font-family: ui-monospace, monospace;
}

.br-node-inspect pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.br-node-inspect__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--cw-text-sm, 0.8125rem);
}

/* ──────────────────────────── Better RAG: modal editor ──────────────────────────── */
.br-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.br-modal[hidden] {
  display: none;
}

.br-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.br-modal__panel {
  position: relative;
  width: min(860px, calc(100vw - 2rem));
  max-height: min(86vh, 820px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg0);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  padding: 0.85rem;
}

.br-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.br-modal__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}

.br-modal__sub {
  margin: 0.5rem 0 0.65rem;
  font-size: var(--cw-text-xs, 0.72rem);
}

.br-modal__textarea {
  width: 100%;
  max-width: 100%;
  min-height: 320px;
  margin: 0;
}

.br-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.br-preview-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg1);
  padding: 0.6rem 0.65rem;
}

.br-preview-card__title {
  margin: 0 0 0.25rem;
  font-size: var(--cw-text-sm, 0.8125rem);
  font-weight: 700;
}

.br-preview-card__meta {
  margin: 0 0 0.5rem;
  font-size: var(--cw-text-xs, 0.72rem);
  color: var(--text2);
}

.br-preview-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.br-nodes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.br-nodes-list__item {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  background: var(--bg0);
}

.br-nodes-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  margin-bottom: 0.25rem;
}

.br-nodes-list__id {
  font-size: var(--cw-text-xs, 0.72rem);
  color: var(--muted);
}

.br-nodes-list__kind {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-hover);
}

.br-nodes-list__title {
  font-size: var(--cw-text-sm, 0.8125rem);
  line-height: 1.45;
  color: var(--text2);
}

.br-nodes-empty {
  margin: 0;
  color: var(--text2);
  font-size: var(--cw-text-sm, 0.8125rem);
}

.br-rag-center-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.br-rag-center-col .cw-main {
  flex: 1;
  min-height: 0;
}

.br-rag-center-col .cw-main.cw-main--br-primary {
  flex: 1 1 auto;
  min-height: min(52vh, 560px);
  display: flex;
  flex-direction: column;
}

.br-rag-center-col .cw-main.cw-main--br-primary > .cw-section:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.br-rag-center-col .cw-main.cw-main--br-primary > .cw-section--chat:not([hidden]) .cw-chat-shell--focus {
  flex: 1;
  min-height: 260px;
}

.br-rag-context-below {
  flex-shrink: 0;
  padding: 0.65rem 1rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--bg0);
}

.br-rag-scope-below.cw-scope-panel {
  margin-bottom: 0;
  margin-top: 0.5rem;
  background: transparent;
  border: 1px solid var(--line);
}

.cw-scope-title--below {
  font-size: 1.05rem;
  margin: 0.2rem 0 0;
}

.br-rag-chat-chrome {
  margin: -1.1rem -1.25rem 1rem -1.25rem;
  padding: 0;
  background: var(--bg1);
  border-bottom: 1px solid var(--line);
}

.br-rag-chat-chrome .br-rag-tab-desc {
  border-bottom: none;
}

.br-rag-chat-chrome .cw-api-details {
  margin: 0;
  padding: 0 1rem 0.55rem;
}

.br-rag-mode-tabs {
  display: flex;
  gap: 0;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg1);
}

.br-rag-tab {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--cw-text-sm, 0.8125rem);
  font-weight: 600;
  padding: 0.65rem 1rem;
  color: var(--text2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.br-rag-tab:hover {
  color: var(--text1);
}

.br-rag-tab.active {
  color: var(--accent-hover);
  border-bottom-color: var(--accent);
}

.br-rag-tab-desc {
  margin: 0;
  padding: 0.5rem 1rem 0.65rem;
  font-size: var(--cw-text-xs, 0.72rem);
  color: var(--muted);
  line-height: 1.4;
  background: var(--bg1);
  border-bottom: 1px solid var(--line);
}

.br-rag-sources {
  background: var(--bg1);
  padding: 12px 14px;
  overflow-y: auto;
  max-height: 85vh;
}

.br-rag-sources.br-rag-right-rail {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.br-rail-tools {
  flex: 0 1 auto;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  max-height: min(44vh, 380px);
  overflow-y: auto;
}

.br-rail-sources {
  flex: 1 1 auto;
  min-height: 100px;
  padding: 12px 14px;
  overflow-y: auto;
}

.br-rag-sources h3,
.br-rail-section-title {
  margin: 0 0 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.br-rag-sources-sub {
  margin: 0 0 10px;
  font-size: var(--cw-text-xs, 0.72rem);
  color: var(--text2);
  line-height: 1.4;
}

.br-sources-body {
  min-height: 120px;
}

.br-sources-empty,
.br-sources-loading {
  margin: 0;
  font-size: var(--cw-text-sm, 0.8125rem);
  color: var(--muted);
}

.br-sources-grid .cw-recall-card {
  margin-bottom: 10px;
}

.br-rag-sources-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.br-rag-chat-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 0;
  margin-top: 8px;
}

.br-rag-demo-extras {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg0);
}

.br-rag-demo-extras .cw-phone-sim-cards {
  flex-direction: row;
  flex-wrap: wrap;
}

.br-rag-demo-extras .cw-phone-sim-card {
  flex: 1 1 220px;
  max-width: 320px;
}

.br-rag-statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.45rem 1rem;
  font-size: 0.72rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--bg1);
}

.br-topbar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text2);
}

/* Better RAG demo cockpit — minimal chrome; title centred in bar */
.dashboard-topbar--br-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 1rem;
  justify-content: stretch;
}

.br-cockpit-left {
  justify-self: start;
  min-width: 0;
}

.br-cockpit-center {
  justify-self: center;
  text-align: center;
  grid-column: 2;
}

.br-cockpit-right {
  justify-self: end;
  min-width: 0;
  margin-left: 0;
}

.br-cockpit-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}

.br-cockpit-brand .brand-better-rag {
  margin-left: 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.br-cockpit-tagline {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-topbar--br-cockpit .dashboard-brand {
  margin-left: 0;
}

@media (max-width: 640px) {
  .dashboard-topbar--br-cockpit {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: stretch;
  }

  .br-cockpit-center {
    grid-column: 1;
    order: -1;
  }

  .br-cockpit-left,
  .br-cockpit-right {
    justify-self: stretch;
  }

  .br-cockpit-right {
    justify-content: flex-start;
  }
}

.br-session-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(91, 143, 168, 0.2);
  border: 1px solid rgba(91, 143, 168, 0.45);
  color: var(--accent-hover);
}

.br-topbar-demo-pack {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.22);
}

.br-topbar-demo-debug {
  margin-top: 0.35rem;
  text-align: right;
  font-size: 0.85rem;
  line-height: 1.35;
}

.br-topbar-demo-debug code {
  font-size: 0.85em;
}

.br-topbar-workspace-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.br-topbar-workspace-label {
  font-weight: 500;
  color: var(--text1);
  max-width: min(28ch, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.br-topbar-checkpoint-label {
  color: var(--muted);
  font-size: 0.72rem;
}

.cw-demo-strip--folded {
  margin-bottom: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--cw-radius, 10px);
  background: rgba(91, 143, 168, 0.06);
  padding: 0;
}

.cw-demo-strip--folded > summary.cw-demo-strip__summary {
  cursor: pointer;
  list-style: none;
  padding: 0.55rem 0.85rem;
  font-size: var(--cw-text-xs, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text2);
}

.cw-demo-strip--folded > summary::-webkit-details-marker {
  display: none;
}

.cw-demo-strip--folded .cw-demo-strip__body {
  padding: 0 0.85rem 0.75rem;
  border-top: 1px solid var(--line);
}

.cw-scope-panel--compact {
  margin-bottom: 0.75rem;
}

.cw-scope-panel--compact.dashboard-header {
  display: block;
  align-items: stretch;
}

.cw-scope-panel--compact .cw-scope-title {
  font-size: 1.12rem;
}

.cw-scope-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.cw-scope-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.65rem;
}

.cw-workspace-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: var(--cw-text-sm, 0.8125rem);
  font-weight: 600;
  color: var(--text1);
  background: var(--bg0);
  border: 1px solid var(--line);
}

.cw-tech-details {
  margin-top: 0.65rem;
  font-size: var(--cw-text-xs, 0.72rem);
  color: var(--muted);
}

.cw-tech-details summary {
  cursor: pointer;
  color: var(--accent);
  user-select: none;
}

.cw-api-details {
  margin: 0 0 0.75rem;
  font-size: var(--cw-text-xs, 0.72rem);
  color: var(--muted);
}

.cw-api-details summary {
  cursor: pointer;
  color: var(--accent);
  user-select: none;
}

.cw-api-details--inline {
  margin: 0.35rem 0 0;
}

.cw-mono-inline {
  font-size: 0.78rem;
  word-break: break-all;
}

.cw-section--pad {
  padding: 1.1rem 1.25rem !important;
}

.cw-section-lead--tight {
  margin-bottom: 0.5rem;
}

.cw-chat-section-head {
  margin-bottom: 0.75rem;
}

.cw-chat-shell--focus {
  box-shadow: 0 0 0 1px rgba(91, 143, 168, 0.12);
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.cw-chat-shell--focus .cw-chat-thread {
  flex: 1;
  min-height: 240px;
  max-height: min(48vh, 480px);
}

.cw-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.cw-chat-input-row--solo {
  display: block;
}

.cw-chat-input-row--solo .cw-chat-textarea {
  width: 100%;
}

.cw-chat-textarea {
  flex: 1;
  min-height: 2.75rem;
  resize: vertical;
  max-height: 8rem;
  line-height: 1.45;
}

.cw-chat-send {
  flex-shrink: 0;
  min-height: 2.75rem;
}

.mode-app .cw-chat-shell .cw-chat-textarea {
  max-width: none;
}

.dashboard-topbar .brand-better-rag {
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (max-width: 960px) {
  .dashboard-container.br-rag-outer {
    grid-template-columns: 1fr;
  }

  .br-rag-center-col {
    border-right: none;
  }

  .br-rag-sources {
    max-height: none;
    border-top: 1px solid var(--line);
  }

  .br-rag-sources.br-rag-right-rail {
    overflow: visible;
  }

  .br-rail-tools {
    max-height: none;
  }
}