* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg:    #f7f7f4;
  --section-bg: #f1f1ed;
  --img-bg: #e6e5e0;
  --ink:   #111110;
  --ink-2: #3A3A36;
  --ink-3: #7A7A72;
  --dash:  rgba(17,17,16,0.18);
  --white: #FFFFFF;
  --brand-dark: #1e3a5f;
  --brand-mid:  #1e40af;
  --brand-light:#60a5fa;
}
body { background: var(--bg); color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; }

/* UTILS */
.dash-rule { border: none; border-top: 1.5px dashed var(--dash); margin: 0; }
.pill-label { display: inline-block; border: 1px solid rgba(17,17,16,0.22); border-radius: 100px; padding: 5px 14px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: transparent; }
.pill-label-center { display: inline-block; border: 1px solid rgba(17,17,16,0.22); border-radius: 100px; padding: 5px 16px; font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--bg); }

/* SEO/AEO support content */
.breadcrumb-nav {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 40px 0;
  font-size: 12px;
  color: var(--ink-3);
}
.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.breadcrumb-list li + li::before {
  content: "/";
  margin-right: 8px;
  color: rgba(17,17,16,0.28);
}
.breadcrumb-list a {
  color: var(--ink-2);
  text-decoration: none;
}
.breadcrumb-list a:hover { color: var(--ink); }

.faq-section {
  padding: 72px 40px;
}
.faq-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.faq-header {
  text-align: left;
  position: sticky;
  top: 96px;
}
.faq-h {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink);
  margin: 14px 0;
}
.faq-sub {
  font-size: 15px;
  color: var(--ink-2);
  font-weight: 300;
  line-height: 1.7;
  max-width: 390px;
  margin: 0;
}
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: #fff;
  border: 1px solid rgba(17,17,16,0.07);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 1px 4px rgba(17,17,16,0.04);
  overflow: hidden;
}
.faq-item h3 {
  margin: 0;
}
.faq-trigger {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  color: var(--ink);
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.faq-trigger span:first-child {
  max-width: 92%;
}
.faq-icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  border: 1px solid rgba(17,17,16,0.12);
  background: #f7f7f4;
  transition: background var(--motion-fast, 180ms) ease, border-color var(--motion-fast, 180ms) ease, transform var(--motion-med, 360ms) var(--ease-premium, ease);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1.5px;
  border-radius: 2px;
  background: #1e3a5f;
  transform: translateY(-50%);
  transition: transform var(--motion-med, 360ms) var(--ease-premium, ease), opacity var(--motion-fast, 180ms) ease;
}
.faq-icon::after {
  transform: translateY(-50%) rotate(90deg);
}
.faq-item.is-open .faq-icon {
  background: #dbeafe;
  border-color: #60a5fa;
  transform: rotate(180deg);
}
.faq-item.is-open .faq-icon::after {
  opacity: 0;
  transform: translateY(-50%) rotate(0deg);
}
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--motion-med, 360ms) var(--ease-premium, ease), opacity var(--motion-fast, 180ms) ease;
}
.faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq-panel-inner {
  overflow: hidden;
}
.faq-panel p {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.65;
  font-weight: 300;
  padding: 0 22px 22px;
  margin: -2px 0 0;
}

/* NAV */
/* old nav rule removed */
.nav-right { display: flex; align-items: center; gap: 12px; }
.btn-ghost-sm { font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 7px 16px; border-radius: 5px; border: 1.5px solid transparent; transition: border-color .15s; }
.btn-ghost-sm:hover { border-color: var(--dash); }
.btn-solid-sm { background: var(--ink); color: var(--white); font-size: 14px; font-weight: 500; text-decoration: none; padding: 8px 20px; border-radius: 6px; transition: opacity .15s; }
.btn-solid-sm:hover { opacity: .82; }

