/* ============================================
   ForeStrat, v3
   Direction: institutional restraint, modern minimal.
   Reference: Linear, Plaid, Vercel.
   Light theme primary. Dark theme as toggle.
   ============================================ */

/* ---------- TOKENS: LIGHT (default) ---------- */
:root, [data-theme="light"]{
  /* ForeStrat Brand Color Tokens */
  --fs-cyan:        #00d1f9; /* signal cyan, accents, dark elements */
  --fs-cyan-deep:   #0a8fab; /* cyan darkened for AA contrast on light surfaces */
  --fs-slate:       #212930; /* primary dark surface / ink background */
  --fs-ink:         #0d0f12; /* near-black text on light */
  --fs-paper:       #edf6f9; /* light surface (cool icy-cyan, deepened 12%) */
  --fs-on-dark:     #f3f6f8; /* off-white text/mark on slate */

  /* Semantic UI tokens mapped to brand colors */
  --canvas:        var(--fs-paper);
  --surface:       #ffffff;
  --surface-2:     #e4eff3; /* cool-cyan transition surface */
  --ink:           var(--fs-ink);
  --ink-2:         var(--fs-slate);
  --ink-dim:       #3a4049;
  --mute:          #636b78;
  --mute-2:        #a0a5b0;
  --line:          #d3e2e8;
  --line-soft:     #ddeaef;
  --accent:        var(--fs-cyan-deep);
  --accent-soft:   rgba(10, 143, 171, 0.08);
  --accent-text:   var(--fs-cyan-deep);
  --positive:      #137a52;
  --negative:      #c0364a;
  --amber:         #d99a25;
  --shadow-card:   0 1px 2px rgba(33,41,48,.03), 0 8px 24px -12px rgba(33,41,48,.06);
  --shadow-lift:   0 4px 12px rgba(33,41,48,.04), 0 24px 48px -16px rgba(33,41,48,.08);
  --radius-sm:     6px;
  --radius-md:     8px;
  --radius:        10px;
  --radius-lg:     14px;
  --fs-accent:     var(--accent);
  --fs-fg:         var(--fs-ink);
  --fs-header-bg:  #e2f6fd;
  --signal-text:   var(--fs-cyan-deep);
  
  /* New Premium Aesthetic Tokens */
  --fs-cyan-grad:  linear-gradient(135deg, #00d1f9 0%, #0a8fab 100%);
  --fs-glass-bg:   rgba(255, 255, 255, 0.65);
  --fs-glass-border: rgba(0, 209, 249, 0.15);
}

/* ---------- TOKENS: DARK ---------- */
[data-theme="dark"]{
  --canvas:        var(--fs-slate);
  --surface:       #191f24;
  --surface-2:     #252e36;
  --ink:           var(--fs-on-dark);
  --ink-2:         #d4d8e0;
  --ink-dim:       #a5acba;
  --mute:          #707888;
  --mute-2:        #4d535f;
  --line:          #323c46;
  --line-soft:     #2a323a;
  --accent:        var(--fs-cyan);
  --accent-soft:   rgba(0, 209, 249, 0.08);
  --accent-text:   var(--fs-cyan);
  --positive:      #3ecb8a;
  --negative:      #ff6b80;
  --amber:         #f0b240;
  --shadow-card:   0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.5);
  --shadow-lift:   0 6px 18px rgba(0,0,0,.4), 0 32px 64px -16px rgba(0,0,0,.6);

  --fs-fg:         var(--fs-on-dark);
  --fs-header-bg:  #1a2832;

  /* New Premium Aesthetic Tokens */
  --fs-cyan-grad:  linear-gradient(135deg, #0a8fab 0%, #00d1f9 100%);
  --fs-glass-bg:   rgba(33, 41, 48, 0.65);
  --fs-glass-border: rgba(0, 209, 249, 0.25);
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.55;
  color:var(--ink);background:var(--canvas);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv02','cv03','cv04','cv11';
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-text);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
button{font-family:inherit;font-size:inherit;cursor:pointer}

:root{
  --sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Manrope',var(--sans);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}

/* Accessibility */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  position:fixed;top:12px;left:12px;
  background:var(--ink);color:var(--canvas);
  padding:10px 16px;border-radius:var(--radius-sm);z-index:1000;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media(max-width:720px){.wrap{padding:0 20px}}

section.section{
  padding:44px 0;
  border-bottom:1px solid var(--line-soft);
}
section.section:last-of-type{border-bottom:none}
@media(max-width:720px){section.section{padding:32px 0}}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--fs-header-bg);
  border-bottom:1px solid rgba(0, 209, 249, 0.10);
}
.nav-inner{display:flex;align-items:center;height:68px;gap:40px}
.logo{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:20px;
  letter-spacing:-.01em;line-height:1;
}
.logo img{height:38px;width:auto;min-width:115px}
.logo .logo-light{display:block}
.logo .logo-dark{display:none}
[data-theme="dark"] .logo .logo-light{display:none}
[data-theme="dark"] .logo .logo-dark{display:block}
.nav-links{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav-links a{color:var(--ink-dim);font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-dropdown{position:relative}
.nav-dropdown-toggle{
  display:inline-flex;align-items:center;gap:4px;
  background:transparent;border:none;padding:0;
  color:var(--ink-dim);font-size:15px;font-weight:500;
  font-family:var(--sans);cursor:pointer;line-height:1.4;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle[aria-expanded="true"],
.nav-dropdown-toggle.active{color:var(--ink)}
.nav-chevron{font-size:10px;transition:transform .2s;line-height:1}
.nav-dropdown-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}
.nav-dropdown-menu{
  display:none;position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%);
  min-width:210px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lift);padding:8px 0;z-index:60;
}
.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{
  display:block;padding:10px 18px;font-size:14.5px;font-weight:500;
  color:var(--ink-dim);white-space:nowrap;
}
.nav-dropdown-menu a:hover{
  color:var(--ink);background:var(--surface-2);
}
.nav-dropdown-menu a.active{color:var(--ink);background:var(--surface-2)}
.nav-right{display:flex;align-items:center;gap:12px}
.mobile-menu-toggle{
  display:none;background:transparent;border:none;color:var(--ink);
  font-size:24px;cursor:pointer;padding:8px;line-height:1;
}

@media(max-width:760px){
  .nav-inner{justify-content:space-between;position:relative;gap:0;}
  .mobile-menu-toggle{display:block; z-index:100;}
  .nav-inner .logo{position:absolute;left:50%;transform:translateX(-50%);margin:0;}
  .nav-right{display:none;}
  .nav-links{
    display:none;flex-direction:column;
    position:absolute;top:68px;left:0;right:0;
    background:var(--surface);
    padding:24px 20px;
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lift);
    gap:20px;align-items:center;
  }
  .nav-links.mobile-open{display:flex;}
  .nav-links .theme-toggle-mobile { display: inline-flex; }
  .nav-links .btn-mobile { display: inline-flex; }
  .nav-dropdown{width:100%;text-align:center}
  .nav-dropdown-menu{
    position:static;transform:none;
    border:none;box-shadow:none;padding:0;margin-top:4px;
    background:transparent;min-width:0;
  }
  .nav-dropdown.open .nav-dropdown-menu{display:flex;flex-direction:column;gap:12px}
  .nav-dropdown-menu a{padding:0;background:transparent}
  .nav-dropdown-menu a:hover,.nav-dropdown-menu a.active{background:transparent}
}

/* Theme toggle */
.theme-toggle{
  width:44px;height:44px;border-radius:999px;
  background:transparent;border:1px solid var(--line);
  color:var(--ink-dim);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s;
}
.theme-toggle:hover{border-color:var(--mute);color:var(--ink)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;
  font-size:15px;font-weight:500;
  border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
  white-space:nowrap;line-height:1;
}
.btn-primary{background:var(--ink);color:var(--canvas)}
.btn-primary:hover{background:var(--ink-2);color:var(--canvas);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--mute);color:var(--ink)}
.btn .arrow{font-size:15px;transition:transform .15s}
.btn:hover .arrow{transform:translateX(2px)}

/* ---------- TYPE ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--mute);text-transform:uppercase;margin-bottom:24px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--mute-2)}

h1.display{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.08;letter-spacing:-.02em;
  margin:0 0 20px;color:var(--ink);
  max-width:16ch;
}
h1.display em{font-style:italic;font-weight:400;color:var(--ink-2)}

.lead{
  font-size:18px;line-height:1.55;color:var(--ink-dim);
  max-width:560px;margin:0 0 32px;
}
.page-summary{
  font-size:16px;line-height:1.55;color:var(--ink-dim);
  max-width:720px;margin:0 0 16px;
}
.hero-full .page-summary,
.hero .page-summary{
  max-width:900px;margin-bottom:20px;
}
.hero-editorial .page-summary{
  max-width:640px;margin-bottom:16px;
}

.section-head{max-width:1080px;margin-bottom:24px}
.section-head h2{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(26px,2.9vw,36px);
  line-height:1.15;letter-spacing:-.016em;
  margin:0 0 14px;color:var(--ink);
}
.section-head p{
  font-size:17px;line-height:1.6;color:var(--ink-dim);
  margin:0;max-width:900px;
}
.section-head p+p{margin-top:12px}

/* ---------- HERO ---------- */
.hero{padding:40px 0 56px}
.hero-full h1.display{max-width:28ch}
.hero-full .lead{max-width:720px}
@media(max-width:720px){.hero{padding:28px 0 40px}}
.hero-grid{
  display:grid;grid-template-columns:1.1fr 0.9fr;
  gap:64px;align-items:center;
}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:48px}}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ---------- 404 / ERROR ---------- */
.error-hero{padding:96px 0 80px;text-align:center}
.error-code{
  font-family:var(--display);font-weight:800;
  font-size:clamp(104px,20vw,220px);
  line-height:.85;letter-spacing:-.04em;
  color:var(--ink);margin:0 0 20px;
}
.error-hero .eyebrow{justify-content:center}
.error-hero h1.display{max-width:22ch;margin-left:auto;margin-right:auto}
.error-hero .lead{max-width:560px;margin-left:auto;margin-right:auto}
.error-hero .hero-ctas-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
@media(max-width:720px){.error-hero{padding:64px 0 56px}}

.hero-visual{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow-card);
  font-family:var(--mono);font-size:13px;
}

/* Blog specific styles */
.blog-cta {
  font-family:var(--mono);font-size:13px;color:var(--mute);letter-spacing:.04em;
}
.blog-cta-link {
  color:var(--signal-text);
}
.hv-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid var(--line-soft);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
}
.hv-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--positive);display:inline-block;margin-right:6px;
  vertical-align:middle;
}
.hv-node{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--canvas);margin-bottom:10px;
}
.hv-node:last-child{margin-bottom:0}
.hv-node .name{display:flex;flex-direction:column;gap:2px}
.hv-node .name b{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--ink);letter-spacing:0}
.hv-node .name small{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:0}
.hv-node .tag{
  font-size:11px;padding:4px 10px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-dim);letter-spacing:0;
}
.hv-connector{text-align:center;color:var(--mute-2);font-size:14px;line-height:1;padding:2px 0}

/* ---------- PROOF ---------- */
.proof{padding:64px 0;text-align:center}
.proof .lead-line{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(20px,2.2vw,26px);
  line-height:1.4;letter-spacing:-.012em;
  color:var(--ink);max-width:800px;margin:0 auto 24px;
}
.proof .lead-line em{font-style:italic;color:var(--ink-dim)}
.proof .firms{
  display:flex;flex-wrap:wrap;gap:36px;justify-content:center;
  font-family:var(--sans);font-size:16px;color:var(--mute);letter-spacing:-.01em;
}

/* ---------- PRODUCT TILES ---------- */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:880px){.products{grid-template-columns:1fr}}
.product-card{
  display:flex;flex-direction:column;gap:16px;
  padding:32px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  color:inherit;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.product-card:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 12px 32px -12px rgba(0, 209, 249, 0.25);
  color:inherit;
}
.product-card .pc-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-text);
}
.product-card h3{
  font-family:var(--display);font-weight:700;font-size:24px;
  line-height:1.2;letter-spacing:-.014em;color:var(--ink);margin:0;
}
.product-card p{
  font-size:15px;line-height:1.55;color:var(--ink-dim);margin:0;flex:1;
}
.product-card .pc-meta{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}
.product-card .pc-meta span{
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  color:var(--ink-dim);
  padding:4px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface-2);
}
.product-card .pc-arrow{
  font-size:14px;color:var(--ink-dim);
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  transition:gap .15s,color .15s;
}
.product-card:hover .pc-arrow{gap:10px;color:var(--accent-text)}

/* ---------- FEATURE GRID ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.features-2col{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.features{grid-template-columns:1fr}}
.content-wide{
  width:100%;max-width:100%;margin:0 auto;
}
@media(max-width:880px){.content-wide{width:100%}}
.content-wide .section-head{max-width:none}
.content-wide .section-head p{max-width:none}
.feature{
  padding:28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.feature:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 8px 24px -8px rgba(0, 209, 249, 0.2);
}
.feature h3{
  font-family:var(--display);font-weight:700;font-size:20px;
  line-height:1.25;letter-spacing:-.012em;color:var(--ink);margin:0;
}
.feature p{font-size:14.5px;line-height:1.6;color:var(--ink-dim);margin:0}
.feature a:not(.btn){
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;font-size:14px;font-weight:500;color:var(--accent-text);
}
.feature a:not(.btn):hover{color:var(--ink)}

/* ---------- TAG ROW ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:8px}
.tag-row span{
  font-size:14px;color:var(--ink);
  padding:8px 16px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);
}

/* ---------- GOODBYE LIST ---------- */
.goodbye-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
@media(max-width:760px){.goodbye-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.goodbye-grid{grid-template-columns:1fr}}
.goodbye-grid .item{
  padding:24px 20px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;
  font-size:15px;color:var(--ink);background:var(--surface);
}
.goodbye-grid .item .num{
  font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.04em;
}

/* ---------- STATS ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{
  padding:32px 24px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--surface);
}
.stat:last-child{border-right:none}
@media(max-width:760px){.stat:nth-child(2n){border-right:none}}
.stat .label{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);margin-bottom:16px;
}
.stat .figure{
  font-family:var(--sans);font-weight:500;font-size:42px;line-height:1;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;
}
.stat .figure em{
  font-style:normal;font-size:22px;color:var(--ink-dim);
  font-weight:400;margin-left:2px;
}
.stat .desc{font-size:14px;color:var(--ink-dim);line-height:1.5}

/* ---------- FAQ ---------- */
.faq{max-width:800px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 0;
  font-family:var(--sans);font-weight:400;font-size:19px;
  letter-spacing:-.012em;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{
  font-family:var(--mono);font-size:18px;font-weight:300;
  color:var(--mute);transition:transform .2s;flex-shrink:0;
}
.faq details[open] summary .plus{transform:rotate(45deg);color:var(--ink)}
.faq .answer{
  padding:0 0 24px;font-size:16px;line-height:1.6;
  color:var(--ink-dim);max-width:700px;
}

/* ---------- FOUNDERS ---------- */
.founders{display:grid;grid-template-columns:1fr;gap:40px}
.founder{
  display:grid;grid-template-columns:200px 1fr;gap:40px;
  align-items:start;padding-top:32px;border-top:1px solid var(--line);
}
.founder:first-child{padding-top:0;border-top:none}
@media(max-width:760px){.founder{grid-template-columns:1fr;gap:24px}}
.founder-avatar{
  width:200px;height:200px;border-radius:var(--radius-lg);
  background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:400;font-size:64px;
  color:var(--ink-dim);letter-spacing:-.02em;
}
.founder-text .name-line{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mute);margin-bottom:14px;
}
.founder-text h3{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(24px,2.4vw,30px);
  line-height:1.2;letter-spacing:-.016em;
  color:var(--ink);margin:0 0 20px;
}
.founder-text p{
  font-size:16px;line-height:1.65;
  color:var(--ink-dim);margin:0 0 16px;
}

/* ---------- PEDIGREE (two-column founder cards) ---------- */
.pedigree-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
@media(max-width:880px){.pedigree-grid{grid-template-columns:1fr}}
.pedigree-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 32px;
}
.pedigree-card .name-line{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);margin-bottom:10px;
}
.pedigree-card h3{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(22px,2.2vw,26px);
  line-height:1.2;letter-spacing:-.016em;
  color:var(--ink);margin:0 0 18px;
}
.pedigree-points{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.pedigree-points li{
  font-size:15px;line-height:1.5;color:var(--ink-dim);
  padding-left:14px;position:relative;
}
.pedigree-points li::before{
  content:"";position:absolute;left:0;top:9px;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}

/* ---------- CONTACT ---------- */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:64px;align-items:start;
}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:40px}}
.contact-info .row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line-soft);
  font-size:15px;
}
.contact-info .row .label{
  font-family:var(--mono);font-size:12px;color:var(--mute);
  letter-spacing:.04em;text-transform:uppercase;
}
.contact-info .row a{color:var(--ink)}
.contact-info .row a:hover{color:var(--accent-text)}
.contact-form{display:flex;flex-direction:column;gap:16px}
.contact-form .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.contact-form .pair{grid-template-columns:1fr}}
.contact-form label{
  display:flex;flex-direction:column;gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mute);
}
.contact-form input,.contact-form textarea{
  padding:12px 14px;
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s;
  text-transform:none;letter-spacing:0;
}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form button{align-self:flex-start;margin-top:8px}
.form-status{margin:0;font-size:15px;line-height:1.5}
.form-status-success{color:var(--accent-text)}
.form-status-error{color:#c45c5c}
.hidden{display:none !important}

/* ---------- CTA BAND ---------- */
.cta-band{padding:48px 0;text-align:center;border-top:1px solid var(--line-soft)}
.cta-band h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,3vw,40px);line-height:1.15;
  letter-spacing:-.018em;margin:0 0 16px;color:var(--ink);
}
.cta-band p{
  font-size:17px;color:var(--ink-dim);
  max-width:840px;margin:0 auto 28px;
}
.cta-band .cta-row{
  display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center;
}
.cta-band .meta{
  font-family:var(--mono);font-size:12px;color:var(--mute);
  margin-top:24px;letter-spacing:.02em;
}

/* ---------- FOOTER ---------- */
.footer{padding:48px 0 24px;border-top:1px solid var(--line)}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:48px;
  margin-bottom:32px;
}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
.footer-col h5{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);margin:0 0 16px;font-weight:500;
}
.footer-col a{display:block;font-size:14px;color:var(--ink-dim);padding:6px 0}
.footer-col a:hover{color:var(--ink)}
.footer-brand p{
  font-size:14px;color:var(--ink-dim);line-height:1.55;
  max-width:320px;margin:16px 0 0;
}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--mute);
}
@media(max-width:560px){.footer-bottom{flex-direction:column;gap:12px}}

/* ---------- BLOG ---------- */
.blog-hero{padding:56px 0 32px}
.blog-hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,4vw,52px);line-height:1.08;
  letter-spacing:-.022em;margin:0 0 16px;color:var(--ink);
}
.blog-hero p{
  font-size:18px;line-height:1.5;color:var(--ink-dim);
  max-width:600px;margin:0;
}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:880px){.posts{grid-template-columns:1fr}}
.post-card{
  display:flex;flex-direction:column;gap:12px;
  padding:28px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  color:inherit;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.post-card:hover{
  color:inherit;border-color:color-mix(in srgb, var(--accent) 35%, var(--line));
  transform:translateY(-2px);box-shadow:0 12px 32px -16px rgba(0, 209, 249, 0.16);
}
.post-card .meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);
  display:flex;gap:12px;align-items:center;
}
.post-card .meta .cat{color:var(--accent-text)}
.post-card h3{
  font-family:var(--display);font-weight:700;font-size:22px;
  line-height:1.25;letter-spacing:-.014em;
  color:var(--ink);margin:0;
}
.post-card .excerpt{
  font-size:14.5px;line-height:1.55;color:var(--ink-dim);
  margin:0;flex:1;
}