/* HERO */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; overflow: hidden; }
.hero-left { padding: 56px 48px 56px 40px; display: flex; flex-direction: column; justify-content: center; }
.hero-left .pill-label { margin-bottom: 24px; }
.hero-h1 { font-family: 'Instrument Serif', serif; font-size: clamp(40px, 5vw, 68px); font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 24px; }
.hero-h1 em { font-style: italic; }
hr.hero-dash { border: none; border-top: 1.5px dashed var(--dash); margin-bottom: 20px; }
.hero-sub { font-size: 16px; font-weight: 300; color: var(--ink-2); line-height: 1.7; max-width: 440px; margin-bottom: 32px; }
.hero-btns { display: flex; gap: 12px; align-items: center; }
.btn-outline { display: inline-block; text-decoration: none; border: 1.5px solid var(--ink); color: var(--ink); padding: 10px 22px; border-radius: 6px; font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-solid { display: inline-block; text-decoration: none; background: var(--ink); color: var(--white); padding: 11px 24px; border-radius: 6px; font-size: 14px; font-weight: 500; transition: opacity .15s; }
.btn-solid:hover { opacity: .82; }
.hero-right { position: relative; overflow: hidden; }
.hero-painting { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 60%, rgba(160,180,120,0.7) 0%, transparent 55%), radial-gradient(ellipse at 75% 25%, rgba(200,160,90,0.5) 0%, transparent 50%), radial-gradient(ellipse at 55% 85%, rgba(100,130,160,0.5) 0%, transparent 50%), linear-gradient(160deg, #C8D4B4 0%, #A8B890 35%, #8AA880 55%, #7090A0 100%); }
.hero-screenshot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 82%; background: var(--white); border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06); overflow: hidden; }
.ss-bar { background: #F0EEE8; padding: 10px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(0,0,0,0.07); }
.ss-dot { width: 9px; height: 9px; border-radius: 50%; }
.ss-title { font-size: 11px; color: #999; font-weight: 500; letter-spacing: 0.08em; margin-left: 4px; }
.ss-body { padding: 18px; }
.ss-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ss-top-row h4 { font-size: 13px; font-weight: 600; color: var(--ink); }
.live-tag { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #2A7A3A; text-transform: uppercase; letter-spacing: 0.08em; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #2A7A3A; animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.ss-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.ss-tab { font-size: 11px; padding: 4px 10px; border-radius: 4px; font-weight: 500; color: var(--ink-3); background: transparent; cursor: pointer; border: 1px solid transparent; }
.ss-tab.active { background: var(--ink); color: var(--white); }
.vendor-list { display: flex; flex-direction: column; gap: 8px; }
.v-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #F7F5F0; font-size: 12px; }
.v-rank { font-weight: 700; color: var(--ink-3); width: 16px; text-align: center; font-size: 11px; }
.v-name { flex: 1; font-weight: 600; color: var(--ink); }
.v-type { font-size: 10px; color: var(--ink-3); font-weight: 400; margin-left: 2px; }
.v-bar-bg { width: 64px; height: 4px; background: #E0DDD8; border-radius: 9px; overflow: hidden; }
.v-bar-fill { height: 100%; border-radius: 9px; }
.fill-g { background: #7FB88C; }
.fill-b { background: #93c5fd; }
.fill-r { background: #E5A099; }
.v-score { font-size: 11px; font-weight: 700; width: 28px; text-align: right; }
.score-r { color: #C04040; }
.ss-alert { margin-top: 12px; padding: 10px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 7px; font-size: 11px; color: #1e3a5f; line-height: 1.5; }
.ss-alert strong { font-weight: 600; }

/* LOGO BAR */
.logo-bar { padding: 36px 40px 32px; text-align: center; background: var(--bg); }
.logo-bar-label { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-bottom: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.logo-row { display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; }
.logo-item { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; color: rgba(17,17,16,0.28); letter-spacing: 0.04em; white-space: nowrap; }
.logo-item.bold { color: rgba(17,17,16,0.6); font-weight: 700; }

/* 3-COL */
.three-up { padding: 56px 40px 52px; }
.three-up-head { font-family: 'Instrument Serif', serif; font-size: clamp(28px, 3.5vw, 46px); font-weight: 400; line-height: 1.15; text-align: center; max-width: 620px; margin: 0 auto 48px; color: var(--ink); }
.three-up-head em { font-style: italic; }
.three-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
.three-card-img { height: 240px; border-radius: 12px 12px 0 0; position: relative; overflow: hidden; border: 1px solid rgba(17,17,16,0.07); border-bottom: none; }
.paint-sage { background: linear-gradient(145deg, #1e3a5f 0%, #1e40af 80%, #2050c0 100%); }
.paint-dusk { background: linear-gradient(145deg, #2d3a5e 0%, #1e3050 80%, #161e38 100%); }
.paint-amber { background: linear-gradient(145deg, #1a3040 0%, #162535 80%, #0f1825 100%); }
.three-card-ui { position: absolute; z-index: 2; background: var(--white); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); overflow: hidden; top: 24px; left: 16px; right: 16px; }
.mini-ui-bar { background: #F0EEE8; padding: 7px 12px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.mini-dot { width: 7px; height: 7px; border-radius: 50%; }
.mini-title { font-size: 9px; color: #AAA; font-weight: 500; letter-spacing: 0.08em; margin-left: 2px; }
.mini-body { padding: 12px; }
.c-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid #F0EEE8; font-size: 11px; }
.c-row:last-child { border-bottom: none; }
.c-label { color: var(--ink-2); font-weight: 500; }
.c-val-g { color: #2A7A3A; font-weight: 700; }
.c-val-r { color: #C04040; font-weight: 700; }
.alloc-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 10px; }
.alloc-label { color: var(--ink-2); flex: 1; font-weight: 500; }
.alloc-bar-bg { width: 60px; height: 5px; background: #E8E5DF; border-radius: 9px; overflow: hidden; }
.alloc-fill { height: 100%; border-radius: 9px; }
.alloc-val { font-weight: 700; color: var(--ink); font-size: 10px; width: 24px; text-align: right; }
.cost-big { font-family: 'Instrument Serif', serif; font-size: 26px; font-weight: 400; color: var(--ink); line-height: 1; margin-bottom: 2px; }
.cost-label { font-size: 10px; color: var(--ink-3); font-weight: 500; margin-bottom: 10px; }
.cost-trend { display: flex; gap: 4px; align-items: flex-end; }
.cost-bar { width: 12px; border-radius: 2px 2px 0 0; background: #D0CCC4; }
.cost-bar.hi { background: #7FB88C; }
.three-card-text { padding: 20px 18px 4px; background: var(--white); border: 1px solid rgba(17,17,16,0.07); border-top: none; border-radius: 0 0 12px 12px; box-shadow: 0 2px 8px rgba(17,17,16,0.04); }
.three-card-text h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.three-card-text p { font-size: 13.5px; color: var(--ink-3); line-height: 1.65; font-weight: 300; }

/* ═══ INTERACTIVE PERSONA SECTIONS ═══ */
.persona-section { padding: 60px 40px; max-width: 1200px; margin: 0 auto; }
.persona-intro { text-align: center; margin-bottom: 36px; }
.persona-intro .pill-label-center { margin-bottom: 18px; }
.persona-h { font-family: 'Instrument Serif', serif; font-size: clamp(28px, 4vw, 50px); font-weight: 400; line-height: 1.12; color: var(--ink); margin-bottom: 16px; }
.persona-h em { font-style: italic; }
.persona-sub { font-size: 15px; color: var(--ink-2); font-weight: 300; line-height: 1.7; max-width: 540px; margin: 0 auto 24px; }
.persona-btns { display: flex; gap: 12px; justify-content: center; }
.persona-body { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.persona-body.flip { direction: rtl; }
.persona-body.flip > * { direction: ltr; }

/* Painterly panel */
.persona-img { border-radius: 14px; overflow: hidden; position: relative; min-height: 400px; border: 1px solid rgba(0,0,0,0.06); }
.persona-painting { position: absolute; inset: 0; }
.paint-green-hills { background: linear-gradient(160deg, #2d4a3e 0%, #1e3a30 60%, #182d28 100%); }
.paint-ocean { background: linear-gradient(160deg, #1e2d4a 0%, #1a2640 60%, #141d30 100%); }
.paint-harvest { background: radial-gradient(ellipse at 45% 55%, rgba(200,160,80,0.75) 0%, transparent 55%), linear-gradient(160deg, #D0B870 0%, #A88840 45%, #786030 100%); }
/* persona-painting noise removed for cleaner look */
.persona-screenshot { position: absolute; z-index: 2; background: var(--white); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.2); overflow: hidden; top: 24px; left: 16px; right: 16px; transition: opacity 0.35s ease; }
.persona-screenshot.hidden { opacity: 0; pointer-events: none; }
.persona-screenshot.active { opacity: 1; }

/* Interactive feature list */
.feature-list { padding-top: 4px; }
.feature-item { padding: 18px 16px; border-bottom: 1px solid var(--dash); cursor: pointer; border-radius: 8px; margin-bottom: 4px; transition: background 0.2s; border-left: 3px solid transparent; }
.feature-item:first-child { border-top: 1px solid var(--dash); }
.feature-item:hover { background: rgba(17,17,16,0.03); }
.feature-item.active { background: rgba(30,64,175,0.05); border-left-color: #60a5fa; }
.feature-item h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.feature-item p { font-size: 13.5px; color: var(--ink-3); line-height: 1.65; font-weight: 300; }

/* Dashboard content panels */
.pd-bar { background: #F0EEE8; padding: 9px 14px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(0,0,0,0.07); }
.pd-body { padding: 14px 16px; }
.pd-section { font-size: 9px; color: #AAA; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.pd-metric-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #F4F2EE; font-size: 11px; }
.pd-metric-row:last-child { border-bottom: none; }
.pd-m-label { color: var(--ink-2); font-weight: 400; }
.pd-m-g { color: #2A7A3A; font-weight: 700; }
.pd-m-r { color: #C04040; font-weight: 700; }
.pd-m-b { color: #1e40af; font-weight: 700; }
.alloc-full { padding: 14px 16px; }
.alloc-header { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.alloc-item { margin-bottom: 10px; }
.alloc-item-top { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
.alloc-item-name { font-weight: 600; color: var(--ink); }
.alloc-item-val { color: var(--ink-3); font-weight: 500; font-size: 10px; }
.alloc-bar-full { height: 5px; background: #E8E5DF; border-radius: 9px; overflow: hidden; }
.alloc-bar-fill-full { height: 100%; border-radius: 9px; }
.full-dash { padding: 14px 16px; }
.fd-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #F0EEE8; font-size: 11px; }
.fd-row:last-child { border-bottom: none; }
.fd-label { color: var(--ink-2); font-weight: 500; }
.fd-good { color: #2A7A3A; font-weight: 700; }
.fd-bad { color: #C04040; font-weight: 700; }
.fd-info { color: #1e40af; font-weight: 700; }
.mini-alert { margin: 8px 12px 12px; padding: 9px 11px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; font-size: 10.5px; color: #1e3a5f; line-height: 1.5; }
.mini-alert strong { font-weight: 600; }

/* ═══ PLATFORM MODULES SECTION (Intercom-style full width) ═══ */
.platform-section { padding: 60px 40px; }
.platform-intro { text-align: center; margin-bottom: 40px; }
.platform-intro .pill-label-center { margin-bottom: 18px; }
.platform-h { font-family: 'Instrument Serif', serif; font-size: clamp(28px, 4vw, 48px); font-weight: 400; line-height: 1.12; color: var(--ink); margin-bottom: 14px; }
.platform-h em { font-style: italic; }
.platform-sub { font-size: 15px; color: var(--ink-2); font-weight: 300; line-height: 1.7; max-width: 540px; margin: 0 auto 24px; }
.platform-btns { display: flex; gap: 12px; justify-content: center; }
/* Big module visual + tabs */
.platform-visual { max-width: 1200px; margin: 0 auto; }
.platform-tabs { display: flex; border-bottom: 1.5px solid rgba(17,17,16,0.15); margin-bottom: 0; }
.platform-tab { flex: 1; padding: 14px 20px; text-align: center; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-3); border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; transition: color 0.2s, border-color 0.2s; }
.platform-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.platform-tab:hover { color: var(--ink); }
.platform-panel { display: none; }
.platform-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.platform-panel-img { min-height: 420px; border-radius: 14px 0 0 14px; position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); }
.paint-blue-deep { background: linear-gradient(145deg, #1e3a5f 0%, #1e40af 100%); }
.paint-teal-field { background: linear-gradient(145deg, #1e3050 0%, #263d60 100%); }
.paint-forest { background: linear-gradient(145deg, #1e3050 0%, #22384a 100%); }
.platform-panel-ui { position: absolute; z-index: 2; top: 28px; left: 20px; right: 20px; background: var(--white); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.22); overflow: hidden; }
.platform-panel-content { padding: 32px 40px; background: var(--bg); border: 1px solid rgba(17,17,16,0.07); border-left: none; border-radius: 0 14px 14px 0; display: flex; flex-direction: column; justify-content: center; }
.panel-kicker { font-size: 11px; font-weight: 700; color: #1e40af; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.panel-title { font-family: 'Instrument Serif', serif; font-size: clamp(22px, 2.5vw, 32px); font-weight: 400; line-height: 1.2; color: var(--ink); margin-bottom: 16px; }
.panel-desc { font-size: 14.5px; color: var(--ink-2); font-weight: 300; line-height: 1.75; margin-bottom: 24px; }
.panel-bullets { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(17,17,16,0.1); padding-top: 20px; }
.panel-bullet { display: flex; gap: 12px; font-size: 13.5px; color: var(--ink-2); font-weight: 300; line-height: 1.5; }
.bullet-dot { width: 6px; height: 6px; border-radius: 50%; background: #1e40af; margin-top: 7px; flex-shrink: 0; }

/* ═══ INTEGRATIONS ═══ */
.integrations-section { padding: 60px 40px; max-width: 1200px; margin: 0 auto; }
.integrations-header { text-align: center; margin-bottom: 36px; }
.integrations-header .pill-label-center { margin-bottom: 18px; }
.integrations-h { font-family: 'Instrument Serif', serif; font-size: clamp(28px, 3.5vw, 44px); font-weight: 400; line-height: 1.15; color: var(--ink); margin-bottom: 14px; }
.integrations-h em { font-style: italic; }
.integrations-sub { font-size: 15px; color: var(--ink-2); font-weight: 300; line-height: 1.7; max-width: 520px; margin: 0 auto; }
.integrations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.integration-category { background: var(--white); border: 1px solid rgba(17,17,16,0.08); border-radius: 14px; padding: 28px 24px; box-shadow: 0 1px 3px rgba(17,17,16,0.04); }
.int-cat-label { font-size: 10px; font-weight: 700; color: #1e40af; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 14px; }
.int-cat-title { font-family: 'Instrument Serif', serif; font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 18px; }
.int-items { display: flex; flex-direction: column; gap: 8px; }
.int-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #F7F5F0; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.int-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.int-note { margin-top: 16px; font-size: 12px; color: var(--ink-3); line-height: 1.6; font-weight: 300; }

/* ═══ TESTIMONIALS ═══ */
.testimonials { padding: 60px 40px; max-width: 1040px; margin: 0 auto; }
.testi-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 28px; border-bottom: 1.5px solid rgba(0,0,0,0.12); }
.testi-tab { padding: 10px 22px; font-size: 14px; font-weight: 500; color: var(--ink-3); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; transition: color .2s, border-color .2s; }
.testi-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.testi-stack { position: relative; height: 280px; }
.testi-card { position: absolute; inset: 0; border-radius: 12px; padding: 44px 52px; display: flex; flex-direction: column; justify-content: center; }
.testi-card:nth-child(1) { background: #dbeafe; z-index: 4; }
.testi-card:nth-child(2) { background: #A0D8C0; z-index: 3; transform: translateY(6px) scale(0.99); }
.testi-card:nth-child(3) { background: #A0C0E8; z-index: 2; transform: translateY(12px) scale(0.98); }
.testi-quote { font-family: 'Instrument Serif', serif; font-size: clamp(17px, 2.2vw, 24px); font-weight: 400; line-height: 1.45; color: var(--ink); margin-bottom: 24px; }
.testi-dash { border: none; border-top: 1.5px dashed rgba(0,0,0,0.2); margin-bottom: 18px; }
.testi-attribution { font-size: 13.5px; color: var(--ink-2); }
.testi-attribution strong { font-weight: 600; color: var(--ink); }

/* ═══ ENTERPRISE SECURITY ═══ */
.security-section { padding: 60px 40px; border-top: 1.5px dashed var(--dash); border-bottom: 1.5px dashed var(--dash); }
.security-inner { max-width: 1200px; margin: 0 auto; }
.security-header { text-align: center; margin-bottom: 36px; }
.security-header .pill-label-center { margin-bottom: 18px; }
.security-h { font-family: 'Instrument Serif', serif; font-size: clamp(26px, 3.5vw, 42px); font-weight: 400; line-height: 1.15; color: var(--ink); margin-bottom: 14px; }
.security-sub { font-size: 15px; color: var(--ink-2); font-weight: 300; line-height: 1.7; max-width: 520px; margin: 0 auto; }
.security-certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; }
.cert-card { background: var(--white); border: 1px solid rgba(17,17,16,0.1); border-radius: 12px; padding: 28px 20px; text-align: center; }
.cert-icon { font-size: 32px; margin-bottom: 14px; }
.cert-name { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; letter-spacing: 0.03em; }
.cert-desc { font-size: 12px; color: var(--ink-3); font-weight: 300; line-height: 1.5; }
.cert-badge { display: inline-block; margin-top: 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 100px; padding: 3px 10px; font-size: 10px; font-weight: 600; color: #1e40af; letter-spacing: 0.05em; }
.security-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sec-feature { padding: 20px 0; border-top: 1px solid rgba(17,17,16,0.08); }
.sec-feature h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.sec-feature p { font-size: 13px; color: var(--ink-3); font-weight: 300; line-height: 1.6; }

/* FINAL CTA */
.final-cta { position: relative; overflow: hidden; min-height: 380px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 68px 40px; }
.cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(30,64,175,0.55) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(30,58,95,0.6) 0%, transparent 45%), radial-gradient(ellipse at 55% 20%, rgba(96,165,250,0.3) 0%, transparent 45%), linear-gradient(145deg, #1e3a5f 0%, #1e40af 50%, #3b5fc0 100%); }
.cta-content { position: relative; z-index: 2; max-width: 640px; }
.cta-h { font-family: 'Instrument Serif', serif; font-size: clamp(32px, 4.5vw, 58px); font-weight: 400; line-height: 1.1; color: #fff; margin-bottom: 14px; }
.cta-h em { font-style: italic; }
.cta-sub-text { font-size: 15px; color: rgba(255,255,255,0.72); font-weight: 300; line-height: 1.7; margin-bottom: 36px; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-white-outline { display: inline-block; text-decoration: none; border: 1.5px solid rgba(255,255,255,0.5); color: #fff; padding: 10px 22px; border-radius: 6px; font-size: 14px; font-weight: 500; transition: border-color .15s, background .15s; }
.btn-white-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.btn-white-solid { display: inline-block; text-decoration: none; background: #fff; color: var(--ink); padding: 11px 24px; border-radius: 6px; font-size: 14px; font-weight: 600; transition: opacity .15s; }
.btn-white-solid:hover { opacity: .88; }

/* FOOTER */
footer { background: #1a1a17; padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; }
.footer-links { display: flex; gap: 28px; }
.footer-links a { font-size: 13px; color: rgba(236,234,228,0.4); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: rgba(236,234,228,0.8); }
.footer-note { font-size: 12px; color: rgba(236,234,228,0.28); }

/* ═══ CURSOR-STYLE HERO ═══════════════════════════════════════════════ */
.cursor-hero { padding: 0; background: var(--bg); }
.cursor-hero-text { padding: 52px 40px 40px; text-align: center; max-width: 860px; margin: 0 auto; }
.cursor-hero-text .pill-label { margin-bottom: 22px; display: inline-block; }
.cursor-h1 { font-family: 'Instrument Serif', serif; font-size: clamp(44px, 6vw, 80px); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 22px; }
.cursor-h1 em { font-style: italic; }
.cursor-sub { font-size: 17px; font-weight: 300; color: var(--ink-2); line-height: 1.7; max-width: 600px; margin: 0 auto 32px; }
.cursor-btns { display: flex; gap: 12px; justify-content: center; }

/* Demo shell */
.cursor-demo-wrap { padding: 0 32px 56px; max-width: 1280px; margin: 0 auto; overflow: visible; }
.demo-tabs { display: flex; gap: 6px; margin-bottom: 0; justify-content: center; }
.demo-tab { padding: 9px 20px; font-size: 13px; font-weight: 500; color: var(--ink-3); background: transparent; border: 1px solid rgba(17,17,16,0.14); border-bottom: none; border-radius: 8px 8px 0 0; cursor: pointer; transition: background .15s, color .15s; }
.demo-tab:hover { background: rgba(17,17,16,0.04); color: var(--ink); }
.demo-tab.active { background: transparent !important; color: var(--ink) !important; }

.cursor-demo-panel { position: relative; background: #1a1a17; border-radius: 0 0 14px 14px; overflow: hidden; min-height: 480px; border: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; padding: 48px; }
.demo-painting { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 60%, rgba(30,64,175,0.25) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(96,165,250,0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 90%, rgba(30,58,95,0.4) 0%, transparent 50%), linear-gradient(145deg, #0f172a 0%, #1e2a3a 50%, #0f1e2e 100%); }
.demo-painting::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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.04'/%3E%3C/svg%3E"); background-size: 200px 200px; pointer-events: none; }

/* Floating window */
.demo-window { position: relative; z-index: 2; width: 100%; max-width: 900px; background: #ffffff; border-radius: 14px; box-shadow: 0 32px 100px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08); overflow: hidden; }
.demo-win-bar { background: #F0EEE8; padding: 11px 18px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(0,0,0,0.07); }
.dw-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dw-title { font-size: 11.5px; color: #888; font-weight: 500; letter-spacing: 0.06em; margin-left: 6px; flex: 1; }
.dw-live { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #2A7A3A; letter-spacing: 0.1em; text-transform: uppercase; }
.demo-win-body { padding: 0; }

/* Screens */
.demo-screen { display: none; padding: 22px 24px; }
.demo-screen.active { display: block; }
.dw-section-label { font-size: 10px; font-weight: 700; color: #AAA; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.dw-divider { border: none; border-top: 1px solid #F0EEE8; margin: 16px 0; }

.demo-stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
.demo-stat { padding: 14px 16px; border-radius: 8px; background: #F7F5F0; }
.demo-stat.green { background: #f0fdf4; }
.demo-stat.blue  { background: #eff6ff; }
.demo-stat.red   { background: #fef2f2; }
.ds-val { font-family: 'Instrument Serif', serif; font-size: 26px; font-weight: 400; line-height: 1; margin-bottom: 4px; color: var(--ink); }
.demo-stat.green .ds-val { color: #166534; }
.demo-stat.blue  .ds-val { color: #1e40af; }
.demo-stat.red   .ds-val { color: #991b1b; font-size: 18px; }
.ds-label { font-size: 11px; color: var(--ink-3); font-weight: 500; line-height: 1.4; }

.demo-event-list { display: flex; flex-direction: column; gap: 6px; }
.demo-event { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; font-size: 12.5px; color: var(--ink-2); }
.ev-good { background: #f0fdf4; }
.ev-info { background: #eff6ff; }
.ev-icon { font-style: normal; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.ev-good .ev-icon { color: #166534; }
.ev-info .ev-icon { color: #1e40af; }
.ev-text { flex: 1; font-weight: 300; line-height: 1.4; }
.ev-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.06em; flex-shrink: 0; }
.ev-badge.good { background: #dcfce7; color: #166534; }
.ev-badge.info { background: #dbeafe; color: #1e40af; }

.demo-vendor-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.demo-vrow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 8px; background: #F7F5F0; }
.vr-rank { font-size: 12px; font-weight: 700; color: var(--ink-3); width: 22px; flex-shrink: 0; }
.vr-info { flex: 1; }
.vr-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.vr-type { font-size: 10px; color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.vr-bar-wrap { width: 100px; height: 5px; background: #E0DDD8; border-radius: 9px; overflow: hidden; flex-shrink: 0; }
.vr-bar { height: 100%; border-radius: 9px; }
.vr-score { font-size: 13px; font-weight: 700; width: 34px; text-align: right; flex-shrink: 0; }
.vr-cost { font-size: 11px; color: var(--ink-3); font-weight: 400; flex-shrink: 0; width: 72px; text-align: right; }
.green-text { color: #166534; }
.blue-text  { color: #1e40af; }
.red-text   { color: #C04040; }

.demo-routing-feed { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.route-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: #F7F5F0; }
.ri-left { flex: 1; }
.ri-intent { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ri-profile { display: block; font-size: 11px; color: var(--ink-3); font-weight: 300; margin-top: 1px; }
.ri-arrow { font-size: 16px; color: var(--ink-3); flex-shrink: 0; }
.ri-dest { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 5px; flex-shrink: 0; white-space: nowrap; }
.ri-dest.human { background: #eff6ff; color: #1e40af; }
.ri-dest.ai    { background: #f0fdf4; color: #166534; }
.ri-conf { font-size: 11px; color: var(--ink-3); font-weight: 400; flex-shrink: 0; width: 82px; text-align: right; }

.demo-insight { margin-top: 14px; padding: 12px 16px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 12.5px; color: #1e3a5f; line-height: 1.6; }
.demo-insight strong { font-weight: 600; }

/* ═══ PLATFORM ARCHITECTURE DIAGRAM ══════════════════════════════════ */
.arch-section { padding: 60px 40px; }
.arch-inner { max-width: 1200px; margin: 0 auto; }
.arch-header { text-align: center; margin-bottom: 36px; }
.arch-h { font-family: 'Instrument Serif', serif; font-size: clamp(28px, 3.5vw, 44px); font-weight: 400; line-height: 1.12; color: var(--ink); margin-bottom: 14px; }
.arch-h em { font-style: italic; }
.arch-sub { font-size: 15px; color: var(--ink-2); font-weight: 300; line-height: 1.7; max-width: 580px; margin: 0 auto; }

.arch-diagram { position: relative; }

/* Channel row */
.arch-channels { display: flex; align-items: center; gap: 20px; justify-content: center; margin-bottom: 0; padding: 20px 28px; background: var(--bg); border: 1px solid rgba(17,17,16,0.1); border-bottom: none; border-radius: 12px 12px 0 0; }
.arch-channel-label { font-size: 10px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.15em; text-transform: uppercase; margin-right: 8px; flex-shrink: 0; }
.arch-channel-items { display: flex; gap: 12px; flex-wrap: wrap; }
.arch-channel-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 18px; background: var(--white); border: 1px solid rgba(17,17,16,0.1); border-radius: 10px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.arch-ch-svg { width:22px; height:22px; color:var(--ink-2); }

/* Connector */
.arch-connector { display: flex; justify-content: center; padding: 6px 0; background: var(--white); border-left: 1px solid rgba(17,17,16,0.1); border-right: 1px solid rgba(17,17,16,0.1); }
.arch-conn-line { width: 1.5px; height: 28px; background: linear-gradient(to bottom, rgba(17,17,16,0.15), rgba(30,64,175,0.4)); }

/* Platform box */
.arch-platform-box { background: var(--white); border: 1px solid rgba(17,17,16,0.1); border-radius: 0; overflow: hidden; }
.arch-layer { display: flex; align-items: stretch; min-height: 60px; }
.arch-layer-divider { height: 1px; background: rgba(17,17,16,0.07); margin: 0; }
.arch-layer-label { width: 112px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; padding: 16px 16px 16px 20px; background: var(--bg); border-right: 1px solid rgba(17,17,16,0.08); }
.layer-name { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
.layer-desc { font-size: 10px; color: var(--ink-3); font-weight: 400; margin-top: 2px; letter-spacing: 0.05em; text-transform: uppercase; }
.arch-layer-label.enforce { border-left: 3px solid rgba(17,17,16,0.1); }
.arch-layer-label.route   { border-left: 3px solid rgba(17,17,16,0.1); }
.arch-layer-label.workforce { border-left: 3px solid rgba(17,17,16,0.1); }
.arch-layer-label.remember { border-left: 3px solid rgba(17,17,16,0.1); }
.arch-layer-label.measure  { border-left: 3px solid rgba(17,17,16,0.1); }
.arch-layer-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 14px 18px; flex: 1; }
.arch-chip { padding: 5px 13px; background: #F7F5F0; border: 1px solid rgba(17,17,16,0.1); border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background .15s, border-color .15s; }
.arch-chip:hover { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.arch-chip.primary { background: #eff6ff; border-color: #bfdbfe; color: #1e3a5f; font-weight: 600; }
.arch-chip-wide { padding: 7px 18px; border-radius: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; flex-grow: 1; text-align: center; }
.gradient-chip { background: linear-gradient(135deg, rgba(30,58,95,0.12) 0%, rgba(30,64,175,0.12) 50%, rgba(96,165,250,0.12) 100%); border: 1px solid rgba(30,64,175,0.2); color: #1e3a5f; }

/* Security bar */
.arch-security-bar { padding: 16px 24px; background: #1e3a5f; text-align: center; border-radius: 0; }
.sec-bar-text { font-size: 13px; color: rgba(255,255,255,0.95); font-weight: 500; letter-spacing: 0.02em; line-height: 1.6; }

/* Integration row */
.arch-integrations-row { display: flex; align-items: center; gap: 0; padding: 20px 24px; background: var(--bg); border: 1px solid rgba(17,17,16,0.1); border-top: none; border-radius: 0 0 12px 12px; }
.arch-int-group { flex: 1; }
.arch-int-group-label { font-size: 9px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 10px; }
.arch-int-logos { display: flex; gap: 6px; flex-wrap: wrap; }
.arch-int-logo { padding: 5px 12px; background: var(--white); border: 1px solid rgba(17,17,16,0.1); border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.arch-int-plus { background: transparent; border-style: dashed; color: var(--ink-3); font-size: 16px; padding: 3px 10px; }
.arch-int-sep { width: 1px; background: rgba(17,17,16,0.1); margin: 0 20px; align-self: stretch; flex-shrink: 0; }


/* ═══ NAV FULL MENU ════════════════════════════════════════════════════ */
/* nav height set in main nav rule */
.nav-center-links { display: flex; gap: 4px; align-items: center; }
.nav-link { font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 6px 14px; border-radius: 5px; transition: color .15s, background .15s; }
.nav-link:hover { color: var(--ink); background: rgba(17,17,16,0.05); }

/* ═══ AI COMMAND CENTER APP SHELL ═════════════════════════════════════ */
.demo-app-shell { display: flex; height: 420px; background: #fff; }

/* Sidebar */
.das-sidebar { width: 168px; flex-shrink: 0; background: #fafaf8; border-right: 1px solid #eeecea; padding: 14px 8px; overflow-y: auto; }
.das-nav-section { font-size: 9px; font-weight: 700; color: #aaa; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 8px 6px; margin-top: 4px; }
.das-nav-item { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: #6b6b60; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; margin-bottom: 1px; }
.das-nav-item:hover { background: rgba(17,17,16,0.06); color: var(--ink); }
.das-nav-item.active { background: #e8e6e0; color: var(--ink); font-weight: 600; }
.das-nav-item svg { flex-shrink: 0; opacity: 0.6; }
.das-nav-item.active svg { opacity: 1; }

/* Main content */
.das-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.das-screen { display: none; padding: 20px 24px; flex: 1; overflow-y: auto; }
.das-screen.active { display: flex; flex-direction: column; gap: 14px; }
.das-screen-header { display: flex; justify-content: space-between; align-items: center; }
.das-screen-header h3 { font-size: 15px; font-weight: 600; color: var(--ink); }
.das-live-pill { font-size: 10px; font-weight: 600; color: #2A7A3A; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 3px 10px; border-radius: 100px; letter-spacing: 0.06em; }

/* Greeting */
.das-greeting { display: flex; align-items: center; gap: 12px; }
.das-greet-text h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.das-greet-text p { font-size: 12px; color: var(--ink-3); font-weight: 300; }

/* Pulse AI bar */
.das-pulse-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #fff; border: 1.5px solid #dbeafe; border-radius: 10px; cursor: text; }
.das-pulse-placeholder { flex: 1; font-size: 13px; color: #aaa; font-weight: 400; }
.das-pulse-icon { flex-shrink: 0; }
.das-suggestions { display: flex; flex-direction: column; gap: 6px; }
.das-sug { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); font-weight: 300; padding: 7px 12px; background: #fafaf8; border: 1px solid #eeecea; border-radius: 7px; cursor: pointer; transition: background .15s; }
.das-sug:hover { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* Metrics grid */
.das-metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.das-metric { padding: 14px 14px; border-radius: 10px; background: #f7f5f0; border: 1px solid transparent; }
.das-metric.green { background: #f0fdf4; border-color: #bbf7d0; }
.das-metric.blue  { background: #eff6ff; border-color: #bfdbfe; }
.das-metric.red-muted { background: #fef2f2; border-color: #fecaca; }
.dm-val { font-family: 'Instrument Serif', serif; font-size: 22px; font-weight: 400; color: var(--ink); line-height: 1; margin-bottom: 3px; }
.das-metric.green .dm-val { color: #166534; }
.das-metric.blue  .dm-val { color: #1e40af; }
.das-metric.red-muted .dm-val { color: #991b1b; font-size:17px; }
.dm-delta { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-bottom: 5px; background: #dcfce7; color: #166534; }
.dm-label { font-size: 11px; color: var(--ink-3); font-weight: 500; line-height: 1.4; }

/* Event list */
.das-event-list { display: flex; flex-direction: column; gap: 5px; }
.das-event { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: var(--ink-2); font-weight: 300; }
.ev-g { background: #f0fdf4; }
.ev-b { background: #eff6ff; }
.ev-check { font-weight: 700; font-size: 12px; color: #166534; flex-shrink: 0; width: 14px; }
.ev-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; margin-left: auto; }
.ev-tag.green { background: #dcfce7; color: #166534; }
.ev-tag.blue  { background: #dbeafe; color: #1e40af; }

/* Vendor rows */
.das-vendor-rows { display: flex; flex-direction: column; gap: 7px; }
.das-vr { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 8px; background: #f7f5f0; font-size: 12px; }
.vr-n  { font-size: 11px; font-weight: 700; color: var(--ink-3); width: 22px; flex-shrink: 0; }
.vr-d  { flex: 1; }
.vr-d b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.vr-t  { font-size: 10px; color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.vr-b-w { width: 90px; height: 4px; background: #e0ddd8; border-radius: 9px; overflow: hidden; flex-shrink: 0; }
.vr-b   { height: 100%; border-radius: 9px; }
.vr-s  { font-size: 13px; font-weight: 700; width: 32px; text-align: right; flex-shrink: 0; }
.vr-c  { font-size: 11px; color: var(--ink-3); width: 70px; text-align: right; flex-shrink: 0; }

/* Routing feed */
.das-route-feed { display: flex; flex-direction: column; gap: 6px; }
.das-route-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: #f7f5f0; }
.dri-left { flex: 1; }
.dri-intent { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.dri-ctx    { display: block; font-size: 11px; color: var(--ink-3); font-weight: 300; margin-top: 1px; }
.dri-arrow  { font-size: 14px; color: var(--ink-3); flex-shrink: 0; }
.dri-dest   { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 5px; flex-shrink: 0; white-space: nowrap; }
.dri-dest.human { background: #eff6ff; color: #1e40af; }
.dri-dest.ai    { background: #f0fdf4; color: #166534; }
.dri-conf   { font-size: 10px; color: var(--ink-3); width: 30px; text-align: right; flex-shrink: 0; }

/* Insight bar */
.das-insight { padding: 11px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 12px; color: #1e3a5f; line-height: 1.6; margin-top: auto; }
.das-insight b { font-weight: 600; }

/* ═══ CERT MARKS (clean typographic badges) ═══════════════════════════ */
.cert-icon { display: none; } /* hide old emoji fallback */
.cert-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 16px; font-weight: 800; font-size: 14px; letter-spacing: 0.04em; color: #fff; line-height: 1; }
.cert-mark span:first-child { font-size: 13px; font-weight: 800; }
.cert-mark-sub { font-size: 7px; font-weight: 700; letter-spacing: 0.1em; margin-top: 2px; opacity: 0.85; text-align: center; }
.cert-mark.soc2  { background: linear-gradient(135deg, #1e3a5f, #1e40af); }
.cert-mark.iso   { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.cert-mark.gdpr  { background: linear-gradient(135deg, #1e3a5f, #2563eb); }
.cert-mark.hipaa { background: linear-gradient(135deg, #166534, #16a34a); }


/* ═══ CROSS-BROWSER RESETS & COMPAT ══════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: none; font-family: inherit; cursor: pointer; }
a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; display: block; border: 0; }
input, textarea { -webkit-appearance: none; border-radius: 0; }
/* Smooth scrolling with reduced-motion fallback */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Focus styles for accessibility */
:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }

/* ═══ UNIFIED TAB SYSTEM ══════════════════════════════════════════════
   One canonical tab style used everywhere on the page.
   Underline style: clean, editorial, works on all browsers.
═══════════════════════════════════════════════════════════════════════ */
.unified-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1.5px solid rgba(17,17,16,0.14);
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.unified-tabs::-webkit-scrollbar { display: none; }

/* Override demo-tabs old pill styling */
.demo-tabs { border-bottom: 1.5px solid rgba(17,17,16,0.14) !important; background: transparent !important; padding: 0; }

.unified-tab {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 13px 22px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer;
  -webkit-transition: color 0.18s, border-color 0.18s;
  transition: color 0.18s, border-color 0.18s;
  white-space: nowrap;
  text-align: center;
  /* Kill old demo-tab overrides */
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
.unified-tab:hover { color: var(--ink); }
.unified-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}

/* Demo tabs live above dark panel — keep consistent bg */
.cursor-demo-wrap .unified-tabs {
  background: var(--bg);
  border-radius: 10px 10px 0 0;
  border-bottom-color: rgba(17,17,16,0.14);
  overflow: hidden;
}

/* Platform tabs are inside a white panel */
.platform-tabs.unified-tabs {
  background: transparent;
}
/* Platform tab active uses brand blue underline for distinction */
.platform-tabs .unified-tab.active {
  color: #1e40af;
  border-bottom-color: #1e40af;
}

/* ═══ BOOK A DEMO — SINGLE CTA ════════════════════════════════════════ */
.btn-book-demo {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: #dbeafe;
  color: #1e3a5f;
  border: 1.5px solid #60a5fa;
  padding: 10px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-transition: background 0.18s, color 0.18s;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.btn-book-demo:hover {
  background: #60a5fa;
  color: #0f172a;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 16px rgba(30,64,175,0.35);
  box-shadow: 0 4px 16px rgba(96,165,250,0.35);
}
.btn-book-demo-light {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  text-decoration: none;
  background: #dbeafe;
  color: #1e3a5f;
  border: 1.5px solid #60a5fa;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.btn-book-demo-light:hover { opacity: 0.88; }

/* Nav book demo — slightly compact */
.nav-right .btn-book-demo { padding: 9px 20px; font-size: 13.5px; }

/* ═══ MOBILE RESPONSIVENESS ════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .cursor-hero { padding: 0; }
  .cursor-hero-text { padding: 48px 24px 36px; }
  .three-grid { grid-template-columns: 1fr; gap: 16px; }
  .persona-body, .persona-body.flip { grid-template-columns: 1fr; direction: ltr; gap: 32px; }
  .persona-img { min-height: 300px; }
  .ns-inner { grid-template-columns: 1fr; }
  .platform-panel.active { grid-template-columns: 1fr; }
  .platform-panel-img { border-radius: 12px 12px 0 0; min-height: 280px; }
  .platform-panel-content { border-radius: 0 0 12px 12px; border-left: 1px solid rgba(0,0,0,0.08); border-top: none; }
  .enforce-inner { grid-template-columns: 1fr; }
  .integrations-grid { grid-template-columns: 1fr; }
  .security-certs { grid-template-columns: repeat(2,1fr); }
  .security-features { grid-template-columns: 1fr; }
  .nav-center-links { display: none; }
  .arch-layer-label { width: 80px; padding: 12px; }
  .arch-channels { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 16px; }
  .arch-integrations-row { -ms-flex-direction: column; flex-direction: column; gap: 20px; }
  .arch-int-sep { display: none; }
  .cursor-demo-wrap { padding: 0 16px 48px; }
  .das-sidebar { display: none; }
  .das-metrics-grid { grid-template-columns: repeat(2,1fr); }
  .faq-inner { grid-template-columns: 1fr; gap: 28px; }
  .faq-header { position: static; text-align: center; }
  .faq-sub { margin: 0 auto; max-width: 620px; }
}

@media (max-width: 640px) {
  .cursor-h1 { font-size: 36px; }
  .cursor-hero-text { padding: 36px 20px 28px; }
  .three-up { padding: 48px 20px; }
  .persona-section, .persona-section.flip { padding: 0; }
  section[style*="padding: 72px 40px"] { padding: 48px 20px !important; }
  .platform-section { padding: 48px 20px; }
  .arch-section { padding: 48px 20px; }
  .breadcrumb-nav { padding: 12px 20px 0; }
  .faq-section { padding: 48px 20px; }
  .faq-trigger { min-height: 58px; padding: 18px 18px; font-size: 14px; }
  .faq-panel p { padding: 0 18px 18px; }
  .integrations-section { padding: 0; }
  .integrations-header { padding-bottom: 32px; }
  .testimonials { padding: 48px 20px; }
  .security-section { padding: 48px 20px; }
  .final-cta { padding: 60px 20px; }
  footer { padding: 24px 20px; -ms-flex-direction: column; flex-direction: column; gap: 20px; text-align: center; }
  .footer-links { -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; }
  .security-certs { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .das-metrics-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .testi-quote { font-size: 16px; }
  .testi-card { padding: 28px 24px; }
  .demo-tabs { overflow-x: auto; }
/* nav height set in main nav rule */
  nav img { height: 44px !important; }
  .unified-tab { padding: 11px 16px; font-size: 12.5px; }
  .arch-layer { -ms-flex-direction: column; flex-direction: column; }
  .arch-layer-label { width: 100%; border-right: none; border-bottom: 1px solid rgba(17,17,16,0.08); border-left-width: 3px; }
}

/* ═══ PRINT / HIGH-CONTRAST ════════════════════════════════════════════ */
@media print {
  nav { position: relative; }
  .cursor-demo-panel { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .demo-screen { display: block !important; }
  .das-screen  { display: block !important; }
}
@media (prefers-color-scheme: dark) {
  /* Opt-out: keep light theme always for brand consistency */
  :root { color-scheme: light; }
}


/* Fix: prevent tab active styles bleeding into screen content */
.das-screen .btn-book-demo,
.das-screen a,
.das-insight a,
.demo-screen a {
  background: #1e40af;
  color: #fdfcf9;
}
.das-screen .btn-book-demo:hover {
  background: #60a5fa;
  color: #0f172a;
}
/* Ensure das-screen is never display:none when active */
.das-screen.active { display: -webkit-box; display: -ms-flexbox; display: flex; }
/* Prevent .demo-tab active dark style from affecting child elements */
.demo-tab.active * { color: inherit; background: transparent; }


.cursor-deploy {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  margin-bottom: 28px;
  margin-top: -16px;
  opacity: 0.75;
}


/* ═══ NEW TESTIMONIALS ════════════════════════════════════════════════ */
.testimonials-section { padding: 60px 40px; max-width: 1200px; margin: 0 auto; }
.testi-header { text-align: center; margin-bottom: 36px; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi-card-new {
  background: var(--white);
  border: 1px solid rgba(17,17,16,0.07);
  border-radius: 12px;
  padding: 28px 28px 24px;
  box-shadow: 0 1px 4px rgba(17,17,16,0.05);
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -ms-flex-direction: column; flex-direction: column;
  gap: 20px;
  transition: -webkit-box-shadow 0.2s; transition: box-shadow 0.2s;
}
.testi-card-new:hover {
  -webkit-box-shadow: 0 8px 32px rgba(17,17,16,0.08);
  box-shadow: 0 8px 32px rgba(17,17,16,0.08);
}
.testi-quote-new {
  font-family: 'Instrument Serif', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  font-style: italic;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.testi-attr-new { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(17,17,16,0.08); }
.testi-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #1e3a5f, #1e40af); color: #fff; font-size: 12px; font-weight: 700; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; letter-spacing: 0.04em; }
.testi-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.testi-role { font-size: 11.5px; color: var(--ink-3); font-weight: 300; margin-top: 1px; }
@media (max-width: 768px) {
  .testi-grid { grid-template-columns: 1fr; }
  .testimonials-section { padding: 40px 20px; }
}

/* ═══ NAV LOGO SIZING FIX ═════════════════════════════════════════════ */
nav img { display: block; }
footer img { display: block; }


/* ═══ SECTORS ROW (logo bar) ══════════════════════════════════════════ */
.sectors-row {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 0;
  max-width: 1100px;
  margin: 0 auto;
}
.sector-item {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(17,17,16,0.42);
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 0 10px;
  -webkit-transition: color 0.18s; transition: color 0.18s;
}
.sector-item:hover { color: rgba(17,17,16,0.75); }
.sector-item.muted { color: rgba(17,17,16,0.28); }
.sector-sep {
  color: rgba(17,17,16,0.2);
  font-size: 14px;
  line-height: 1;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}

/* ═══ LOGO SCALING FIX — nav & footer ════════════════════════════════ */
.nav-logo-link {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
  text-decoration: none;
}
.nav-logo-img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 160px;      /* hard cap so it never overflows */
  -o-object-fit: contain; object-fit: contain;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
}
.footer-logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 160px;
  -o-object-fit: contain; object-fit: contain;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
}

/* ═══ NAV FULL REWRITE — proper sizing + mobile ═══════════════════════ */
/* nav styles consolidated below */
/* nav-center-links consolidated below */
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: 6px 13px; border-radius: 5px;
  -webkit-transition: color .15s, background .15s; transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: rgba(17,17,16,0.05); }
/* nav-right consolidated below */

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -ms-flex-direction: column; flex-direction: column;
  gap: 5px; cursor: pointer; padding: 6px;
  background: transparent; border: none;
  -webkit-tap-highlight-color: transparent;
}
.ham-bar {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  -webkit-transition: -webkit-transform 0.22s, opacity 0.22s;
  transition: transform 0.22s, opacity 0.22s;
}

/* Mobile drawer */
/* mobile menu consolidated below */
.nav-mobile-link {
  display: block; padding: 13px 24px;
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(17,17,16,0.06);
  -webkit-transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
}
.nav-mobile-link:hover { background: rgba(17,17,16,0.04); color: var(--ink); }
.nav-mobile-link.cta {
  margin: 14px 24px 0; border-bottom: none;
  background: #60a5fa; color: #0f172a;
  border-radius: 6px; font-weight: 600;
  text-align: center;
  -webkit-transition: background 0.18s; transition: background 0.18s;
}
.nav-mobile-link.cta:hover { background: #60a5fa; color: #0f172a; }

/* Hamburger open state */
.nav-hamburger.open .ham-bar:nth-child(1) { -webkit-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open .ham-bar:nth-child(2) { opacity: 0; }
.nav-hamburger.open .ham-bar:nth-child(3) { -webkit-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); }

/* ═══ MOBILE BREAKPOINTS ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* nav handled by canonical nav CSS block above */
  nav img, .nav-logo-img { height: 34px !important; max-width: 140px; }
  .footer-logo-img { height: 34px !important; max-width: 140px; }
}

@media (max-width: 640px) {
  nav { height: 60px; padding: 0 16px; }
  .nav-logo-img { height: 30px !important; }
  .footer-logo-img { height: 30px !important; }
  footer { padding: 24px 20px; gap: 16px; }
  .footer-links { gap: 16px; }
  .sectors-row { gap: 4px 0; }
  .sector-item { font-size: 12.5px; padding: 0 7px; }
  .logo-bar { padding: 20px 16px; }
}

/* Footer layout fix */
footer {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; justify-content: space-between;
  padding: 28px 40px;
  background: #1a1a17;
  gap: 24px;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   NAV — SINGLE CANONICAL RULE SET
   nav itself is full-width (for the background bar)
   .nav-inner is max-width constrained (keeps logo + links + CTA aligned
   with the rest of the page content at all viewport widths)
═══════════════════════════════════════════════════════════════════════ */
nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 200;
  background: #f7f7f4;
  border-bottom: 1px solid rgba(17,17,16,0.08);
  width: 100%;
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  height: 68px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}
.nav-logo-link {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
  text-decoration: none;
}
.nav-logo-img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 150px;
  -o-object-fit: contain; object-fit: contain;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
}
.nav-center-links {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  gap: 2px;
  align-items: center;
  -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
  justify-content: center;
}
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: 6px 13px; border-radius: 5px;
  white-space: nowrap;
  -webkit-transition: color .15s, background .15s;
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--ink); background: rgba(17,17,16,0.05); }
.nav-right {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  gap: 10px;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
}
/* Hamburger — hidden on desktop */
.nav-hamburger {
  display: none;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -ms-flex-direction: column; flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 8px 6px;
  background: transparent; border: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 4px;
}
.ham-bar {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease;
  transition: transform 0.2s ease, opacity 0.2s ease;
  -webkit-transform-origin: center; transform-origin: center;
}
.nav-hamburger.open .ham-bar:nth-child(1) {
  -webkit-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open .ham-bar:nth-child(2) { opacity: 0; }
.nav-hamburger.open .ham-bar:nth-child(3) {
  -webkit-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MOBILE DROPDOWN MENU ─────────────────────────────────────────────
   Uses visibility + opacity + translateY instead of display:none
   so CSS transitions work correctly across all browsers.
   JS adds/removes .open class.
─────────────────────────────────────────────────────────────────────── */
.nav-mobile-menu {
  position: fixed;
  top: 68px; left: 0; right: 0;
  background: #f7f7f4;
  border-bottom: 1px solid rgba(17,17,16,0.08);
  -webkit-box-shadow: 0 8px 32px rgba(17,17,16,0.1);
  box-shadow: 0 8px 32px rgba(17,17,16,0.1);
  z-index: 199;
  padding: 8px 0 16px;
  /* Hidden state */
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease, visibility 0s linear 0.2s;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  pointer-events: none;
  /* Only shown on mobile — hide entirely on desktop */
  display: none;
}
.nav-mobile-menu.open {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0); transform: translateY(0);
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease, visibility 0s linear 0s;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  pointer-events: auto;
}
.nav-mobile-link {
  display: block; padding: 13px 24px;
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(17,17,16,0.06);
  -webkit-transition: background 0.15s, color 0.15s;
  transition: background 0.15s, color 0.15s;
}
.nav-mobile-link:last-child { border-bottom: none; }
.nav-mobile-link:hover { background: rgba(17,17,16,0.04); color: var(--ink); }
.nav-mobile-cta-wrap { padding: 12px 24px 0; }
.nav-mobile-link.cta {
  display: block;
  background: #dbeafe; color: #1e3a5f;
  border: 1.5px solid #60a5fa;
  border-radius: 6px; font-weight: 600;
  text-align: center; border-bottom: none;
  -webkit-transition: background 0.18s; transition: background 0.18s;
}
.nav-mobile-link.cta:hover { background: #60a5fa; color: #0f172a; }

/* Body overlay when menu open */
.nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(17,17,16,0.2);
  z-index: 198;
}
.nav-overlay.active { display: block; }

/* ── RESPONSIVE BREAKPOINTS ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-center-links { display: none !important; }
  .nav-hamburger { display: -webkit-box; display: -ms-flexbox; display: flex; }
  .nav-inner { padding: 0 24px; }
  .nav-mobile-menu { display: block; } /* enable mobile menu on tablet/mobile */
}
@media (max-width: 640px) {
  .nav-inner { height: 60px; padding: 0 16px; }
  .nav-logo-img { height: 30px !important; }
  .nav-mobile-menu { top: 60px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   VISUAL COHESION OVERHAUL
   Single background. Elevation through shadows. Clean typography.
═══════════════════════════════════════════════════════════════════════ */

/* Override ALL section-level white/bg alternations */
section,
.three-up,
.arch-section,
.security-section,
.testimonials-section,
.platform-section,
.integrations-section,
div[style*="background: var(--bg)"],
div[style*="background: var(--white)"] {
  background: transparent !important;
}
body { background: var(--bg) !important; }

/* Cards — white on warm bg, shadow depth instead of border noise */
.testi-card-new,
.integration-category,
.cert-card,
.feature-card,
.three-card-text,
.platform-panel-content,
.das-sidebar { background: #FFFFFF; }

/* Arch diagram inner box */
.arch-platform-box { background: #FFFFFF; }
.arch-channels { background: rgba(255,255,255,0.7); }
.arch-integrations-row { background: rgba(255,255,255,0.7); }

/* Platform panel content */
.platform-panel.active { border: none; }
.platform-panel-img {
  border: 1px solid rgba(17,17,16,0.07) !important;
}

/* Security section — white card feel */
.security-section { background: transparent; }
.cert-card {
  background: #FFFFFF;
  border: 1px solid rgba(17,17,16,0.07) !important;
  box-shadow: 0 1px 4px rgba(17,17,16,0.04);
}
.sec-feature { border-top: 1px solid rgba(17,17,16,0.07); }

/* Persona images — match refined shadow */
.persona-img { border: 1px solid rgba(17,17,16,0.07) !important; }

/* Smooth all card hover shadows */
.testi-card-new:hover { box-shadow: 0 4px 20px rgba(17,17,16,0.09); }
.cert-card:hover     { box-shadow: 0 4px 20px rgba(17,17,16,0.09); }

/* Demo window */
.demo-window { background: #FFFFFF; }

/* ═══ FOOTER — multi-column Cursor-style ═══ */
footer {
  background: #1a1a17 !important;
  padding: 0 !important;
  display: block !important;
  flex-wrap: unset !important;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 52px 40px 40px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  gap: 80px;
  align-items: flex-start;
}
.footer-brand {
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
  max-width: 200px;
}
.footer-logo-link { display: block; margin-bottom: 16px; }
.footer-logo-img {
  height: 34px !important;
  width: auto;
  max-width: 140px !important;
  display: block;
  -o-object-fit: contain; object-fit: contain;
}
.footer-tagline {
  font-size: 12px; color: rgba(255,255,255,0.35);
  font-weight: 400; line-height: 1.6;
  margin-top: 8px;
}
.footer-cols {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  gap: 44px;
  -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.footer-col { min-width: 120px; }
.footer-col-label {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col-link {
  display: block; font-size: 13.5px; font-weight: 400;
  color: rgba(255,255,255,0.55); text-decoration: none;
  margin-bottom: 9px;
  -webkit-transition: color 0.15s; transition: color 0.15s;
}
.footer-col-link:hover { color: rgba(255,255,255,0.9); }
.footer-bottom {
  max-width: 1280px; margin: 0 auto;
  padding: 20px 40px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; gap: 24px;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.footer-bottom span { font-size: 12px; color: rgba(255,255,255,0.3); }
.footer-heart { margin-left: auto; }
.footer-bottom-link {
  color: rgba(255,255,255,0.3); text-decoration: none;
  -webkit-transition: color 0.15s; transition: color 0.15s;
}
.footer-bottom-link:hover { color: rgba(255,255,255,0.6); }

@media (max-width: 768px) {
  .footer-inner { -ms-flex-direction: column; flex-direction: column; gap: 40px; padding: 40px 24px 32px; }
  .footer-cols { gap: 32px; }
  .footer-bottom { padding: 16px 24px; gap: 12px; }
  .footer-heart { margin-left: 0; }
}

/* ═══ REMOVE OLD CONFLICTING FOOTER RULES ═══ */
.footer-links { display: none; }
.footer-note { display: none; }

/* ═══ SECTION ACCENT LINES — instead of bg color change ══════════════ */
/* Use very faint top-border on sections for visual rhythm */
.arch-section,
.platform-section,
.testimonials-section,
.security-section {
  position: relative;
}

/* ═══ ARCH DIAGRAM — legibility ══════════════════════════════════════ */
.arch-security-bar {
  background: #1e3a5f !important;
  padding: 18px 28px !important;
}
.sec-bar-text {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.92) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.7 !important;
}

/* ═══ LOGO BAR CLEAN ═════════════════════════════════════════════════ */
aside.logo-bar {
  background: rgba(17,17,16,0.025) !important;
  border-top: 1px solid rgba(17,17,16,0.07) !important;
  border-bottom: 1px solid rgba(17,17,16,0.07) !important;
}

/* ═══ HERO DEMO PANEL — deeper, calmer ═══════════════════════════════ */
.cursor-demo-panel {
  background: #0f1828 !important;
  border-radius: 0 0 14px 14px;
}
.demo-painting {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(30,64,175,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(96,165,250,0.1) 0%, transparent 50%),
    linear-gradient(145deg, #0d1628 0%, #16213a 60%, #0d1628 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION GROUNDING — eliminate the floating-in-whitespace feel
   Cursor's secret: sections feel planted because:
   1. Content runs edge-to-edge within max-width containers
   2. No double-padded whitespace (outer + inner)
   3. Feature panels feel connected to the page, not levitating
═══════════════════════════════════════════════════════════════════════ */

/* Persona sections — full bleed left panel, tighter inner */
.persona-body { gap: 40px; }
.persona-img {
  min-height: 360px !important;
  border-radius: 12px !important;
  overflow: hidden;
  /* Shadow that grounds it, not floats it */
  box-shadow: 0 2px 16px rgba(17,17,16,0.12), 0 0 0 1px rgba(17,17,16,0.06) !important;
  border: none !important;
}
.persona-screenshot {
  top: 20px !important;
  left: 14px !important;
  right: 14px !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06) !important;
}

/* Platform panels — tighter, more connected */
.platform-panel.active {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(17,17,16,0.08);
}
.platform-panel-img { box-shadow: none; }

/* Three-up cards — elevate slightly from page, not floating */
.three-grid > div {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(17,17,16,0.06), 0 4px 16px rgba(17,17,16,0.04);
  background: var(--white);
  transition: box-shadow 0.2s, transform 0.2s;
}
.three-grid > div:hover {
  box-shadow: 0 4px 20px rgba(17,17,16,0.1), 0 1px 4px rgba(17,17,16,0.06);
  transform: translateY(-2px);
}
.three-card-text {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-left: 1px solid rgba(17,17,16,0.07) !important;
  border-right: 1px solid rgba(17,17,16,0.07) !important;
  border-bottom: 1px solid rgba(17,17,16,0.07) !important;
  border-top: none !important;
}
.three-card-img {
  border-left: 1px solid rgba(17,17,16,0.07) !important;
  border-right: 1px solid rgba(17,17,16,0.07) !important;
  border-top: 1px solid rgba(17,17,16,0.07) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
}

/* Reduce outer section padding to kill double-spacing effect */
.three-up { padding: 48px 40px 44px !important; }
.arch-section { padding: 48px 40px !important; }
.security-section { padding: 48px 40px !important; }
.testimonials-section { padding: 48px 40px !important; }
.platform-section { padding: 48px 40px !important; }
div[style*="padding: 60px 40px"] { padding: 48px 40px !important; }

/* Tighten the intro blocks inside sections */
.persona-intro { margin-bottom: 32px !important; }
.platform-intro { margin-bottom: 32px !important; }
.arch-header { margin-bottom: 32px !important; }
.integrations-header { margin-bottom: 32px !important; }
.security-header { margin-bottom: 32px !important; }

/* Testi grid cards — more shadow, less border */
.testi-card-new {
  border: 1px solid rgba(17,17,16,0.06) !important;
  box-shadow: 0 2px 8px rgba(17,17,16,0.06), 0 1px 2px rgba(17,17,16,0.04) !important;
}

/* Integration category — same elevation as testi */
.integration-category {
  border: 1px solid rgba(17,17,16,0.06) !important;
  box-shadow: 0 2px 8px rgba(17,17,16,0.06) !important;
}

/* Cert cards */
.cert-card {
  border: 1px solid rgba(17,17,16,0.06) !important;
  box-shadow: 0 1px 4px rgba(17,17,16,0.04) !important;
}

/* Hero text section — less top padding, closer to demo */
.cursor-hero-text { padding: 44px 40px 32px !important; }

/* Arch diagram — grounded container */
.arch-diagram {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(17,17,16,0.07), 0 0 0 1px rgba(17,17,16,0.07);
}
.arch-channels { border-radius: 0; border-bottom: none; }
.arch-integrations-row { border-radius: 0; }
.arch-security-bar { border-radius: 0; }

/* Remove double borders from arch layers */
.arch-platform-box { border-radius: 0; border: none; }

/* Platform tabs — ground the tab bar */
.unified-tabs.platform-tabs {
  background: var(--bg);
  border-radius: 10px 10px 0 0;
  padding: 0 4px;
  border-bottom: 1px solid rgba(17,17,16,0.1);
}

/* Demo window — Cursor-style: light gray chrome, not white */
.ss-bar, .pd-bar, .mini-ui-bar, .demo-win-bar {
  background: #EBEBEB !important;
}

/* Nav fdfcf9 — ensure it's not overridden by var(--bg) elsewhere */
nav { background: #fdfcf9 !important; }
.nav-inner { background: transparent !important; }


/* ═══════════════════════════════════════════════════════════════════════
   ARCH DIAGRAM — FLOW RIBBON + ANIMATED PATH
═══════════════════════════════════════════════════════════════════════ */

/* ── Flow Ribbon ──────────────────────────────────────────────────────── */
.arch-flow-ribbon {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(30,64,175,0.05);
  border-top: 1px solid rgba(30,64,175,0.12);
  border-bottom: 1px solid rgba(30,64,175,0.12);
  padding: 12px 24px;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  gap: 4px;
}
.arch-flow-step {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
  white-space: nowrap;
}
.arch-flow-step.ribbon-active {
  background: #dbeafe;
  color: #1e3a5f;
  border: 1px solid rgba(96,165,250,0.5);
}
.afr-dot {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(30,64,175,0.12);
  color: #1e40af;
  font-size: 10px;
  font-weight: 700;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
  -webkit-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s;
}
.arch-flow-step.ribbon-active .afr-dot {
  background: rgba(96,165,250,0.25);
  color: #1e3a5f;
}
.afr-arrow {
  color: rgba(17,17,16,0.2);
  font-size: 13px;
  padding: 0 2px;
}

/* ── Flow-highlighted chips ──────────────────────────────────────────── */
.step-badge {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(30,64,175,0.15);
  color: #1e40af;
  font-size: 9px;
  font-weight: 800;
  margin-left: 4px;
  vertical-align: middle;
  -webkit-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s;
}
[data-chip] {
  -webkit-transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
[data-chip].step-lit {
  background: #dbeafe !important;
  color: #1e3a5f !important;
  border-color: #60a5fa !important;
  box-shadow: 0 1px 6px rgba(96,165,250,0.2) !important;
}
[data-chip].step-lit .step-badge {
  background: rgba(15,23,42,0.15);
  color: #0f172a;
}

/* Channel item with step number */
.arch-channel-item { position: relative; }
.flow-step-num {
  display: none;
  position: absolute;
  top: -7px; right: -7px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #1e40af;
  color: #fff;
  font-size: 9px; font-weight: 800;
  text-align: center; line-height: 16px;
}
.flow-step-voice.step-lit .flow-step-num { display: block; background: #60a5fa; color: #0f172a; }
.flow-step-voice {
  -webkit-transition: background 0.3s, border-color 0.3s;
  transition: background 0.3s, border-color 0.3s;
}
.flow-step-voice.step-lit {
  background: #dbeafe !important;
  border-color: #60a5fa !important;
  color: #1e3a5f !important;
}

/* Layer pulse highlight */
.flow-layer {
  -webkit-transition: background 0.35s ease; transition: background 0.35s ease;
}
.flow-layer.layer-lit {
  background: rgba(96,165,250,0.08);
}

/* ── Arch layer left rail labels update ─────────────────────────────── */
/* arch-layer-label.route border cleared */

/* Mobile: hide ribbon arrows, wrap ribbon */
@media (max-width: 768px) {
  .afr-arrow { display: none; }
  .arch-flow-ribbon { gap: 6px; justify-content: flex-start; padding: 10px 16px; }
  .arch-flow-step { font-size: 11px; padding: 4px 8px; }
}


/* ═══ SNAKING FLOW LINE ═════════════════════════════════════════════════
   A vertical progress spine runs down the left side of the platform box.
   Each layer segment lights up sequentially as the animation plays.
═══════════════════════════════════════════════════════════════════════ */
.arch-platform-box { position: relative; }

/* Vertical spine — sits on the left of the platform box, inside labels */
.arch-flow-spine {
  position: absolute;
  left: 3px;
  top: 0; bottom: 0;
  width: 4px;
  background: rgba(17,17,16,0.08);
  border-radius: 4px;
  z-index: 2;
  overflow: hidden;
}
.arch-flow-spine-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: #60a5fa;
  border-radius: 4px;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
  box-shadow: 0 0 10px rgba(96,165,250,0.7), 0 0 20px rgba(96,165,250,0.3);
}

/* Channel item animation — highlight one at a time */
.arch-channel-item {
  -webkit-transition: background 0.25s, border-color 0.25s, color 0.25s;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.arch-channel-item.chan-lit {
  background: #dbeafe !important;
  border-color: #60a5fa !important;
  color: #1e3a5f !important;
}
.arch-channel-item.chan-lit .arch-ch-svg { color: #1e40af; }

/* Layer left-rail highlight */
.arch-layer-label.layer-label-lit {
  background: #dbeafe;
  border-left-color: rgba(17,17,16,0.1) !important;
}
.arch-layer-label {
  -webkit-transition: background 0.3s, border-color 0.3s;
  transition: background 0.3s, border-color 0.3s;
}

/* Chip lit state */
[data-chip] {
  -webkit-transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
[data-chip].step-lit {
  background: #dbeafe !important;
  color: #1e3a5f !important;
  border-color: #60a5fa !important;
  box-shadow: 0 1px 6px rgba(96,165,250,0.2) !important;
}


/* ── Ribbon two-row layout ──────────────────────────────────────────── */
.arch-flow-ribbon {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -ms-flex-direction: column; flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(30,64,175,0.04);
  border-top: 1px solid rgba(30,64,175,0.1);
  border-bottom: 1px solid rgba(30,64,175,0.1);
  padding: 14px 24px 12px;
}
.afr-entry-row {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
}
.afr-entry-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.afr-entry-arrow {
  font-size: 12px; color: rgba(17,17,16,0.2);
}
.afr-sequence-row {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  gap: 4px;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  justify-content: center;
}
/* Override the old flex layout on .arch-flow-ribbon */
.arch-flow-ribbon > .arch-flow-step,
.arch-flow-ribbon > .afr-arrow { display: none; }

@media (max-width: 768px) {
  .afr-sequence-row { gap: 4px; }
  .afr-arrow { font-size: 11px; }
  .arch-flow-step .afr-label { font-size: 11px; }
}


/* Demo tabs + panel — unified rounded container */
.cursor-demo-wrap > .unified-tabs,
.cursor-demo-wrap > .demo-tabs {
  border-radius: 14px 14px 0 0 !important;
  overflow: hidden;
  /* Clip the tab bar corners */
}
.cursor-demo-panel {
  border-radius: 0 0 14px 14px !important;
}
/* Visual outer wrapper — add border that spans both */
.cursor-demo-wrap {
  border-radius: 14px;
  overflow: visible;
}
.cursor-demo-wrap > .unified-tabs {
  /* Add left/right/top border to match panel */
  border: 1px solid rgba(255,255,255,0.07);
  border-bottom: none;
}
.cursor-demo-panel {
  border-top: none !important;
}


/* ── Sector pills — prominent boxed style ──────────────────────────── */
.sectors-row {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 1000px;
  margin: 0 auto;
}
.sector-pill {
  display: inline-block;
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid rgba(17,17,16,0.12);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  white-space: nowrap;
  -webkit-transition: background 0.15s, border-color 0.15s, color 0.15s;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sector-pill:hover {
  background: #dbeafe;
  border-color: #60a5fa;
  color: #1e3a5f;
}
/* Logo bar spacing */
.logo-bar { padding: 32px 40px 28px; }


/* Demo outer frame — unified dark rounded container */
.demo-outer-frame {
  border-radius: 16px;
  overflow: hidden;
  background: #0f1828;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06);
}
/* Tab bar sits inside the dark frame — match its bg */
.demo-outer-frame .unified-tabs.demo-tabs {
  background: #0f1828 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  overflow: visible !important;
}
/* Tab text colors on dark bg */
.demo-outer-frame .unified-tab {
  color: rgba(255,255,255,0.5) !important;
}
.demo-outer-frame .unified-tab:hover {
  color: rgba(255,255,255,0.8) !important;
}
.demo-outer-frame .unified-tab.active {
  color: rgba(255,255,255,0.95) !important;
  border-bottom-color: rgba(255,255,255,0.9) !important;
}
/* Panel no longer needs its own border-radius */
.cursor-demo-panel {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
/* Remove old conflicting tab-wrap rules */
.cursor-demo-wrap > .unified-tabs { border: none !important; }



}

/* Wrap section inner content — used where we can't change the section el */
.arch-section .arch-inner,
.platform-section > *,
.testimonials-section,
.security-section > * {
  /* background handled by section-card wrapper */
}

/* Three-up cards inner grid */
.three-grid > div {
  background: var(--section-bg) !important;
}
.three-card-text {
  background: var(--section-bg) !important;
  border-color: rgba(17,17,16,0.06) !important;
}

/* Feature items */
.feature-item {
  background: transparent;
}
.feature-item.active {
  background: rgba(255,255,255,0.6);
}

/* Testi cards */
.testi-card-new {
  background: var(--section-bg) !important;
}

/* Integration cards */
.integration-category {
  background: var(--section-bg) !important;
}

/* Cert cards */
.cert-card {
  background: var(--section-bg) !important;
}

/* Platform panel content */
.platform-panel-content {
  background: var(--section-bg) !important;
}

/* Arch platform box */
.arch-platform-box {
  background: var(--section-bg);
}
.arch-channels {
  background: rgba(255,255,255,0.5);
}
.arch-integrations-row {
  background: rgba(255,255,255,0.4);
}

/* ═══ IMAGE BACKGROUNDS — #e6e5e0 behind screenshots/mockups ════════════ */
.persona-img {
  background: var(--img-bg) !important;
}
.three-card-img {
  background: var(--img-bg) !important;
}
.platform-panel-img {
  background: var(--img-bg) !important;
}
.demo-window {
  background: #ffffff !important;
}
/* The dark demo panel stays dark — it IS the image/illustration */
.cursor-demo-panel,
.demo-outer-frame {
  background: #0f1828 !important;
}
/* Persona paintings — these go ON TOP of the img-bg; keep them */
.persona-painting,
.paint-green-hills,
.paint-ocean,
.paint-blue-deep,
.paint-teal-field,
.paint-forest,
.paint-sage,
.paint-dusk,
.paint-amber {
  /* These are the image overlays — keep as-is */
}

/* Section box wrapper — applied via inline style or wrapper div */
.section-box {
  background: var(--section-bg);
  border-radius: 16px;
  margin: 0 32px;
  padding: 48px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .section-box { margin: 0 16px; padding: 32px 20px; }
}


@media (max-width: 768px) {
  .inner-three-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .persona-section { margin: 0 16px; }
}


}

/* Remove persona-section side margins */
.persona-section {
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Apply section bg directly to the section elements — full width */
.three-up,
.arch-section,
.platform-section,
.testimonials-section,
.security-section,
.integrations-section,
div[style*="padding"] > .persona-section,
section[style*="padding"] {
  background: transparent;
}

/* Full-width section bg blocks — applied directly to outer wrappers */
.three-up { background: var(--section-bg) !important; }
.arch-section { background: var(--section-bg) !important; }
.platform-section { background: var(--section-bg) !important; }
.testimonials-section { background: var(--section-bg) !important; }
.security-section { background: var(--section-bg) !important; }

/* Persona outer wrappers */
div[style*="padding: 48px 40px"] { background: var(--section-bg) !important; }
div[style*="padding: 60px 40px"] { background: var(--section-bg) !important; }

/* Integrations */
.integrations-section { background: var(--section-bg) !important; }
div[style*="padding"] .integrations-section { background: var(--section-bg) !important; }

/* Logo bar */
.logo-bar { background: var(--section-bg) !important; }

/* Cards inside sections — white on section-bg */
.testi-card-new,
.integration-category,
.cert-card {
  background: #ffffff !important;
}

/* Three-up inner cards */
.three-grid > div {
  background: #ffffff !important;
}
.three-card-text {
  background: #ffffff !important;
}

/* Platform panel content — white */
.platform-panel-content {
  background: #ffffff !important;
}

/* Arch platform box — white on section bg */
.arch-platform-box {
  background: #ffffff !important;
}
.arch-channels {
  background: rgba(255,255,255,0.7) !important;
}
.arch-integrations-row {
  background: rgba(255,255,255,0.6) !important;
}
.arch-diagram {
  background: #ffffff;
  border: 1px solid rgba(17,17,16,0.07);
  box-shadow: 0 2px 12px rgba(17,17,16,0.06);
}

/* Feature items on section bg */
.feature-item.active {
  background: rgba(255,255,255,0.7) !important;
}

/* Image area on section bg → use img-bg color */
.persona-img { background: var(--img-bg) !important; }
.platform-panel-img { background: var(--img-bg) !important; }
.three-card-img { background: var(--img-bg) !important; }


/* ═══ VISUAL HIERARCHY — page bg, section bg, card bg, image bg ══════
   Simple three-level system. No wrappers. Applied directly to elements.
═══════════════════════════════════════════════════════════════════════ */

/* Sections that get #f1f1ed background — full width, same as page */
.three-up,
.arch-section,
.platform-section,
.testimonials-section,
.security-section,
.logo-bar {
  background: #f1f1ed !important;
}

/* Persona outer wrappers */
section[style*="padding"],
div[style*="padding: 48px 40px"],
div[style*="padding: 60px 40px"] {
  background: #f1f1ed !important;
}

/* Integrations */
.integrations-section,
.integrations-section ~ * {
  background: #f1f1ed !important;
}

/* White cards ON TOP of section bg */
.testi-card-new,
.integration-category,
.cert-card,
.arch-platform-box,
.arch-diagram,
.demo-window,
.platform-panel-content {
  background: #ffffff !important;
}

/* Three-up inner cards */
.three-grid > div { background: #ffffff !important; }
.three-card-text { background: #ffffff !important; }

/* Arch sub-rows */
.arch-channels { background: rgba(255,255,255,0.6) !important; }
.arch-integrations-row { background: rgba(255,255,255,0.5) !important; }

/* Image areas */
.persona-img { background: #e6e5e0 !important; }
.platform-panel-img { background: #e6e5e0 !important; }
.three-card-img { background: #e6e5e0 !important; }

/* Feature item active */
.feature-item.active { background: rgba(255,255,255,0.6) !important; }

/* Dark demo section stays dark */
.cursor-demo-panel,
.demo-outer-frame { background: #0f1828 !important; }

/* Nav stays light */
nav { background: #fdfcf9 !important; }

/* Final CTA section dark */
.final-cta { background: #1e3a5f !important; }

/* Footer dark */
footer { background: #1a1a17 !important; }


/* ═══ ACCESSIBILITY ══════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -48px; left: 16px;
  background: #1e3a5f;
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  z-index: 1000;
  -webkit-transition: top 0.2s;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ═══ REDUCED MOTION — disable all animations & transitions ══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .arch-flow-spine-fill { -webkit-transition: none !important; transition: none !important; }
}

/* ═══ PRINT OPTIMIZATION ═════════════════════════════════════════════ */
@media print {
  nav, .nav-mobile-menu, .nav-overlay, .skip-link { display: none !important; }
  body { background: #fff !important; }
  section { page-break-inside: avoid; }
  .cursor-demo-panel, .demo-outer-frame { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ═══ HIGH CONTRAST MODE SUPPORT ═════════════════════════════════════ */
@media (forced-colors: active) {
  .btn-book-demo, .sector-pill, .arch-chip { border: 1px solid ButtonText; }
}


/* Footer heart — company blue, forced text presentation */
.footer-bottom span .footer-heart-icon,
.footer-bottom .footer-heart-icon,
.footer-heart-icon {
  color: #60a5fa !important;
  font-size: 13px;
  display: inline-block;
  -webkit-transform: translateY(0.5px);
  transform: translateY(0.5px);
}

/* ═══ CUSTOM SCROLLBAR — company blue ════════════════════════════════ */
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #60a5fa #f1f1ed;
}
/* WebKit (Chrome, Safari, Edge, Arc) */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: #f1f1ed;
}
::-webkit-scrollbar-thumb {
  background: #60a5fa;
  border-radius: 6px;
  border: 2px solid #f1f1ed;
}
::-webkit-scrollbar-thumb:hover {
  background: #1e40af;
}
::-webkit-scrollbar-corner {
  background: #f1f1ed;
}


/* ═══ GIANT FOOTER WORDMARK ══════════════════════════════════════════
   Modern oversized brand close — HGI in white, + in company blue.
   Slightly cropped at the bottom (Personio-style).
═══════════════════════════════════════════════════════════════════════ */
footer { overflow: hidden; }
.footer-wordmark {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 40px 0;
  line-height: 0;
  opacity: 0.3;
  /* Crop the bottom ~12% of the letters */
  margin-bottom: -0.14em;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}
.fw-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  /* Scale to container: HGI+ at ~4 glyphs → fill width */
  font-size: clamp(120px, 24vw, 340px);
  letter-spacing: -0.03em;
  line-height: 0.82;
  color: #fdfcf9;
  display: inline-block;
  white-space: nowrap;
  -webkit-transform: translateY(0.1em);
  transform: translateY(0.1em);
}
.fw-plus {
  color: #60a5fa;
}
@media (max-width: 640px) {
  .footer-wordmark { padding: 20px 16px 0; }
  .fw-text { font-size: clamp(90px, 26vw, 180px); }
}


/* ═══ FOOTER CERTS COLUMN ════════════════════════════════════════════ */
.footer-certs {
  min-width: 150px;
  max-width: 170px;
  margin: 0;
  padding: 0;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.footer-certs-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.footer-certs-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(64px, max-content));
  gap: 12px 16px;
  align-items: start;
}
.footer-certs .footer-cert-tile {
  display: block;
}
.footer-certs .footer-trust-widget {
  width: 100%;
  max-width: 164px;
  margin-top: 2px;
}
.footer-cert-badge {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.footer-trust-widget {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px 8px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  background: rgba(255,255,255,0.035);
  -webkit-transition: border-color 0.15s, background 0.15s, color 0.15s;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.footer-trust-widget:hover {
  border-color: rgba(96,165,250,0.45);
  background: rgba(96,165,250,0.08);
  color: rgba(255,255,255,0.92);
}
.footer-trust-icon {
  position: relative;
  width: 22px;
  height: 26px;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
  border: 1.5px solid currentColor;
  border-radius: 12px 12px 9px 9px;
  opacity: 0.9;
}
.footer-trust-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 8px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-top: 0;
  border-left: 0;
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
}
.footer-trust-copy {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}
.footer-trust-title {
  font-size: 12px;
  font-weight: 700;
  color: currentColor;
}
.footer-trust-url {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 920px) {
  .footer-certs { max-width: none; }
}

@media (max-width: 640px) {
  .footer-certs { padding: 0; }
  .footer-certs-badges { gap: 12px; }
}

/* ═══ FOOTER BOTTOM — 3-zone layout: left / center / right ═══════════ */
.footer-bottom {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  justify-content: space-between;
}
.fb-left  { text-align: left; }
.fb-center { text-align: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.fb-right { text-align: right; }
.footer-heart { margin-left: 0; }
@media (max-width: 640px) {
  .footer-bottom { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; gap: 10px; }
  .fb-left, .fb-center, .fb-right { text-align: center; }
}

/* GDPR consent bar */
.gdpr-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 220;
  opacity: 0;
  -webkit-transform: translateY(18px);
  transform: translateY(18px);
  pointer-events: none;
  -webkit-transition: opacity 0.22s ease, -webkit-transform 0.22s ease;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.gdpr-consent.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  pointer-events: auto;
}
.gdpr-consent-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 16px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(17,17,16,0.12);
  border-radius: 8px;
  -webkit-box-shadow: 0 16px 48px rgba(17,17,16,0.18), 0 4px 14px rgba(17,17,16,0.08);
  box-shadow: 0 16px 48px rgba(17,17,16,0.18), 0 4px 14px rgba(17,17,16,0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.gdpr-consent-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(17,17,16,0.72);
}
.gdpr-consent-actions {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  gap: 10px;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
}
.gdpr-consent-link {
  font-size: 13px;
  color: rgba(17,17,16,0.62);
  text-decoration: none;
  -webkit-transition: color 0.15s;
  transition: color 0.15s;
}
.gdpr-consent-link:hover { color: #1e40af; }
.gdpr-consent-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-transition: background 0.15s, border-color 0.15s, color 0.15s;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gdpr-consent-secondary {
  color: rgba(17,17,16,0.68);
  border: 1px solid rgba(17,17,16,0.16);
  background: rgba(17,17,16,0.03);
}
.gdpr-consent-secondary:hover {
  color: rgba(17,17,16,0.9);
  border-color: rgba(17,17,16,0.28);
  background: rgba(17,17,16,0.06);
}
.gdpr-consent-primary {
  color: #ffffff;
  background: #1e40af;
  border: 1px solid #1e40af;
}
.gdpr-consent-primary:hover {
  background: #1e3a8a;
  border-color: #1e3a8a;
}

@media (max-width: 720px) {
  .gdpr-consent { left: 12px; right: 12px; bottom: 12px; }
  .gdpr-consent-inner {
    -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .gdpr-consent-actions {
    width: 100%;
    -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
  }
}

/* ═══ FOOTER WORDMARK — centered ═════════════════════════════════════ */
.footer-wordmark {
  text-align: center;
}

/* ═══ PERSISTENT HELP WIDGET ═════════════════════════════════════════
   Floating "Ask about HGI" bar — appears after scrolling, hides at footer
═══════════════════════════════════════════════════════════════════════ */
.help-widget {
  position: fixed;
  bottom: 24px;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(90px);
  transform: translateX(-50%) translateY(90px);
  z-index: 150;
  width: min(480px, calc(100vw - 32px));
  opacity: 0;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
body.gdpr-consent-visible .help-widget { bottom: 112px; }
@media (max-width: 720px) {
  body.gdpr-consent-visible .help-widget { bottom: 184px; }
}
.help-widget.visible {
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.help-suggestions {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  opacity: 0;
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
  -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.help-widget.suggestions-open .help-suggestions {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  pointer-events: auto;
}
.help-chip {
  display: inline-block;
  padding: 10px 18px;
  background: rgba(30,58,95,0.92);
  color: #fff;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: 'DM Sans', sans-serif;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
  text-align: left;
}
.help-chip:hover { background: #1e40af; }
.help-bar {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid rgba(17,17,16,0.1);
  border-radius: 100px;
  padding: 8px 8px 8px 22px;
  -webkit-box-shadow: 0 8px 32px rgba(17,17,16,0.16), 0 2px 8px rgba(17,17,16,0.08);
  box-shadow: 0 8px 32px rgba(17,17,16,0.16), 0 2px 8px rgba(17,17,16,0.08);
  cursor: text;
}
.help-bar-placeholder {
  -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
  font-size: 14.5px;
  color: var(--ink-3);
  font-weight: 400;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.help-bar-send {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #60a5fa;
  border: none;
  cursor: pointer;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  justify-content: center;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}
.help-bar-send:hover { background: #1e40af; }
.help-bar-send svg { display: block; }
@media (max-width: 640px) {
  .help-widget { bottom: 16px; }
  .help-chip { font-size: 12.5px; padding: 9px 15px; }
}
@media print { .help-widget { display: none !important; } }


/* ═══════════════════════════════════════════════════════════════════════
   OMNICHANNEL ENFORCEMENT — realistic device scene
═══════════════════════════════════════════════════════════════════════ */
.omni-section { padding: 56px 40px 60px; background: #f1f1ed !important; }
.omni-inner { max-width: 1280px; margin: 0 auto; }
.omni-header { text-align: center; margin-bottom: 36px; }
.omni-h {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 400; line-height: 1.15; color: var(--ink);
  margin-bottom: 16px;
}
.omni-sub { font-size: 16px; font-weight: 300; color: var(--ink-2); line-height: 1.65; max-width: 640px; margin: 0 auto; }

.omni-stage {
  position: relative;
  background: #e6e5e0;
  border-radius: 16px;
  padding: 36px 0 28px;
  overflow: hidden;
}
.omni-badge-float {
  position: absolute; top: 18px; left: 22px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; gap: 8px;
  background: #ffffff; border: 1.5px solid #60a5fa; border-radius: 12px;
  padding: 8px 13px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  color: #1e40af; line-height: 1.25; z-index: 6;
  -webkit-box-shadow: 0 4px 16px rgba(30,64,175,0.12);
  box-shadow: 0 4px 16px rgba(30,64,175,0.12);
}

/* Icon tiles row */
.omni-icons-row {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  justify-content: center; gap: 26px;
  margin-bottom: 0; position: relative; z-index: 4;
}
.omni-icon-tile {
  width: 52px; height: 52px;
  background: #fff; border: 1px solid rgba(17,17,16,0.08);
  border-radius: 13px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; justify-content: center;
  -webkit-box-shadow: 0 2px 8px rgba(17,17,16,0.07);
  box-shadow: 0 2px 8px rgba(17,17,16,0.07);
}
.omni-icon-tile svg { width: 22px; height: 22px; }
.omni-icon-hgi { background: #1a1a17; border-color: #1a1a17; }
.omni-icon-hgi span { color: #60a5fa; font-size: 30px; font-weight: 700; line-height: 1; font-family: 'DM Sans', sans-serif; }
.omni-connector {
  width: 1px; height: 34px;
  background: rgba(30,64,175,0.35);
  margin: 0 auto;
  position: relative; z-index: 1;
}

/* ═══ SCENE — overlapping frames ═══ */
.omni-scene {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  min-height: 480px;
  padding: 0 8px;
}
.oc-frame {
  background: #fff;
  border-radius: 18px;
  -webkit-box-shadow: 0 12px 40px rgba(17,17,16,0.16), 0 0 0 1px rgba(17,17,16,0.05);
  box-shadow: 0 12px 40px rgba(17,17,16,0.16), 0 0 0 1px rgba(17,17,16,0.05);
  overflow: hidden;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}

/* Status bars */
.oc-statusbar {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  justify-content: space-between; align-items: center;
  padding: 8px 16px 4px;
  font-size: 11px; font-weight: 600;
}
.oc-statusbar.dark  { color: rgba(255,255,255,0.85); }
.oc-statusbar.light { color: var(--ink); }
.oc-status-icons { font-size: 8px; letter-spacing: 1px; opacity: 0.8; }

/* Shared avatar */
.oc-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
}
.oc-avatar-hgi { background: #1a1a17; color: #60a5fa; border-radius: 9px; font-size: 17px; }
.oc-avatar-hgi.lg { width: 34px; height: 34px; font-size: 20px; }
.oc-avatar-hgi.sm { width: 26px; height: 26px; font-size: 15px; border-radius: 50%; }
.oc-avatar-person { background: linear-gradient(135deg, #c98a6b, #9a5f43); color: #fff; font-size: 11px; }
.oc-back { font-size: 22px; color: var(--ink-2); line-height: 1; }
.oc-back.light { color: var(--ink); }

/* ── 1. VOICE (dark, far left, partial) ── */
.oc-voice {
  width: 218px;
  background: #1c1c1e;
  color: #fff;
  margin-right: -34px;
  margin-top: 46px;
  z-index: 1;
  -webkit-transform: rotate(-0.5deg);
  transform: rotate(-0.5deg);
}
.oc-voice-body { padding: 18px 16px 0; text-align: center; }
.oc-voice-timer { font-size: 24px; font-weight: 300; color: rgba(255,255,255,0.65); }
.oc-voice-name { font-size: 17px; font-weight: 600; margin-top: 2px; }
.oc-voice-sub { font-size: 10.5px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.oc-voice-transcript {
  margin: 16px 0 0;
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 11px;
  text-align: left;
}
.oc-vt-line { font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.8); font-style: italic; }
.oc-vt-tag { margin-top: 7px; font-size: 9.5px; font-weight: 700; color: #7CC08A; letter-spacing: 0.04em; }
.oc-voice-controls {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  justify-content: center; gap: 26px; margin-top: 20px;
}
.oc-vc { text-align: center; font-size: 10px; color: rgba(255,255,255,0.6); }
.oc-vc-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; justify-content: center;
  font-size: 16px; margin: 0 auto 5px;
}
.oc-voice-end {
  width: 48px; height: 48px; border-radius: 50%;
  background: #E0483E;
  margin: 18px auto -24px;
}

/* ── 2. EMAIL ── */
.oc-email {
  width: 280px;
  margin-right: -30px;
  margin-top: 22px;
  z-index: 2;
}
.oc-email-toolbar {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  justify-content: space-between; align-items: center;
  padding: 10px 14px 6px;
}
.oc-email-icons { font-size: 12px; color: var(--ink-3); }
.oc-email-subject { font-size: 14.5px; font-weight: 700; color: var(--ink); padding: 4px 14px 10px; border-bottom: 1px solid rgba(17,17,16,0.06); }
.oc-email-msg { padding: 10px 14px; border-bottom: 1px solid rgba(17,17,16,0.06); }
.oc-msg-head { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 9px; align-items: center; margin-bottom: 6px; }
.oc-msg-from { font-size: 12px; font-weight: 700; color: var(--ink); }
.oc-msg-to { font-size: 10px; color: var(--ink-3); }
.oc-msg-body { font-size: 11.5px; line-height: 1.55; color: var(--ink-2); }
.oc-msg-legal { margin-top: 8px; font-size: 9px; color: var(--ink-3); line-height: 1.45; border-top: 1px dashed rgba(17,17,16,0.12); padding-top: 6px; }

/* ── 3. HGI CHAT (center, front) ── */
.oc-chat {
  width: 300px;
  z-index: 5;
  margin-top: 0;
  -webkit-box-shadow: 0 18px 56px rgba(17,17,16,0.22), 0 0 0 1px rgba(17,17,16,0.06);
  box-shadow: 0 18px 56px rgba(17,17,16,0.22), 0 0 0 1px rgba(17,17,16,0.06);
}
.oc-chat-header {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(17,17,16,0.07);
}
.oc-chat-title { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; line-height: 1.2; }
.oc-chat-title strong { display: block; font-size: 14px; color: var(--ink); }
.oc-chat-title span { font-size: 10.5px; color: var(--ink-3); }
.oc-chat-actions { font-size: 13px; color: var(--ink-3); letter-spacing: 1px; }
.oc-chat-body { padding: 14px 14px 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; gap: 7px; min-height: 250px; }
.oc-cb {
  font-size: 12px; line-height: 1.55;
  padding: 10px 13px; border-radius: 14px; max-width: 88%;
}
.oc-cb.in  { background: #f1f1ed; color: var(--ink-2); align-self: flex-start; border-bottom-left-radius: 5px; }
.oc-cb.out { background: #5B5FC7; color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.oc-cb-meta { font-size: 10px; color: var(--ink-3); padding-left: 4px; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; gap: 8px; }
.oc-cite {
  display: inline-block; width: 14px; height: 14px;
  background: rgba(17,17,16,0.1); border-radius: 4px;
  font-size: 9px; font-weight: 700; text-align: center; line-height: 14px;
  vertical-align: 1px; color: var(--ink-2);
}
.oc-enforced-tag {
  display: inline-block; padding: 2px 8px;
  background: #dbeafe; border: 1px solid #60a5fa; border-radius: 100px;
  font-size: 9px; font-weight: 700; color: #1e3a5f;
}
.oc-chat-input {
  margin: 6px 12px 14px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; justify-content: space-between;
  border: 1px solid rgba(17,17,16,0.12);
  border-radius: 100px;
  padding: 9px 8px 9px 15px;
  font-size: 12.5px; color: var(--ink-3);
  -webkit-box-shadow: 0 2px 10px rgba(17,17,16,0.06);
  box-shadow: 0 2px 10px rgba(17,17,16,0.06);
}
.oc-chat-send {
  width: 28px; height: 28px; border-radius: 50%;
  background: #60a5fa; color: #0f172a;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}

/* ── 4. WHATSAPP-style ── */
.oc-wa {
  width: 262px;
  margin-left: -30px;
  margin-top: 26px;
  z-index: 3;
  background: #F7F4EF;
}
.oc-wa-header {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(17,17,16,0.07);
}
.oc-wa-title { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; line-height: 1.2; }
.oc-wa-title strong { display: block; font-size: 12.5px; color: var(--ink); }
.oc-wa-title span { font-size: 9.5px; color: var(--ink-3); }
.oc-wa-icons { font-size: 12px; color: #1e40af; }
.oc-wa-body {
  padding: 12px 10px 16px;
  background:
    radial-gradient(circle at 20% 30%, rgba(17,17,16,0.015) 0 2px, transparent 2px),
    #EFE9E1;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;
  gap: 6px;
  min-height: 240px;
}
.oc-wb {
  font-size: 11.5px; line-height: 1.5;
  padding: 7px 10px 5px; border-radius: 9px; max-width: 88%;
  position: relative;
  -webkit-box-shadow: 0 1px 1px rgba(17,17,16,0.06);
  box-shadow: 0 1px 1px rgba(17,17,16,0.06);
}
.oc-wb.out { background: #D9FDD3; color: #111; align-self: flex-end; border-top-right-radius: 2px; }
.oc-wb.in  { background: #FFFFFF; color: #111; align-self: flex-start; border-top-left-radius: 2px; }
.oc-wb-time {
  display: block; text-align: right;
  font-size: 8.5px; color: rgba(17,17,16,0.4);
  margin-top: 2px;
}
.oc-ticks { color: #53BDEB; font-weight: 700; letter-spacing: -2px; }

/* ── 5. DM-style (far right, partial) ── */
.oc-dm {
  width: 236px;
  margin-left: -28px;
  margin-top: 52px;
  z-index: 2;
  -webkit-transform: rotate(0.5deg);
  transform: rotate(0.5deg);
}
.oc-dm-header {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(17,17,16,0.07);
  font-size: 12.5px; color: var(--ink);
}
.oc-dm-header strong { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.oc-dm-body {
  padding: 10px 10px 16px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;
  gap: 6px; min-height: 220px;
}
.oc-dm-date { text-align: center; font-size: 9px; color: var(--ink-3); margin-bottom: 2px; }
.oc-db {
  font-size: 11.5px; line-height: 1.5;
  padding: 8px 11px; border-radius: 16px; max-width: 88%;
}
.oc-db.out { background: linear-gradient(135deg, #A855F7, #8B5CF6); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.oc-db.in  { background: #f1f1ed; color: var(--ink-2); align-self: flex-start; border-bottom-left-radius: 5px; }
.oc-hipaa-tag {
  display: inline-block; margin-top: 4px; padding: 2px 8px;
  background: #dbeafe; border: 1px solid #60a5fa; border-radius: 100px;
  font-size: 8.5px; font-weight: 700; color: #1e3a5f; letter-spacing: 0.02em;
}

/* Caption */
.omni-caption {
  margin-top: 30px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; justify-content: center;
  gap: 14px; -ms-flex-wrap: wrap; flex-wrap: wrap;
  padding: 0 24px;
}
.omni-caption-text { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.omni-caption-badges { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.omni-reg-badge {
  padding: 5px 12px; background: #ffffff;
  border: 1px solid rgba(17,17,16,0.12); border-radius: 100px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}

/* Responsive — horizontal scroll keeps the scene intact */
@media (max-width: 1180px) {
  .omni-scene {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 24px 16px;
  }
  .omni-scene::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
  .omni-section { padding: 44px 20px 48px; }
  .omni-icons-row { gap: 14px; }
  .omni-icon-tile { width: 44px; height: 44px; border-radius: 11px; }
  .omni-badge-float { position: static; margin: 0 auto 16px; width: -webkit-max-content; width: max-content; }
  .oc-chat { width: 280px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   NAV MEGA-MENU DROPDOWNS (desktop only)
═══════════════════════════════════════════════════════════════════════ */
.nav-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; }
.nav-link-btn {
  background: transparent; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center; gap: 5px;
}
.nav-caret {
  font-size: 9px; line-height: 1;
  -webkit-transition: -webkit-transform 0.18s ease;
  transition: transform 0.18s ease;
  opacity: 0.55;
}
.nav-item.open > .nav-link-btn { color: var(--ink); background: rgba(17,17,16,0.06); border-radius: 5px; }
.nav-item.open .nav-caret { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.nav-dropdown {
  position: fixed;
  top: 68px;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-6px);
  transform: translateX(-50%) translateY(-6px);
  background: #ffffff;
  border: 1px solid rgba(17,17,16,0.07);
  border-radius: 16px;
  -webkit-box-shadow: 0 24px 64px rgba(17,17,16,0.18), 0 4px 16px rgba(17,17,16,0.08);
  box-shadow: 0 24px 64px rgba(17,17,16,0.18), 0 4px 16px rgba(17,17,16,0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.18s ease, -webkit-transform 0.18s ease, visibility 0s linear 0.18s;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 300;
  margin-top: 6px;
}
.nav-item.open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
  -webkit-transition: opacity 0.18s ease, -webkit-transform 0.18s ease, visibility 0s linear 0s;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

/* Panel sizes */
.nav-dd-product { width: min(1220px, calc(100vw - 40px)); padding: 28px 0 0; }
.nav-dd-ai      { width: min(620px,  calc(100vw - 40px)); padding: 28px 0 24px; }
.nav-dd-sm      { width: 320px; padding: 18px 12px; }

/* Columns */
.nav-dd-cols {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  padding: 0 8px;
}
.nav-dd-col {
  -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
  padding: 0 26px 26px;
  border-right: 1px solid rgba(17,17,16,0.07);
}
.nav-dd-col:last-child { border-right: none; }

.nav-dd-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.nav-dd-item {
  display: block;
  text-decoration: none;
  padding: 7px 10px;
  margin: 0 -10px 4px;
  border-radius: 9px;
  -webkit-transition: background 0.13s;
  transition: background 0.13s;
}
.nav-dd-item:hover { background: rgba(17,17,16,0.045); }
.nav-dd-item strong {
  display: block;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  line-height: 1.3;
}
.nav-dd-item:hover strong { color: #1e40af; }
.nav-dd-item span {
  display: block;
  font-size: 12.5px; font-weight: 400; color: var(--ink-3);
  line-height: 1.4; margin-top: 1px;
}
.nav-dd-minigrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin-top: 4px;
}
.nav-dd-mini {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  text-decoration: none;
  padding: 5px 10px;
  margin: 0 -10px;
  border-radius: 7px;
  -webkit-transition: background 0.13s, color 0.13s;
  transition: background 0.13s, color 0.13s;
  white-space: nowrap;
}
.nav-dd-mini:hover { background: rgba(17,17,16,0.045); color: #1e40af; }
.nav-dd-mini svg { width: 14px; height: 14px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; }

.nav-dd-footer {
  border-top: 1px solid rgba(17,17,16,0.07);
  padding: 16px 34px;
}
.nav-dd-footer a {
  font-size: 14px; font-weight: 600; color: var(--ink);
  text-decoration: none;
  -webkit-transition: color 0.13s;
  transition: color 0.13s;
}
.nav-dd-footer a:hover { color: #1e40af; }

/* Small panels: items only */
.nav-dd-sm .nav-dd-item { margin: 0 0 2px; padding: 8px 12px; }

/* Invisible hover bridge across the gap between nav and panel */
.nav-item.has-dropdown::after {
  content: '';
  position: absolute;
  left: -24px; right: -24px;
  top: 100%; height: 34px;
  display: none;
}
.nav-item.open.has-dropdown::after { display: block; }

/* Hide dropdowns on mobile — hamburger handles nav there */
@media (max-width: 1024px) {
  .nav-dropdown { display: none !important; }
}


/* ═══ OFFICIAL CERT BADGE SVGs ═══════════════════════════════════════ */
.cert-mark-svg {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  justify-content: center;
  margin-bottom: 14px;
  color: rgba(17,17,16,0.55);           /* line-art ink on light cards */
}
.cert-mark-svg .cert-svg { width: 84px; height: 70px; }
.cert-mark-svg .seal-band { fill: #ffffff; }

.footer-cert-tile {
  display: inline-block;
  color: rgba(255,255,255,0.55);        /* line-art white on dark footer */
  -webkit-transition: color 0.2s; transition: color 0.2s;
}
.footer-cert-tile:hover { color: rgba(255,255,255,0.9); }
.footer-cert-tile .cert-svg { width: 64px; height: 66px; display: block; }
.footer-cert-tile .seal-band { fill: #1a1a17; }
.footer-cert-tile { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; }

/* Generated replacements for legacy inline styles. */
.nav-dd-label-spaced { margin-top:18px; }
.window-dot-red { background:#E05C5C }
.window-dot-yellow { background:#F0B840 }
.window-dot-green { background:#40B840 }
.nav-section-spaced { margin-top:12px }
.text-blue { color:#1e40af }
.bar-91-green { width:91%;background:#7FB88C }
.text-green { color:#166534 }
.bar-73-blue { width:73%;background:#93c5fd }
.vendor-warning-note { font-size:9px;color:#C04040;display:block;margin-top:1px }
.bar-48-red { width:48%;background:#E5A099 }
.text-red { color:#C04040 }
.pill-spaced { display:inline-block;margin-bottom:18px; }
.bar-50-green { width:50%;background:#7FB88C }
.bar-35-blue { width:35%;background:#93c5fd }
.bar-15-red { width:15%;background:#E5A099 }
.small-success-note { margin-top:8px;font-size:9px;color:#2A7A3A;font-weight:600; }
.cost-bar-24 { height:24px }
.cost-bar-28 { height:28px }
.cost-bar-22 { height:22px }
.cost-bar-26 { height:26px }
.cost-bar-20 { height:20px }
.cost-bar-16 { height:16px }
.cost-bar-14 { height:14px }
.cost-success-note { font-size:9px;color:#2A7A3A;font-weight:600;margin-top:4px; }
.section-panel { padding: 60px 40px; background: #f1f1ed; }
.section-container { padding:0; max-width:1200px; margin:0 auto; }
.text-alert-small { color:#C04040;font-size:10px;font-weight:600; }
.mini-alert-spaced { margin-top:10px }
.audit-kicker { font-size:9px;color:#AAA;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px; }
.dot-blue { background:#1e40af }
.dot-sky { background:#60a5fa }
.transparent-section { background:transparent!important; }