/* Blog article */
.article-hero{padding:56px 0 24px;border-bottom:1px solid var(--line-soft)}
.article-hero .meta{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mute);
  margin-bottom:20px;display:flex;gap:14px;
}
.article-hero .meta .cat{color:var(--accent-text)}
.article-hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(32px,4vw,48px);line-height:1.1;
  letter-spacing:-.022em;margin:0 0 20px;
  color:var(--ink);max-width:800px;
}
.article-hero .deck{
  font-family:var(--sans);font-style:italic;font-size:20px;
  line-height:1.5;color:var(--ink-dim);
  max-width:680px;margin:0;
}
.article-hero .byline{
  margin-top:28px;padding-top:20px;
  border-top:1px solid var(--line-soft);
  font-size:14px;color:var(--ink-dim);
}
.article-hero .byline strong{color:var(--ink);font-weight:500}
.article-body{
  max-width:720px;margin:0 auto;padding:56px 32px 96px;
  font-size:17px;line-height:1.7;color:var(--ink-2);
}
.article-body p{margin:0 0 22px}
.article-body h2{
  font-family:var(--display);font-weight:700;font-size:26px;
  line-height:1.2;letter-spacing:-.016em;
  color:var(--ink);margin:40px 0 16px;
}
.article-body h3{
  font-family:var(--display);font-weight:700;font-size:20px;
  line-height:1.3;color:var(--ink);margin:32px 0 12px;
  letter-spacing:-.01em;
}
.article-body ul,.article-body ol{padding-left:24px;margin:0 0 22px}
.article-body li{margin-bottom:6px}
.article-body code{
  font-family:var(--mono);font-size:.9em;
  background:var(--surface-2);padding:2px 6px;border-radius:4px;
}
.article-body pre{
  font-family:var(--mono);font-size:13px;
  background:var(--surface);border:1px solid var(--line);
  padding:18px 20px;border-radius:var(--radius);
  overflow-x:auto;margin:22px 0;line-height:1.55;
}
.article-body blockquote{
  margin:28px 0;padding:4px 0 4px 24px;
  border-left:3px solid var(--accent);
  font-style:italic;color:var(--ink-dim);
  font-size:19px;line-height:1.5;
}

/* ---------- BLOG IMAGES ----------
   One default + opt-in variant classes. Authors pick a named variant;
   all visual rules live here so every blog image stays on-brand,
   theme-aware and responsive. Never style images inline. */
.article-body img{
  max-width:100%;height:auto;
  margin:32px auto;
  border-radius:var(--radius);
}
/* figure + caption (left-aligned, muted, explains the visual) */
.article-figure{margin:36px 0;}
.article-figure img{margin:0 auto;}
.article-figure figcaption{
  margin-top:12px;
  font-size:14px;line-height:1.5;color:var(--ink-dim);
}
/* optional hairline frame + plate — for screenshots/photos that
   need an edge. Diagrams with their own background can skip this. */
.article-figure.is-framed img,
.article-body img.is-framed{
  border:1px solid var(--line);
  background:var(--surface);
}
/* small / inline diagram */
.article-figure.is-small{max-width:420px;margin-left:auto;margin-right:auto;}
.article-figure.is-small figcaption{text-align:center;}
/* full-bleed breakout — guarded so it never causes horizontal scroll */
.article-figure.is-wide{
  width:min(960px,92vw);max-width:100vw;
  margin-left:50%;transform:translateX(-50%);
}
.article-figure.is-wide figcaption{
  max-width:720px;margin:12px auto 0;padding:0 32px;
}
/* two-up grid — collapses to one column on small screens */
.article-figs{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:36px 0;
}
.article-figs figure{margin:0;}
.article-figs img{margin:0;}
.article-figs figcaption{
  margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-dim);
}
@media (max-width:640px){
  .article-figs{grid-template-columns:1fr;}
}

/* ---------- BLOG BACK LINK ---------- */
.article-back{
  display:inline-flex;align-items:center;gap:8px;
  min-height:24px;padding:6px 0;
  font-size:15px;font-weight:500;color:var(--ink-dim);
}
.article-back:hover{color:var(--ink);}
.article-back .back-arrow{font-size:18px;line-height:1}
.article-back-top{margin-bottom:24px}
.article-back-wrap{
  max-width:720px;margin:0 auto;padding:0 32px 80px;
}

/* ---------- HERO WITH IMAGE & VIDEO SHOWCASE ---------- */
.video-showcase {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--fs-glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  display: flex;
  align-items: center;
  justify-content: center;
  /* subtle cyan gradient background */
  background-image: var(--fs-cyan-grad);
  opacity: 0.95;
}
.video-showcase::before {
  content: "▶";
  font-size: 48px;
  color: var(--canvas);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.3s ease, background 0.3s ease, opacity 0.4s ease, visibility 0.4s ease;
  z-index: 10;
  cursor: pointer;
}
.video-showcase:hover::before {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.6);
}
.video-showcase video {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  z-index: 5;
  opacity: 0; /* hidden until the video starts playing (see video.js) */
  transition: opacity 0.45s ease;
}
.video-showcase.is-playing video { opacity: 1; }
.video-showcase.is-playing { background-image: none; }
.video-showcase.is-playing::before { opacity: 0; visibility: hidden; }
.video-mute {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 12;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--fs-glass-border);
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.video-mute:hover { background: rgba(0, 0, 0, 0.65); transform: scale(1.05); }
.video-mute svg { width: 18px; height: 18px; display: block; }
.video-mute .icon-sound { display: none; }
.video-mute.is-unmuted .icon-muted { display: none; }
.video-mute.is-unmuted .icon-sound { display: block; }
/* ---------- TIGHT SECTION (less padding) ---------- */
.section-tight{padding:24px 0}
@media(max-width:720px){.section-tight{padding:24px 0}}

/* Centered variants */
.section-head-center{
  margin-left:auto;margin-right:auto;
  text-align:center;
  margin-bottom:32px;
}
.section-head-center p{margin-left:auto;margin-right:auto}
.tag-row-center{justify-content:center}

/* ---------- FOUNDER PHOTO ---------- */
.founder-avatar-image{
  padding:0;
  overflow:hidden;
  background:var(--surface-2);
}
.founder-avatar-image img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ============================================
   DIAGRAMS, Shared illustration system
   Used in hero-image slot on each product page
   ============================================ */

.diagram{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-card);
  font-family:var(--mono);
  font-size:13px;
  width:100%;
  max-width:100%;
}

.diagram .d-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid var(--line-soft);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);
}
.diagram .d-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--positive);
  display:inline-block;margin-right:6px;vertical-align:middle;
}
.diagram .d-meta{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.06em;
}

.diagram .d-divider{
  height:1px;background:var(--line-soft);
  margin:12px 0;
}

/* ---------- PLATFORM diagram (home) ---------- */
.diagram-platform .d-inputs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-bottom:10px;
}
.diagram-platform .d-pill{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  font-family:var(--mono);font-size:11px;
  color:var(--ink-dim);text-align:center;
  letter-spacing:0;
}
.diagram-platform .d-arrows{
  display:grid;grid-template-columns:repeat(3,1fr);
  text-align:center;color:var(--mute-2);font-size:14px;
  padding:4px 0;
}
.diagram-platform .d-arrows-single{
  grid-template-columns:1fr;padding:2px 0;
}
.diagram-platform .d-module{
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--canvas);
  margin-bottom:0;
}
.diagram-platform .d-mod-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4px;
}
.diagram-platform .d-mod-name{
  font-family:var(--sans);font-weight:500;font-size:15px;
  letter-spacing:-.01em;color:var(--ink);
}
.diagram-platform .d-mod-tag{
  font-family:var(--mono);font-size:10px;
  padding:3px 8px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-text);
  letter-spacing:.06em;text-transform:uppercase;
}
.diagram-platform .d-mod-sub{
  font-family:var(--mono);font-size:11px;
  color:var(--mute);letter-spacing:0;
}

/* ---------- DATA pipeline diagram ---------- */
.diagram-data .d-pipe-row{
  display:grid;grid-template-columns:1fr auto auto;
  gap:10px;align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
}
.diagram-data .d-pipe-row:last-of-type{border-bottom:none}
.diagram-data .d-pipe-src{
  font-family:var(--sans);font-weight:500;font-size:13.5px;
  color:var(--ink);letter-spacing:-.005em;
}
.diagram-data .d-pipe-action{
  font-family:var(--mono);font-size:11px;
  color:var(--mute);
}
.diagram-data .d-pipe-status{
  font-family:var(--mono);font-size:10.5px;
  padding:3px 10px;border-radius:999px;
  letter-spacing:.04em;text-transform:lowercase;
}
.d-status-ok{
  background:rgba(19,122,82,.10);color:var(--positive);
}
.d-status-warn{
  background:rgba(217,154,37,.12);color:var(--amber);
}
[data-theme="dark"] .d-status-ok{background:rgba(62,203,138,.12);color:var(--positive)}
[data-theme="dark"] .d-status-warn{background:rgba(240,178,64,.14);color:var(--amber)}

.diagram .d-pipe-out{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 0;
}
.diagram .d-pipe-out-label{
  font-family:var(--mono);font-size:11px;
  color:var(--mute);letter-spacing:.04em;text-transform:uppercase;
}
.diagram .d-pipe-out-value{
  font-family:var(--sans);font-weight:500;font-size:13.5px;
  color:var(--ink);letter-spacing:-.005em;
}

/* ---------- TRADE blotter diagram ---------- */
.diagram-trade .d-trade-row{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:12px;align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
}
.diagram-trade .d-trade-row:last-of-type{border-bottom:none}
.diagram-trade .d-trade-side{
  font-family:var(--mono);font-size:10px;font-weight:500;
  padding:4px 8px;border-radius:var(--radius-sm);
  letter-spacing:.06em;
  min-width:46px;text-align:center;
}
.d-side-buy{background:rgba(19,122,82,.10);color:var(--positive)}
.d-side-sell{background:rgba(192,54,74,.10);color:var(--negative)}
.d-side-mon{background:var(--surface-2);color:var(--ink-dim)}
[data-theme="dark"] .d-side-buy{background:rgba(62,203,138,.14);color:var(--positive)}
[data-theme="dark"] .d-side-sell{background:rgba(255,107,128,.14);color:var(--negative)}

.diagram-trade .d-trade-name{
  font-family:var(--sans);font-weight:500;font-size:13.5px;
  color:var(--ink);letter-spacing:-.005em;
}
.diagram-trade .d-trade-status{
  font-family:var(--mono);font-size:10.5px;
  padding:3px 10px;border-radius:999px;
  letter-spacing:.04em;
}

/* ---------- MATCH recon diagram ---------- */
.diagram-match .d-recon-row{
  display:grid;grid-template-columns:1fr auto;
  gap:12px;align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.diagram-match .d-recon-row:last-of-type{border-bottom:none}
.diagram-match .d-recon-src{
  font-family:var(--sans);font-weight:500;font-size:13.5px;
  color:var(--ink);letter-spacing:-.005em;
  display:flex;flex-direction:column;gap:2px;
}
.diagram-match .d-recon-src small{
  font-family:var(--mono);font-size:11px;
  color:var(--mute);font-weight:400;letter-spacing:0;
}
.diagram-match .d-recon-tag{
  font-family:var(--mono);font-size:10.5px;
  padding:4px 10px;border-radius:999px;
  letter-spacing:.04em;
  white-space:nowrap;
}
.d-tag-matched{background:rgba(19,122,82,.10);color:var(--positive)}
.d-tag-break{background:rgba(192,54,74,.10);color:var(--negative)}
.d-tag-resolved{background:var(--surface-2);color:var(--ink-dim);border:1px solid var(--line)}
[data-theme="dark"] .d-tag-matched{background:rgba(62,203,138,.14);color:var(--positive)}
[data-theme="dark"] .d-tag-break{background:rgba(255,107,128,.14);color:var(--negative)}

/* Hero with image, keep this working across all pages */
.hero-with-image .wrap{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:48px;
  align-items:center;
}
@media(max-width:880px){
  .hero-with-image .wrap{grid-template-columns:1fr;gap:32px}
}
.hero-with-image .hero-text{max-width:560px}
.hero-with-image .hero-image{
  display:flex;align-items:stretch;justify-content:center;
}

/* ============================================
   INTERACTIVITY LAYER
   Hover states, transitions, scroll-reveal primitives
   Respects prefers-reduced-motion automatically
   ============================================ */

/* Diagram row hover, subtle highlight on every recon/pipe/trade row */
.diagram .d-recon-row,
.diagram .d-pipe-row,
.diagram .d-trade-row {
  transition: background-color .15s ease, transform .15s ease;
  border-radius: var(--radius-sm);
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
}
.diagram .d-recon-row:hover,
.diagram .d-pipe-row:hover,
.diagram .d-trade-row:hover {
  background: var(--surface-2);
}

/* Optional: subtle pulse on the "break" tag to draw the eye to active states */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.75; }
}
.diagram .d-tag-break,
.diagram .d-status-warn,
.diagram .d-trade-status.d-status-warn {
  animation: pulse-soft 2.4s ease-in-out infinite;
}





@media (prefers-reduced-motion: reduce) {
  .diagram .d-tag-break,
  .diagram .d-status-warn { animation: none; }
}

/* ============================================
   FLOW DIAGRAM (horizontal step-by-step)
   ============================================ */
.flow{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
@media(max-width:880px){.flow{grid-template-columns:1fr}}

.flow-step{
  position:relative;
  padding:28px 24px;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.flow-step:last-child{border-right:none}
@media(max-width:880px){
  .flow-step{border-right:none;border-bottom:1px solid var(--line)}
  .flow-step:last-child{border-bottom:none}
}

/* arrow chevron pointing right between steps */
.flow-step::after{
  content:"";
  position:absolute;
  top:50%;right:-9px;
  width:16px;height:16px;
  background:var(--canvas);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transform:translateY(-50%) rotate(-45deg);
  z-index:2;
}
.flow-step:last-child::after{display:none}
@media(max-width:880px){
  .flow-step::after{
    top:auto;bottom:-9px;right:50%;
    transform:translateX(50%) rotate(45deg);
  }
}

.flow-num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--accent-text);
  text-transform:uppercase;
}
.flow-step h4{
  font-family:var(--sans);
  font-weight:400;
  font-size:18px;
  letter-spacing:-.012em;
  color:var(--ink);
  margin:0;
  line-height:1.25;
}
.flow-step p{
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink-dim);
  margin:0;
}

/* ============================================
   COMPARISON TABLE (before / with)
   ============================================ */
.compare{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
@media(max-width:760px){.compare{grid-template-columns:1fr}}

.compare-head{
  padding:20px 24px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mute);
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.compare-head.label-col{color:var(--ink-dim)}
.compare-head.with-col{
  color:var(--accent-text);
  background:color-mix(in srgb, var(--accent) 5%, var(--surface-2));
}

.compare-row{
  padding:18px 24px;
  border-bottom:1px solid var(--line-soft);
  font-size:14.5px;
  line-height:1.5;
  display:flex;align-items:center;
}
.compare-row:nth-last-child(-n+3){border-bottom:none}
.compare-row.label{
  font-family:var(--mono);
  font-size:12px;
  color:var(--mute);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.compare-row.before{color:var(--ink-dim);position:relative}
.compare-row.before::before{
  content:"×";
  display:inline-block;
  width:18px;height:18px;
  border-radius:50%;
  background:rgba(192,54,74,.12);
  color:var(--negative);
  font-size:13px;font-weight:500;
  text-align:center;line-height:18px;
  margin-right:10px;flex-shrink:0;
}
.compare-row.with{color:var(--ink);font-weight:450}
.compare-row.with::before{
  content:"✓";
  display:inline-block;
  width:18px;height:18px;
  border-radius:50%;
  background:rgba(19,122,82,.12);
  color:var(--positive);
  font-size:11px;font-weight:600;
  text-align:center;line-height:18px;
  margin-right:10px;flex-shrink:0;
}
[data-theme="dark"] .compare-row.before::before{background:rgba(255,107,128,.18)}
[data-theme="dark"] .compare-row.with::before{background:rgba(62,203,138,.18)}

@media(max-width:760px){
  .compare-row{border-bottom:1px solid var(--line-soft)}
  .compare-row:nth-last-child(-n+3){border-bottom:1px solid var(--line-soft)}
  .compare-row:last-child{border-bottom:none}
  .compare-row.label{
    background:var(--surface-2);
    border-bottom:none;
    padding-bottom:6px;
  }
  .compare-row.before{padding-top:8px}
  .compare-row.with{padding-bottom:18px}
}

/* ============================================
   ARCHITECTURE DIAGRAM (home page)
   Inputs row -> 3 module pillars -> outputs row
   ============================================ */
.arch{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:var(--shadow-card);
}
.arch-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:16px;margin-bottom:20px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);
}
.arch-head .left{display:flex;align-items:center;gap:6px}
.arch-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--positive);
  display:inline-block;
}

.arch-band{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);
  margin-bottom:8px;
  text-align:center;
}
.arch-inputs, .arch-outputs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-bottom:12px;
}
.arch-pill{
  padding:10px 8px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-dim);
}
.arch-connector{
  height:24px;
  display:flex;justify-content:center;align-items:center;
  color:var(--mute-2);
  font-size:14px;
}
.arch-connector::after{
  content:"";
  width:1px;height:100%;
  background:var(--line);
}

.arch-modules{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-bottom:0;
}
.arch-module{
  padding:16px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--canvas);
  display:flex;flex-direction:column;gap:6px;
  position:relative;
}
.arch-module-name{
  font-family:var(--sans);font-weight:500;font-size:14px;
  letter-spacing:-.008em;color:var(--ink);
}
.arch-module-sub{
  font-family:var(--mono);font-size:10.5px;
  color:var(--mute);letter-spacing:0;
  line-height:1.4;
}
.arch-module-tag{
  position:absolute;top:10px;right:10px;
  font-family:var(--mono);font-size:9px;
  padding:2px 6px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-text);
  letter-spacing:.06em;text-transform:uppercase;
}

.arch-outputs{margin-top:12px;margin-bottom:0}
.arch-outputs .arch-pill{
  background:color-mix(in srgb, var(--positive) 8%, var(--surface-2));
  color:var(--positive);
  border-color:color-mix(in srgb, var(--positive) 20%, var(--line));
}
[data-theme="dark"] .arch-outputs .arch-pill{
  background:color-mix(in srgb, var(--positive) 14%, var(--surface-2));
}

/* ============================================
   STATS, variant with horizontal style for product pages
   (Existing .stats grid already works for current uses)
   ============================================ */

/* ============================================
   DUNA-INSPIRED DENSITY ADDITIONS
   - Hero badge (above H1)
   - Stat strip (horizontal big-number band)
   - Product showcase (mockup + 4-feature grid)
   ============================================ */

/* Hero badge, small pill above the H1 with a brief credibility line */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--ink-dim);
  margin-bottom:24px;
  text-decoration:none;
  transition:border-color .15s, color .15s;
}
.hero-badge:hover{border-color:var(--mute);color:var(--ink)}
.hero-badge .hb-tag{
  font-family:var(--mono);font-size:10px;
  padding:3px 8px;
  background:var(--accent-soft);color:var(--accent-text);
  border-radius:999px;letter-spacing:.06em;text-transform:uppercase;
}
.hero-badge .hb-arrow{color:var(--mute);font-size:13px}

/* Stat strip, three or four big numbers in one row, no borders, lots of presence */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:48px;
  padding:48px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media(max-width:760px){
  .stat-strip{grid-template-columns:1fr;gap:32px;padding:32px 0}
}
.stat-strip .ss-item{
  display:flex;flex-direction:column;gap:6px;
}
.stat-strip .ss-figure{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(40px, 4.5vw, 56px);
  line-height:1;
  letter-spacing:-.024em;
  color:var(--ink);
}
.stat-strip .ss-figure em{
  font-style:normal;
  font-size:.55em;
  color:var(--ink-dim);
  font-weight:400;
  margin-left:2px;
}
.stat-strip .ss-label{
  font-size:15px;
  color:var(--ink-dim);
  line-height:1.4;
}

/* Compact proof line (centered, between hero and main content) */
.proof-line{
  text-align:center;
  padding:32px 0;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mute);
  border-bottom:1px solid var(--line-soft);
}

/* ---------- PRODUCT SHOWCASE BLOCK ----------
   Big alternating sections, each featuring:
   - Eyebrow + Headline + paragraph + Link (left)
   - Diagram or mockup (right)
   - Four sub-feature grid below the entire two-column
*/
.showcase{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:48px;
  align-items:center;
  margin-bottom:24px;
}
@media(max-width:880px){
  .showcase{grid-template-columns:1fr;gap:32px}
}
.showcase.reverse{
  grid-template-columns:1.1fr 1fr;
}
.showcase.reverse .showcase-text{order:2}
.showcase.reverse .showcase-image{order:1}
@media(max-width:880px){
  .showcase.reverse{grid-template-columns:1fr}
  .showcase.reverse .showcase-text{order:1}
  .showcase.reverse .showcase-image{order:2}
}

.showcase-text .sc-eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:16px;
}
.showcase-text h3{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(22px, 2.3vw, 26px);
  line-height:1.2;letter-spacing:-.014em;
  color:var(--ink);margin:0 0 14px;
}
.showcase-text p{
  font-size:16px;line-height:1.65;
  color:var(--ink-dim);margin:0 0 20px;max-width:480px;
}
.showcase-text .sc-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-weight:500;font-size:14px;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
  transition:color .15s, border-color .15s, gap .15s;
}
.showcase-text .sc-link:hover{
  color:var(--accent-text);
  border-bottom-color:var(--accent-text);
  gap:10px;
}
.showcase-text .sc-link .arrow{font-size:13px}

/* Sub-features below the showcase row */
.showcase-features{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
}
@media(max-width:880px){
  .showcase-features{grid-template-columns:repeat(2, 1fr);gap:20px}
}
@media(max-width:480px){
  .showcase-features{grid-template-columns:1fr}
}
.showcase-features .sf-item{
  display:flex;flex-direction:column;gap:6px;
}
.showcase-features .sf-name{
  font-family:var(--sans);font-weight:500;font-size:14.5px;
  color:var(--ink);letter-spacing:-.005em;
}
.showcase-features .sf-desc{
  font-size:13px;line-height:1.5;
  color:var(--ink-dim);
}

/* Tighten section padding overall (was 56, now 64 with showcase pattern, but defaults stay) */

/* News/blog teaser strip, Duna-style 3-link news mention row */
.news-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media(max-width:760px){.news-strip{grid-template-columns:1fr}}
.news-card{
  display:flex;flex-direction:column;gap:12px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  color:inherit;
  transition:border-color .15s, transform .15s;
}
.news-card:hover{
  color:inherit;
  border-color:var(--mute-2);
  transform:translateY(-2px);
}
.news-card .nc-cat{
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-text);
}
.news-card .nc-title{
  font-family:var(--sans);font-weight:400;font-size:18px;
  line-height:1.3;letter-spacing:-.012em;color:var(--ink);
  margin:0;
}
.news-card .nc-meta{
  font-family:var(--mono);font-size:11px;
  color:var(--mute);letter-spacing:.04em;
}

/* ============================================
   DASHBOARD MOCKUP (hero only)
   A product-UI-looking surface, not an info diagram.
   ============================================ */
.dashboard{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
  font-family:var(--sans);
  display:flex;flex-direction:column;
  width:100%;
}

/* Chrome, like a browser/app tab bar */
.dash-chrome{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  min-height:42px;
}
.dash-tabs{display:flex;gap:4px}
.dash-tab{
  padding:6px 12px;
  font-size:12.5px;
  font-weight:450;
  color:var(--mute);
  border-radius:var(--radius-sm);
  letter-spacing:-.005em;
  transition:background .12s, color .12s;
}
.dash-tab:hover{color:var(--ink-dim)}
.dash-tab.active{
  background:var(--surface);
  color:var(--ink);
  font-weight:500;
  box-shadow:0 1px 2px rgba(15,25,50,.06);
}
[data-theme="dark"] .dash-tab.active{box-shadow:0 1px 2px rgba(0,0,0,.4)}

.dash-status{display:flex;align-items:center}
.dash-live{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--positive);
}
.dash-live-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--positive);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--positive) 15%, transparent);
  animation:dash-pulse 2s ease-in-out infinite;
}
@keyframes dash-pulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  .dash-live-dot{animation:none}
}

/* Body */
.dash-body{
  padding:18px 18px 14px;
  display:flex;flex-direction:column;gap:14px;
}

/* Summary metrics row */
.dash-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.dash-summary-item{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 14px;
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.dash-summary-label{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);
}
.dash-summary-value{
  font-family:var(--sans);font-weight:400;
  font-size:28px;line-height:1;letter-spacing:-.02em;
  color:var(--ink);
  margin-top:2px;
}
.dash-summary-value em{
  font-style:normal;font-size:.55em;
  color:var(--ink-dim);font-weight:400;margin-left:1px;
}
.dash-summary-delta{
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.02em;
  margin-top:4px;
}
.dash-summary-delta.up{color:var(--positive)}
.dash-summary-delta.down{color:var(--positive)}    /* "down" is good here (fewer breaks) */
.dash-summary-delta.steady{color:var(--mute)}

/* Section labels */
.dash-section-label{
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);
  padding:4px 0;
}

/* Activity rows */
.dash-rows{
  display:flex;flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.dash-row{
  display:grid;
  grid-template-columns:50px 1fr auto;
  gap:12px;align-items:center;
  padding:10px 14px;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  transition:background .12s;
}
.dash-row:last-child{border-bottom:none}
.dash-row:hover{background:var(--canvas)}
.dash-row-active{
  background:color-mix(in srgb, var(--negative) 6%, var(--surface));
  position:relative;
}
.dash-row-active::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--negative);
}
[data-theme="dark"] .dash-row-active{
  background:color-mix(in srgb, var(--negative) 10%, var(--surface));
}

.dash-time{
  font-family:var(--mono);
  font-size:11px;
  color:var(--mute);
  letter-spacing:.02em;
}
.dash-event{display:flex;flex-direction:column}
.dash-event-title{
  font-size:13px;font-weight:500;
  color:var(--ink);letter-spacing:-.005em;
  line-height:1.3;
}
.dash-event-title small{
  display:block;
  font-family:var(--mono);font-size:10.5px;font-weight:400;
  color:var(--mute);
  letter-spacing:0;
  margin-top:2px;
}

.dash-pill{
  font-family:var(--mono);
  font-size:10px;font-weight:500;
  padding:4px 9px;
  border-radius:999px;
  letter-spacing:.04em;
  white-space:nowrap;
}
.dash-pill.matched{
  background:color-mix(in srgb, var(--positive) 12%, transparent);
  color:var(--positive);
}
.dash-pill.break{
  background:color-mix(in srgb, var(--negative) 12%, transparent);
  color:var(--negative);
}
.dash-pill.resolved{
  background:var(--surface-2);
  color:var(--ink-dim);
  border:1px solid var(--line);
}
[data-theme="dark"] .dash-pill.matched{background:color-mix(in srgb, var(--positive) 18%, transparent)}
[data-theme="dark"] .dash-pill.break{background:color-mix(in srgb, var(--negative) 18%, transparent)}

/* Agent recommendation footer */
.dash-footer{
  display:flex;flex-direction:column;gap:4px;
  padding:12px 14px;
  background:color-mix(in srgb, var(--accent) 5%, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius:var(--radius);
}
.dash-footer-label{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-text);
  font-weight:500;
}
.dash-footer-text{
  font-size:12.5px;
  color:var(--ink-dim);
  line-height:1.5;
}

/* Responsive, keep dashboard readable on narrow screens */
@media(max-width:880px){
  .dash-summary{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .dash-summary-item{padding:10px 10px}
  .dash-summary-value{font-size:22px}
  .dash-row{grid-template-columns:44px 1fr auto;padding:9px 12px}
  .dash-event-title{font-size:12.5px}
}
@media(max-width:480px){
  .dash-summary{grid-template-columns:repeat(3,1fr)}
  .dash-tab{padding:5px 8px;font-size:11.5px}
}

/* ---------- DASHBOARD MODULES (3-panel row) ---------- */
.dash-modules{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media(max-width:880px){
  .dash-modules{grid-template-columns:1fr;gap:8px}
}

.dash-module{
  padding:12px 14px;
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;flex-direction:column;gap:10px;
}

.dash-module-head{
  display:flex;justify-content:space-between;align-items:center;
}
.dash-module-name{
  font-family:var(--sans);font-weight:500;font-size:13px;
  color:var(--ink);letter-spacing:-.005em;
}
.dash-module-tag{
  font-family:var(--mono);font-size:9px;
  padding:2px 7px;border-radius:999px;
  letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;
}
.dash-module-tag.data{background:var(--accent-soft);color:var(--accent-text)}
.dash-module-tag.trade{
  background:color-mix(in srgb, var(--amber) 14%, transparent);
  color:var(--amber);
}
.dash-module-tag.recon{
  background:color-mix(in srgb, var(--positive) 12%, transparent);
  color:var(--positive);
}
[data-theme="dark"] .dash-module-tag.trade{background:color-mix(in srgb, var(--amber) 20%, transparent)}
[data-theme="dark"] .dash-module-tag.recon{background:color-mix(in srgb, var(--positive) 18%, transparent)}

.dash-module-metric{
  display:flex;align-items:baseline;gap:6px;
  padding-bottom:6px;
  border-bottom:1px solid var(--line-soft);
}
.dash-module-value{
  font-family:var(--sans);font-weight:400;
  font-size:22px;line-height:1;letter-spacing:-.018em;
  color:var(--ink);
}
.dash-module-value em{
  font-style:normal;font-size:.6em;color:var(--ink-dim);font-weight:400;
}
.dash-module-unit{
  font-family:var(--mono);font-size:10px;
  color:var(--mute);letter-spacing:.04em;
  text-transform:lowercase;
}

.dash-module-rows{
  display:flex;flex-direction:column;gap:4px;
}
.dash-mini-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11.5px;
}
.dash-mini-name{
  font-family:var(--sans);
  color:var(--ink-dim);font-weight:450;
}
.dash-mini-status{
  font-family:var(--mono);font-size:10px;
  padding:2px 7px;border-radius:999px;
  letter-spacing:.04em;
}
.dash-mini-status.ok{
  background:color-mix(in srgb, var(--positive) 12%, transparent);
  color:var(--positive);
}
.dash-mini-status.warn{
  background:color-mix(in srgb, var(--amber) 14%, transparent);
  color:var(--amber);
}
.dash-mini-status.break{
  background:color-mix(in srgb, var(--negative) 12%, transparent);
  color:var(--negative);
}
[data-theme="dark"] .dash-mini-status.ok{background:color-mix(in srgb, var(--positive) 18%, transparent)}
[data-theme="dark"] .dash-mini-status.warn{background:color-mix(in srgb, var(--amber) 22%, transparent)}
[data-theme="dark"] .dash-mini-status.break{background:color-mix(in srgb, var(--negative) 18%, transparent)}

/* On very narrow screens, panels stack and become more compact */
@media(max-width:480px){
  .dash-module{padding:10px 12px}
  .dash-module-value{font-size:20px}
}

/* ============================================
   COLOR RHYTHM ENHANCEMENTS
   - Hero gradient mesh background
   - Alternating section backgrounds
   - One dark "ink" section for contrast
   - Confident accent use
   ============================================ */

/* ---------- HERO GRADIENT MESH ----------
   Two subtle radial glows positioned behind the hero.
   Almost imperceptible individually, but together add atmosphere
   without breaking the institutional feel.
*/
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:50%;
  filter:blur(80px);
  opacity:.55;
}
.hero::before{
  /* blue bloom, top-left */
  top:-15%; left:-10%;
  width:540px; height:540px;
  background:radial-gradient(circle, var(--accent-soft), transparent 70%);
}
.hero::after{
  /* amber bloom, bottom-right */
  bottom:-25%; right:-15%;
  width:480px; height:480px;
  background:radial-gradient(circle, color-mix(in srgb, var(--amber) 18%, transparent), transparent 70%);
  opacity:.40;
}
[data-theme="dark"] .hero::before{opacity:.45}
[data-theme="dark"] .hero::after{opacity:.30}

@media(max-width:720px){
  .hero::before{width:340px;height:340px}
  .hero::after{width:300px;height:300px}
}

/* ---------- ALTERNATING SECTION BACKGROUNDS ---------- */
section.section.section-alt{
  background:var(--surface-2);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
/* When two alt sections are adjacent, give them a more visible divider so they feel distinct */
section.section.section-alt + section.section.section-alt{
  border-top:1px solid var(--line);
}
[data-theme="dark"] section.section.section-alt{
  background:var(--surface-2);
}

/* ---------- DARK INVERTED BAND ----------
   For the stat strip, flips to ink-dark with bright numbers.
   Creates a "money shot" moment without garish color.
*/
.section-tight.invert{
  background:var(--fs-slate);
  color:var(--fs-on-dark);
  padding:44px 0;
  border-top:none;
  border-bottom:none;
  margin:24px 0;
  border-radius:var(--radius-lg);
  position:relative;
  overflow:hidden;
}
/* subtle accent glow inside the inverted band */
.section-tight.invert::before{
  content:"";
  position:absolute;
  top:50%;left:0;
  transform:translateY(-50%);
  width:60%;height:200%;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%);
  pointer-events:none;
  opacity:.6;
}
.section-tight.invert > *{position:relative;z-index:1}

.section-tight.invert .stat-strip{
  border-top:none;
  border-bottom:none;
  padding:0;
}
.section-tight.invert .ss-figure{
  color:#ffffff;
  background:linear-gradient(180deg, #ffffff, color-mix(in srgb, #ffffff 70%, var(--accent)));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section-tight.invert .ss-figure em{
  color:rgba(255,255,255,.55);
  -webkit-text-fill-color:rgba(255,255,255,.55);
}
.section-tight.invert .ss-label{
  color:rgba(255,255,255,.65);
}

/* Wrap the invert band so it doesn't span full bleed */
.section-tight.invert .wrap{
  background:transparent;
}

/* Adjust the wrap container so the invert band sits inside it visually */
.invert-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
@media(max-width:720px){
  .invert-wrap{padding:0 20px}
  .section-tight.invert{margin:24px 0;padding:40px 0}
}

/* ---------- CONFIDENT ACCENT USAGE ---------- */

/* Section eyebrow, give it more presence than before */
.section-head .eyebrow-color{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:14px;
  font-weight:500;
}
.section-head .eyebrow-color::before{
  content:"";
  width:18px;height:1px;
  background:var(--accent);
  display:inline-block;
}
.faq-kicker{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:-6px 0 12px;
}
.section-head.centered .faq-kicker{
  text-align:center;
}

/* Stronger hover state on product cards, accent border on hover */
.product-card:hover{
  border-color:var(--accent);
  box-shadow:
    0 4px 12px rgba(15,25,50,.06),
    0 24px 48px -16px rgba(15,25,50,.12),
    0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-theme="dark"] .product-card:hover{
  box-shadow:
    0 6px 18px rgba(0,0,0,.5),
    0 32px 64px -16px rgba(0,0,0,.7),
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Stronger arrow color in product card hover */
.product-card:hover .pc-arrow{
  color:var(--accent-text);
}

/* Buttons, slight accent presence on the primary hover */
.btn-primary{
  position:relative;
  overflow:hidden;
}
.btn-primary::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg, var(--accent), transparent 60%);
  opacity:0;
  transition:opacity .25s;
}
.btn-primary:hover::before{opacity:.25}
.btn-primary > *{position:relative;z-index:1}

/* Hero badge, slightly more presence */
.hero-badge{
  background:color-mix(in srgb, var(--accent) 4%, var(--surface));
  border-color:color-mix(in srgb, var(--accent) 15%, var(--line));
}
.hero-badge:hover{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 7%, var(--surface));
}

/* Compare table header for "with" column, slightly stronger accent fill */
.compare-head.with-col{
  background:color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  color:var(--accent-text);
}

/* Showcase eyebrow color, more confidence */
.showcase-text .sc-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent-text);
  font-weight:500;
}
.showcase-text .sc-eyebrow::before{
  content:"";
  width:18px;height:1px;
  background:var(--accent);
}

/* Flow step numbers, accent color (already there, just bolder) */
.flow-num{
  color:var(--accent-text);
  font-weight:500;
}

/* Footer column headers, slight accent on hover */
.footer-col a:hover{
  color:var(--accent-text);
}

/* Section dividers, replace plain line-soft with a subtle accent-tinted line in some places */
.cta-band{
  background:linear-gradient(180deg, var(--canvas), color-mix(in srgb, var(--accent) 3%, var(--surface-2)));
}

/* Dashboard live dot, make the pulse glow more present */
.dash-live-dot{
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--positive) 20%, transparent),
    0 0 12px color-mix(in srgb, var(--positive) 40%, transparent);
}


/* ============================================
   v5 HOME REBUILD, Clearwater-inspired patterns
   ============================================ */

/* ---------- ANNOUNCEMENT BAR (top, above nav) ---------- */
.announce{
  background:var(--fs-slate);
  color:var(--fs-on-dark);
  padding:10px 0;
  font-size:13px;
  text-align:center;
}
.announce .wrap{
  display:flex;align-items:center;justify-content:center;position:relative;
}
.ann-close{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:transparent;border:none;color:rgba(255,255,255,.5);
  font-size:18px;line-height:1;cursor:pointer;padding:4px 8px;
  transition:color .15s;
}
.ann-close:hover{color:#fff}
.announce a{
  color:var(--fs-on-dark);
  text-decoration:none;
  display:inline-flex;align-items:center;gap:14px;
  flex-wrap:wrap;justify-content:center;
}
.announce .ann-tag{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.12);
  color:var(--fs-on-dark);
}
.announce .ann-text{color:rgba(255,255,255,.85)}
.announce .ann-cta{
  color:var(--fs-on-dark);
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:1px;
  transition:border-color .15s;
}
.announce a:hover .ann-cta{border-bottom-color:#fff}
@media(max-width:560px){
  .announce{font-size:12px;padding:8px 0}
}

/* ---------- HERO REBUILD (editorial, no dashboard) ---------- */
.hero-editorial{
  position:relative;
  padding:64px 0 72px;
  isolation:isolate;
  overflow:hidden;
}
.hero-editorial::before,
.hero-editorial::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:50%;
  filter:blur(100px);
}
.hero-editorial::before{
  top:-30%; left:-15%;
  width:700px; height:700px;
  background:radial-gradient(circle, var(--accent-soft), transparent 65%);
  opacity:.6;
}
.hero-editorial::after{
  bottom:-40%; right:-20%;
  width:600px; height:600px;
  background:radial-gradient(circle, color-mix(in srgb, var(--amber) 18%, transparent), transparent 65%);
  opacity:.45;
}
[data-theme="dark"] .hero-editorial::before{opacity:.45}
[data-theme="dark"] .hero-editorial::after{opacity:.30}
@media(max-width:720px){
  .hero-editorial{padding:40px 0 48px}
  .hero-editorial::before{width:400px;height:400px}
  .hero-editorial::after{width:340px;height:340px}
}

.hero-editorial-inner{
  text-align:center;
  max-width:920px;
  margin:0 auto;
}
.hero-pretitle{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:24px;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
}
.hero-headline{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(34px, 4.6vw, 56px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 20px;
  text-wrap:balance;
}
.hero-headline em{
  font-style:italic;
  font-weight:400;
  color:var(--ink-2);
  font-feature-settings:"calt", "liga";
}
.hero-subheadline{
  font-family:var(--sans);
  font-weight:450;
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.45;
  letter-spacing:-.005em;
  color:var(--ink-dim);
  margin:0 auto 24px;
  max-width:680px;
  text-wrap:balance;
}
.hero-lead{
  font-size:18px;
  line-height:1.55;
  color:var(--ink-dim);
  margin:0 auto 28px;
  max-width:580px;
}
.hero-ctas-center{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
}

/* ---------- PROBLEM CARDS (3-column, replaces overview + compare + showcase combos) ---------- */
.problems{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media(max-width:880px){
  .problems{grid-template-columns:1fr}
}

.problem-card{
  display:flex;flex-direction:column;gap:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color .2s, transform .2s, box-shadow .2s;
  color:inherit;
}
.problem-card:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
  color:inherit;
}

.problem-card .pain{
  padding:20px 24px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.problem-card .pain-label{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--negative);
  margin-bottom:6px;
  display:inline-flex;align-items:center;gap:6px;
}
.problem-card .pain-label::before{
  content:"";
  width:5px;height:5px;border-radius:50%;
  background:var(--negative);
  display:inline-block;
}
.problem-card .pain-text{
  font-family:var(--sans);
  font-size:14px;font-weight:450;
  line-height:1.4;
  color:var(--ink);
  letter-spacing:-.005em;
}

.problem-card .solve{
  padding:24px;
  display:flex;flex-direction:column;gap:14px;
  flex:1;
}
.problem-card .solve-label{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-text);
  display:inline-flex;align-items:center;gap:6px;
}
.problem-card .solve-label::before{
  content:"";
  width:5px;height:5px;border-radius:50%;
  background:var(--positive);
  display:inline-block;
}
.problem-card .solve h3{
  font-family:var(--sans);font-weight:500;
  font-size:24px;line-height:1.15;
  letter-spacing:-.016em;
  color:var(--ink);
  margin:0;
}
.problem-card .solve p{
  font-size:14.5px;line-height:1.55;
  color:var(--ink-dim);
  margin:0;
  flex:1;
}
.problem-card .solve-meta{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:4px;
}
.problem-card .solve-meta span{
  font-family:var(--mono);font-size:10.5px;
  padding:3px 8px;border-radius:999px;
  background:var(--canvas);
  border:1px solid var(--line);
  color:var(--ink-dim);
  letter-spacing:.02em;
}
.problem-card .solve-link{
  font-family:var(--sans);
  font-size:13.5px;font-weight:500;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;
  margin-top:4px;
  transition:gap .15s, color .15s;
}
.problem-card:hover .solve-link{
  gap:10px;
  color:var(--accent-text);
}

/* ---------- WORKFLOW BAND (single visual: how it all connects) ---------- */
.workflow-band{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto 1fr auto;
  align-items:center;
  gap:0;
  padding:32px 28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
@media(max-width:880px){
  .workflow-band{
    grid-template-columns:1fr;
    padding:24px;
    gap:8px;
  }
}

.workflow-band .wb-node{
  display:flex;flex-direction:column;gap:6px;
  align-items:center;
  text-align:center;
  padding:0 16px;
}
.workflow-band .wb-node-icon{
  width:48px;height:48px;
  border-radius:var(--radius);
  background:var(--surface-2);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);
  font-size:18px;font-weight:500;
  color:var(--accent-text);
  margin-bottom:4px;
}
.workflow-band .wb-node-name{
  font-family:var(--sans);
  font-weight:500;font-size:14px;
  color:var(--ink);
  letter-spacing:-.005em;
}
.workflow-band .wb-node-sub{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--mute);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.workflow-band .wb-arrow{
  font-family:var(--mono);
  font-size:18px;
  color:var(--mute-2);
  line-height:1;
  padding:0 4px;
}
@media(max-width:880px){
  .workflow-band .wb-arrow{
    transform:rotate(90deg);
    padding:4px 0;
  }
}

/* ---------- TRUST BAND (founders quote + logo wall) ---------- */
.trust-band{
  display:flex;flex-direction:column;gap:32px;
  text-align:center;
}
.trust-quote{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(22px, 2.4vw, 28px);
  line-height:1.4;
  letter-spacing:-.014em;
  color:var(--ink);
  max-width:760px;
  margin:0 auto;
  text-wrap:balance;
}
.trust-quote em{
  font-style:italic;
  color:var(--ink-dim);
}
.trust-attribution{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mute);
}
.trust-attribution a{color:var(--mute);border-bottom:1px solid transparent;transition:color .15s, border-color .15s}
.trust-attribution a:hover{color:var(--ink-dim);border-bottom-color:var(--mute-2)}

.logo-wall{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:16px;
  padding:32px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
@media(max-width:760px){
  .logo-wall{grid-template-columns:repeat(3, 1fr);padding:24px}
}
@media(max-width:480px){
  .logo-wall{grid-template-columns:repeat(2, 1fr);gap:12px}
}
.logo-slot{
  aspect-ratio:5/2;
  background:var(--surface-2);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mute-2);
  transition:border-color .15s;
}
.logo-slot:hover{border-color:var(--mute)}

/* ---------- LATEST POSTS (3-card row, blog teasers) ---------- */
.latest-posts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media(max-width:880px){
  .latest-posts{grid-template-columns:1fr}
}

.latest-card{
  display:flex;flex-direction:column;gap:14px;
  padding:28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  color:inherit;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.latest-card:hover{
  color:inherit;
  border-color:var(--mute-2);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lift);
}
.latest-card .lc-meta{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.latest-card .lc-cat{color:var(--accent-text)}
.latest-card .lc-time{color:var(--mute)}
.latest-card .lc-time::before{
  content:"·";
  margin-right:6px;
}
.latest-card h3{
  font-family:var(--sans);font-weight:500;
  font-size:20px;line-height:1.25;
  letter-spacing:-.014em;
  color:var(--ink);
  margin:0;
}
.latest-card p{
  font-size:14px;line-height:1.55;
  color:var(--ink-dim);
  margin:0;
  flex:1;
}
.latest-card .lc-read{
  font-family:var(--sans);
  font-size:13px;font-weight:500;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;
  margin-top:4px;
  transition:gap .15s, color .15s;
}
.latest-card:hover .lc-read{
  gap:10px;
  color:var(--accent-text);
}

/* ---------- SECTION-HEAD VARIANT FOR CENTERED LAYOUTS ---------- */
.section-head.centered{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.section-head.centered .eyebrow-color{
  justify-content:center;
}
.section-head.centered p{
  margin-left:auto;
  margin-right:auto;
}

/* ---------- COMPACT FAQ (post-CTA placement) ---------- */
.faq-compact{
  max-width:760px;
  margin:0 auto;
}


/* ============================================
   v6 HOME REBUILD, Ridgeline + Clearwater inspired
   Stripped of: AI hero framing, logo wall, fake quotes
   ============================================ */

/* ---------- MODULE CARDS (Ridgeline-style row) ---------- */
.modules-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media(max-width:880px){
  .modules-row{grid-template-columns:1fr}
}

.module-card{
  display:flex;flex-direction:column;gap:16px;
  padding:32px 28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  color:inherit;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.module-card:hover{
  color:inherit;
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
}

.module-mark{
  width:52px;height:52px;
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);
  font-size:24px;font-weight:600;
  letter-spacing:-.02em;
  background:var(--surface-2);
  border:1px solid var(--line);
  margin-bottom:4px;
}
.module-mark.data-mark{
  background:var(--accent-soft);
  color:var(--accent-text);
  border-color:color-mix(in srgb, var(--accent) 20%, var(--line));
}
.module-mark.trade-mark{
  background:color-mix(in srgb, var(--amber) 14%, transparent);
  color:var(--amber);
  border-color:color-mix(in srgb, var(--amber) 25%, var(--line));
}
.module-mark.recon-mark{
  background:color-mix(in srgb, var(--positive) 12%, transparent);
  color:var(--positive);
  border-color:color-mix(in srgb, var(--positive) 22%, var(--line));
}

.module-label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mute);
}
.module-card h3{
  font-family:var(--sans);font-weight:600;
  font-size:26px;line-height:1.15;
  letter-spacing:-.018em;
  color:var(--ink);
  margin:0;
}
.module-card p{
  font-size:15px;line-height:1.55;
  color:var(--ink-dim);
  margin:0;
  flex:1;
}
.module-tags{
  display:flex;flex-wrap:wrap;gap:6px;
}
.module-tags span{
  font-family:var(--mono);
  font-size:10.5px;
  padding:3px 9px;
  border-radius:999px;
  background:var(--canvas);
  border:1px solid var(--line);
  color:var(--ink-dim);
  letter-spacing:.02em;
}
.module-link{
  font-family:var(--sans);
  font-size:13.5px;font-weight:500;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;
  margin-top:4px;
  transition:gap .15s, color .15s;
}
.module-card:hover .module-link{
  gap:10px;
  color:var(--accent-text);
}

/* ---------- "WHAT YOU CAN EXPECT" PROMISE BLOCK ---------- */
.expect-block{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:48px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:48px;
  box-shadow:var(--shadow-card);
}
@media(max-width:880px){
  .expect-block{
    grid-template-columns:1fr;
    gap:32px;
    padding:32px 28px;
  }
}

.expect-intro h3{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(26px, 3vw, 34px);
  line-height:1.1;letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 16px;
}
.expect-intro p{
  font-size:16px;line-height:1.6;
  color:var(--ink-dim);
  margin:0;
}

.expect-outcomes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 32px;
}
@media(max-width:560px){
  .expect-outcomes{grid-template-columns:1fr}
}

.outcome{
  display:flex;flex-direction:column;gap:6px;
  padding-left:18px;
  border-left:2px solid var(--accent);
}
.outcome .outcome-title{
  font-family:var(--sans);
  font-weight:500;
  font-size:15px;
  color:var(--ink);
  letter-spacing:-.005em;
  line-height:1.3;
}
.outcome .outcome-detail{
  font-size:13.5px;line-height:1.5;
  color:var(--ink-dim);
}

/* ---------- "SCALING PORTFOLIOS" SECTION ---------- */
.scaling-block{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:64px;
  align-items:start;
}
@media(max-width:880px){
  .scaling-block{
    grid-template-columns:1fr;
    gap:40px;
  }
}

.scaling-text h2{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 20px;
  text-wrap:balance;
}
.scaling-text p{
  font-size:17px;line-height:1.55;
  color:var(--ink-dim);
  margin:0 0 24px;
}

.scaling-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
}
@media(max-width:560px){
  .scaling-list{grid-template-columns:1fr}
}
.scaling-list .item{
  padding:16px 20px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
  font-size:14px;
  color:var(--ink);
}
.scaling-list .item .num{
  font-family:var(--mono);
  font-size:11px;
  color:var(--mute);
  letter-spacing:.04em;
}


/* ============================================
   NEW LOGO STYLING (cyan ⌘ mark)
   ============================================ */
.logo-mark-svg{
  width:28px;
  height:28px;
  color:var(--accent);
  flex-shrink:0;
  display:block;
}
.footer-brand .logo-mark-svg{
  width:28px;
  height:28px;
}
/* The wordmark text "ForeStrat" stays in ink color; .tld stays mute */


/* ============================================
   HERO 2-COLUMN with LIVE DASHBOARD
   ============================================ */
.hero-with-visual .hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
@media(max-width:880px){
  .hero-with-visual .hero-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
}
.hero-text-col{max-width:560px}
.hero-with-visual .hero-headline{
  font-size:clamp(30px, 3.8vw, 48px);
  letter-spacing:-.018em;
}
.hero-with-visual .hero-subheadline{margin-bottom:18px}
.hero-with-visual .hero-lead{margin:0 0 28px;max-width:540px;text-align:left}
.hero-ctas-row{
  display:flex;gap:12px;flex-wrap:wrap;
}
@media(max-width:880px){
  .hero-with-visual .hero-headline,
  .hero-with-visual .hero-subheadline,
  .hero-with-visual .hero-lead,
  .hero-with-visual .hero-pretitle{text-align:left}
  .hero-text-col{max-width:none}
}

/* ============================================
   LIVE DASHBOARD (animated)
   ============================================ */
.live-dash{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
  font-family:var(--sans);
  overflow:hidden;
  display:flex;flex-direction:column;
  position:relative;
}

/* Subtle ambient cyan glow behind the dashboard */
.live-dash::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%);
  z-index:-1;
  pointer-events:none;
  filter:blur(40px);
}

/* CHROME */
.ld-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.ld-tabs{display:flex;gap:4px}
.ld-tab{
  padding:5px 11px;
  font-size:12px;font-weight:500;
  color:var(--mute);
  border-radius:var(--radius-sm);
  letter-spacing:-.003em;
  transition:all .15s;
}
.ld-tab.active{
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(15,25,50,.06);
}
[data-theme="dark"] .ld-tab.active{box-shadow:0 1px 2px rgba(0,0,0,.4)}

.ld-live{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-text);
  font-weight:500;
}
.ld-live-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  animation:ld-pulse 2s ease-in-out infinite;
}
@keyframes ld-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.65;transform:scale(.85)}
}

/* KPI ROW */
.ld-kpis{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:14px 14px 0;
}
.ld-kpi{
  padding:12px 14px;
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;flex-direction:column;gap:4px;
  position:relative;
}
.ld-kpi-label{
  font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);
}
.ld-kpi-value{
  font-family:var(--sans);font-weight:600;
  font-size:24px;line-height:1;
  color:var(--ink);
  letter-spacing:-.018em;
}
.ld-kpi-value em{
  font-style:normal;font-weight:500;font-size:.55em;
  color:var(--ink-dim);margin-left:1px;
}
.ld-kpi-delta{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.02em;
}
.ld-kpi-delta.up{color:var(--positive)}

/* Sparkline */
.ld-spark{
  position:absolute;
  right:14px;bottom:12px;
  width:80px;height:24px;
  color:var(--accent);
}
.ld-spark-line{
  stroke-dasharray:300;
  stroke-dashoffset:300;
  animation:ld-draw 1.8s ease-out forwards;
}
@keyframes ld-draw{
  to{stroke-dashoffset:0}
}
.ld-spark-fill{
  opacity:0;
  animation:ld-fade 1.8s ease-out forwards;
  animation-delay:.4s;
}
@keyframes ld-fade{
  to{opacity:.12}
}

/* SECTION LABEL */
.ld-section-label{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);
  padding:14px 14px 6px;
}

/* ROWS */
.ld-rows{
  display:flex;flex-direction:column;
  margin:0 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--canvas);
}
.ld-row{
  display:grid;grid-template-columns:42px 1fr auto;gap:10px;
  padding:9px 12px;
  align-items:center;
  border-bottom:1px solid var(--line-soft);
  font-size:12.5px;
  position:relative;
  animation:ld-row-in .5s ease-out backwards;
}
.ld-row:last-child{border-bottom:none}
.ld-row:nth-child(1){animation-delay:.1s}
.ld-row:nth-child(2){animation-delay:.25s}
.ld-row:nth-child(3){animation-delay:.4s}
.ld-row:nth-child(4){animation-delay:.55s}
@keyframes ld-row-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

.ld-row-break{
  background:color-mix(in srgb, var(--negative) 5%, transparent);
}
.ld-row-break::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--negative);
}

.ld-time{
  font-family:var(--mono);font-size:10.5px;
  color:var(--mute);
}
.ld-event{display:flex;flex-direction:column;gap:1px;min-width:0}
.ld-event-title{
  font-size:12.5px;font-weight:500;
  color:var(--ink);letter-spacing:-.003em;
}
.ld-event-sub{
  font-family:var(--mono);font-size:10.5px;
  color:var(--mute);letter-spacing:0;
  display:flex;align-items:center;gap:6px;
}

/* Progress bar inside a row */
.ld-progress{
  display:inline-block;
  width:36px;height:3px;
  border-radius:99px;
  background:var(--line);
  overflow:hidden;
  vertical-align:middle;
}
.ld-progress-bar{
  display:block;
  height:100%;
  background:var(--accent);
  border-radius:99px;
  animation:ld-progress 3.2s ease-in-out infinite;
  width:30%;
}
@keyframes ld-progress{
  0%{width:15%}
  50%{width:85%}
  100%{width:15%}
}

/* Pills */
.ld-pill{
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  padding:3px 8px;border-radius:99px;
  letter-spacing:.04em;
  white-space:nowrap;
}
.ld-pill.matched{
  background:color-mix(in srgb, var(--positive) 12%, transparent);
  color:var(--positive);
}
.ld-pill.break{
  background:color-mix(in srgb, var(--negative) 12%, transparent);
  color:var(--negative);
  animation:ld-pulse-break 2.4s ease-in-out infinite;
}
@keyframes ld-pulse-break{
  0%,100%{opacity:1}
  50%{opacity:.7}
}
.ld-pill.working{
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent-text);
}

/* Footer agent recommendation */
.ld-footer{
  margin:14px;
  padding:11px 14px;
  background:color-mix(in srgb, var(--accent) 5%, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius:var(--radius);
  display:flex;gap:10px;align-items:flex-start;
  animation:ld-row-in .5s ease-out backwards;
  animation-delay:.8s;
}
.ld-footer-label{
  font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-text);
  padding:2px 6px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius:var(--radius-sm);
  flex-shrink:0;
}
.ld-footer-text{
  font-size:12px;
  color:var(--ink-dim);
  line-height:1.45;
}

/* Reduced motion override */
@media (prefers-reduced-motion:reduce){
  .ld-live-dot,
  .ld-pill.break,
  .ld-progress-bar,
  .ld-spark-line,
  .ld-spark-fill,
  .ld-row,
  .ld-footer{
    animation:none;
  }
  .ld-spark-line{stroke-dashoffset:0}
  .ld-spark-fill{opacity:.12}
}

/* Responsive, dashboard tightens on narrow viewports */
@media(max-width:560px){
  .ld-kpi-value{font-size:20px}
  .ld-spark{width:60px;height:20px}
  .ld-row{grid-template-columns:38px 1fr auto;font-size:12px}
}