/* ============================================================
   MITHRA 2026 — Home page improvements (Attio-audit pass)
   Editorial spine · animated product moments · scale band ·
   pull-quotes · capability strip · perf
   Depends on: mithra.css, home.css, product-ui.css
   ============================================================ */

/* ---------- Chapter eyebrow (numbered editorial spine) ---------- */
.chapter-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  color: var(--slate);
}
.chapter-eyebrow .ce-num {
  font-weight: 600; color: var(--ink);
  border: 1px solid var(--soft-border); border-radius: 7px;
  padding: 3px 9px; line-height: 1; background: var(--off-white);
}
.chapter-eyebrow .ce-rule { width: 26px; height: 2px; background: var(--accent); border-radius: 2px; }
.chapter-eyebrow.on-dark { color: rgba(255,255,255,.66); }
.chapter-eyebrow.on-dark .ce-num { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.chapter-eyebrow.on-dark .ce-rule { background: rgba(255,255,255,.6); }

/* a small "live" badge for product panels */
.live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green); margin-left: auto;
}
.live-badge .lb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(36,161,72,.5); animation: lbPulse 1.8s var(--ease) infinite; }
@keyframes lbPulse { 0%{ box-shadow: 0 0 0 0 rgba(36,161,72,.45);} 70%{ box-shadow: 0 0 0 7px rgba(36,161,72,0);} 100%{ box-shadow: 0 0 0 0 rgba(36,161,72,0);} }
@media (prefers-reduced-motion: reduce){ .live-badge .lb-dot { animation: none; } }

/* ---------- Chapter layout (text column + product panel) ---------- */
.chapter { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(36px,5vw,72px); align-items: center; }
.chapter.flip .chapter-copy { order: 2; }
.chapter.flip .chapter-visual { order: 1; }
@media (max-width: 960px){ .chapter { grid-template-columns: 1fr; gap: 40px; } .chapter.flip .chapter-copy, .chapter.flip .chapter-visual { order: initial; } }
.chapter-copy .agent-id { margin-top: 22px; }
.chapter-copy .h2 { margin-top: 18px; }
.chapter-copy .lede { margin-top: 16px; }
/* keep chapter headers to ~2 lines as the copy column narrows, before the
   layout stacks to its mobile single-column form */
@container (max-width: 1060px) { .chapter-copy .h2 { font-size: 40px; line-height: 1.09; } }
@container (max-width: 940px)  { .chapter-copy .h2 { font-size: 33px; } }
@container (max-width: 850px)  { .chapter-copy .h2 { font-size: 29px; } }
@media (min-width: 961px) and (max-width: 1099px) {
  .chapter-copy .h2 { font-size: clamp(30px, 3.5vw, 39px); line-height: 1.09; }
}


/* Customer stories headline — wider head + one step smaller type so the
   two-beat line breaks as two lines, not three */
.section-head.cstories-head { max-width: 880px; }
.section-head.cstories-head .h2 { font-size: clamp(27px, 3.3vw, 42px); }

/* ---------- Agent lockup — ElevenLabs-style proportions ----------
   Big circle (84px), title (~31px medium) over a near-same-size gray
   subtitle, text block vertically centered, ~30px gap from the logo. */
.agent-id { align-items: center; gap: 30px; }
.agent-id .agent-orb { width: 84px; height: 84px; }
.agent-id .agent-name {
  margin: 0; font-size: clamp(26px, 2.6vw, 31px); font-weight: 500;
  letter-spacing: -.015em; line-height: 1.2;
}
.agent-id .tag {
  display: block; margin-top: 6px; padding: 0;
  background: none; border-radius: 0; text-transform: none;
  font-family: var(--font-body); font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 400; letter-spacing: -.01em; line-height: 1.3;
  color: var(--slate-light);
}

/* compact agent roster used inside a chapter (2-col, profile rows) */
.roster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 36px; margin-top: 26px; }
@media (max-width: 540px){ .roster-2 { grid-template-columns: 1fr; } }
.roster-2 .sub-agent { padding: 14px 0; align-items: flex-start; }
.roster-2 .sub-orb { margin-top: 1px; }

/* ---------- Pull-quote (woven into chapters) ---------- */
.pull-quote {
  margin: 28px 0 0; padding: 18px 22px; border-left: 3px solid var(--accent);
  background: var(--off-white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.bg-offwhite .pull-quote { background: #fff; }
.pull-quote blockquote { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: 17px; line-height: 1.45; color: var(--ink); letter-spacing: -.01em; }
.pull-quote figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--slate); }
.pull-quote figcaption img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.pull-quote figcaption b { font-family: var(--font-head); color: var(--ink); font-weight: 600; }

/* ---------- Product panel chrome (shared) ---------- */
.prod-panel { box-shadow: var(--shadow-lg); }
.prod-panel .pp-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  border-bottom: 1px solid #eef2f8; background: #fff;
}
.prod-panel .pp-title { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: #1f2733; }
.prod-panel .pp-sub { font-size: 12px; color: var(--slate); }

/* ---------- Atlas: live classification table ---------- */
/* hero demo-engine look: count-up KPI row + "Categorizing…" toolbar + per-row flash */
.atlas-classify { container-type: inline-size; }
.atlas-classify .pp-head { padding-left: 22px; padding-right: 22px; }
.acl-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 16px 22px 14px; }
.acl-kpi { background: #F2F3FA; border-radius: 12px; padding: 14px 16px; }
.acl-kpi-l { display: block; font-size: 13px; font-weight: 600; color: #5b6473; }
.acl-kpi-n { display: block; margin-top: 8px; font-family: var(--font-head); font-weight: 700; font-size: 27px; letter-spacing: -.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.acl-toolbar { display: flex; align-items: center; gap: 10px; padding: 11px 22px; border-top: 1px solid #eef2f8; border-bottom: 1px solid #eef2f8; font-size: 12.5px; font-weight: 600; color: var(--slate); }
.acl-grp { display: inline-flex; align-items: center; gap: 8px; color: var(--really-blue); }
.acl-toggle { width: 30px; height: 17px; border-radius: 100px; background: var(--really-blue); position: relative; flex: 0 0 auto; }
.acl-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.acl-rerun { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--really-blue); background: #fff; color: var(--really-blue); cursor: default; }
.acl-rerun .acl-rerun-ic { width: 14px; height: 14px; flex: 0 0 auto; }
.acl-rerun .acl-spin { display: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #cfd9ea; border-top-color: var(--really-blue); flex: 0 0 auto; animation: clSpin .7s linear infinite; }
.acl-rerun.running .acl-rerun-ic { display: none; }
.acl-rerun.running .acl-spin { display: inline-block; }

.atlas-classify .tbl-cat tbody td { vertical-align: middle; }
/* distribute the 3 columns: spend line | category+confidence | spend */
.atlas-classify .tbl-cat { table-layout: fixed; }
.atlas-classify .tbl-cat th:first-child,
.atlas-classify .tbl-cat td.sup { width: 43%; }
.atlas-classify .tbl-cat th.cl-cat,
.atlas-classify .tbl-cat td.cl-cat { width: 40%; }
.atlas-classify .tbl-cat th.amt,
.atlas-classify .tbl-cat td.amt { width: 17%; text-align: right; }
.atlas-classify .tbl-cat th.amt,
.atlas-classify .tbl-cat td.amt { padding-left: 6px; padding-right: 16px; overflow: visible; }
/* even, generous gutters that line up with the KPI / toolbar edges */
.atlas-classify .tbl-cat thead th,
.atlas-classify .tbl-cat tbody td { padding: 13px 22px; }
.atlas-classify .atlas-foot { padding-left: 22px; padding-right: 22px; }
/* category chip on top, confidence on a second line — gives the chip the full column width */
.atlas-classify .tbl-cat td, .atlas-classify .tbl-cat th { overflow: hidden; }
.atlas-classify .cl-cat { min-width: 0; }
.atlas-classify .cl-result { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; min-width: 0; }
.atlas-classify .cl-result .cat-chip { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.atlas-classify .cl-result .conf { flex: 0 0 auto; white-space: nowrap; }
/* let the spend-line description use its full column instead of wrapping at 190px */
.atlas-classify .tbl-cat .reason { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* confidence rendered as a borderless dot + "NN% confidence" (not a pill) */
.atlas-classify .cl-result .conf { background: transparent; padding: 0; border-radius: 0; font-weight: 500; font-size: 12.5px; color: #4a5363; }
/* responsiveness: scale the panel to its own container width */
@container (max-width: 480px) {
  .acl-kpis { gap: 10px; padding: 14px 14px 12px; }
  .acl-kpi { padding: 12px 13px; }
  .acl-kpi-l { font-size: 12px; }
  .acl-kpi-n { font-size: 20px; }
  .atlas-classify .tbl-cat th:first-child,
  .atlas-classify .tbl-cat td.sup { width: 40%; }
  .atlas-classify .tbl-cat th.cl-cat,
  .atlas-classify .tbl-cat td.cl-cat { width: 39%; }
  .atlas-classify .tbl-cat th.amt,
  .atlas-classify .tbl-cat td.amt { width: 21%; padding-left: 4px; padding-right: 12px; }
  .acl-toolbar { padding: 10px 14px; flex-wrap: wrap; }
  .atlas-classify .tbl-cat { font-size: 12.5px; }
  .atlas-classify .tbl-cat thead th { padding: 12px 14px; }
  .atlas-classify .tbl-cat tbody td { padding: 12px 14px; }
  .cl-cat { min-width: 150px; }
  .atlas-classify .tbl-cat .reason { display: none; }
}
.cl-cat { min-width: 188px; }
/* Reserve the resolved (two-line chip + confidence) height in the pending
   state so rows don't grow as they classify — keeps the panel height fixed
   through the whole animation. */
.cl-spin { display: none; align-items: center; gap: 8px; min-height: 59px; }
.cl-spin::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--soft-border); border-top-color: var(--really-blue);
  animation: clSpin .7s linear infinite; flex: 0 0 auto;
}
.cat-chip.cat-unknown { border-style: dashed; border-color: #cdd5e0; color: var(--slate); background: #f6f8fb; }
.conf-pend { background: #eef1f6; color: var(--slate); }
.dot-grey { background: #b6c0ce; }
@keyframes clSpin { to { transform: rotate(360deg); } }
.cl-result { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* during animation: rows not yet classified show the spinner */
.atlas-classify.anim-pending .clr:not(.classified) .cl-result { display: none; }
.atlas-classify.anim-pending .clr:not(.classified) .cl-spin { display: inline-flex; }
.atlas-classify.anim-pending .clr:not(.classified) { opacity: .55; }
.atlas-classify .clr { transition: opacity .4s var(--ease); }
.clr.classified .cl-result { animation: clPop .45s var(--ease); }
.clr.classified { animation: clRowFlash 1s var(--ease); }
@keyframes clPop { from { opacity: 0; transform: translateY(5px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes clRowFlash { 0% { background: rgba(46,158,87,.16); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce){ .clr.classified .cl-result, .clr.classified { animation: none; } }
.atlas-foot { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-top: 1px solid #eef2f8; font-size: 12.5px; color: var(--slate); }
.atlas-foot .ic { width: 16px; height: 16px; color: var(--green); flex: 0 0 auto; }
.atlas-foot b { color: var(--really-blue); font-family: var(--font-head); }

/* ---------- Pulse: ranked opportunities populate ---------- */
.pulse-opps .opp-rr { transition: opacity .55s var(--ease), transform .55s var(--ease); }
.pulse-opps.anim-pending .opp-rr { opacity: 0; transform: translateY(12px); }
.pulse-opps .opp-rr.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .pulse-opps.anim-pending .opp-rr { opacity: 1; transform: none; } }
.opp-rank-hd .orh-val .ohv-sub { font-size: 13px; color: var(--slate); font-weight: 500; margin-left: 6px; letter-spacing: 0; }

/* ---------- Data-flow strip: staggered build + node pop + rail draw ---------- */
#flowStrip.flow-anim .flow-step, #atlasFlow.flow-anim .flow-step { opacity: 0; transform: translateY(14px); transition: opacity .34s var(--ease), transform .34s var(--ease); }
#flowStrip.flow-anim .flow-step.in, #atlasFlow.flow-anim .flow-step.in { opacity: 1; transform: none; }
/* each node pops in… */
#flowStrip.flow-anim .flow-step .fs-ic, #atlasFlow.flow-anim .flow-step .fs-ic {
  transform: scale(.55); opacity: 0;
  transition: transform .34s cubic-bezier(.34,1.56,.64,1), opacity .26s var(--ease);
}
#flowStrip.flow-anim .flow-step.in .fs-ic, #atlasFlow.flow-anim .flow-step.in .fs-ic { transform: scale(1); opacity: 1; }
/* …then its rail segment draws left → right toward the next node */
#flowStrip.flow-anim .flow-step::after, #atlasFlow.flow-anim .flow-step::after {
  transform: scaleX(0); transform-origin: left center; transition: transform .34s var(--ease) .1s;
}
#flowStrip.flow-anim .flow-step.in::after, #atlasFlow.flow-anim .flow-step.in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce){
  #flowStrip.flow-anim .flow-step, #atlasFlow.flow-anim .flow-step { opacity: 1 !important; transform: none !important; }
  #flowStrip.flow-anim .flow-step .fs-ic, #atlasFlow.flow-anim .flow-step .fs-ic { opacity: 1 !important; transform: none !important; }
  #flowStrip.flow-anim .flow-step::after, #atlasFlow.flow-anim .flow-step::after { transform: scaleX(1) !important; }
}

/* ---------- Capability strip (replaces heavy use-case grid) ---------- */
.cap-strip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 34px; }
.cap-strip a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  padding: 11px 18px; border: 1px solid var(--soft-border); border-radius: var(--radius-pill);
  background: #fff; transition: border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cap-strip a .ic { width: 17px; height: 17px; color: var(--slate-light); transition: color .18s; }
.cap-strip a:hover { border-color: var(--border-strong); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cap-strip a:hover .ic { color: var(--accent-text); }

/* ---------- Scale / trust metrics band (in dark enterprise section) ---------- */
.scale-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-left: auto; margin-right: auto;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.03); overflow: hidden;
}
.scale-cell { padding: 30px 24px; text-align: center; position: relative; }
.scale-cell + .scale-cell::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: rgba(255,255,255,.13); }
.scale-num { font-family: var(--font-head); font-weight: 700; font-size: clamp(34px,3.6vw,46px); line-height: 1; letter-spacing: -.03em; color: var(--clear-sky); display: block; }
.scale-cap { display: block; margin-top: 12px; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.72); max-width: 210px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px){
  .scale-band { grid-template-columns: 1fr 1fr; }
  .scale-cell:nth-child(odd)::before { display: none; }
  .scale-cell:nth-child(n+3)::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: rgba(255,255,255,.13); }
}

/* ---------- Hero: secondary (lighter friction) CTA line ---------- */
.hero-2nd { margin-top: 18px; font-size: 15px; color: rgba(255,255,255,.7); max-width: 480px; }
.hero-2nd a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; transition: border-color .18s; }
.hero-2nd a:hover { border-color: #fff; }
.hero-2nd a .ic { width: 15px; height: 15px; }

/* ---------- Hero: tightened type + credibility metric strip ---------- */
.hero .hero-copy .h1 { font-size: clamp(34px, 4.4vw, 58px); }
.hero .hero-copy .lede { font-size: clamp(16px, 1.25vw, 18px); margin-top: 18px; }
.hero .hero-copy .mt-32 { margin-top: 26px; }
.hero .hero-copy .btn-lg { padding: 13px 24px; font-size: 15.5px; }

.hero-metrics {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: clamp(18px, 2.6vw, 38px); margin-top: 34px;
  justify-content: start; align-items: start;
}
.hero-metric { position: relative; padding-left: clamp(18px, 2.6vw, 38px); }
.hero-metric:first-child { padding-left: 0; }
.hero-metric:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 5px;
  width: 1px; background: rgba(255,255,255,.16);
}
.hero-metric .stat-num { display: block; font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -.02em; }
.hero-metric .stat-label { display: block; font-size: 12.5px; margin-top: 5px; white-space: nowrap; }
@media (max-width: 520px){
  .hero-metrics { grid-template-columns: 1fr 1fr; gap: 22px 26px; }
}

/* ---------- Atlas hero: before → after resolution ---------- */
.ba.anim-resolve .ba-mid, .ba.anim-resolve .ba-after { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.ba.anim-resolve.anim-pending .ba-mid { opacity: 0; }
.ba.anim-resolve.anim-pending .ba-after { opacity: 0; transform: translateX(16px); }
.ba.anim-resolve.resolved .ba-mid { opacity: 1; }
.ba.anim-resolve.resolved .ba-after { opacity: 1; transform: none; }
.ba.anim-resolve.anim-pending .ba-mid .ic svg { animation: baSpin 1s linear infinite; }
@keyframes baSpin { to { transform: rotate(450deg); } }
@media (prefers-reduced-motion: reduce){
  .ba.anim-resolve.anim-pending .ba-mid, .ba.anim-resolve.anim-pending .ba-after { opacity: 1; transform: none; }
  .ba.anim-resolve.anim-pending .ba-mid .ic svg { animation: none; }
}

/* ---------- Pulse hero: opportunity card populate ---------- */
.opp-card-anim .opp-row, .opp-card-anim .opp-actions { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.opp-card-anim.anim-pending .opp-row, .opp-card-anim.anim-pending .opp-actions { opacity: 0; transform: translateY(10px); }
.opp-card-anim .opp-row.in, .opp-card-anim .opp-actions.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .opp-card-anim.anim-pending .opp-row, .opp-card-anim.anim-pending .opp-actions { opacity: 1; transform: none; }
}

/* ---------- Treemap: spend cells tile in ---------- */
.tm-anim .tm-cell { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tm-anim.anim-pending .tm-cell { opacity: 0; transform: scale(.94); }
.tm-anim .tm-cell.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .tm-anim.anim-pending .tm-cell { opacity: 1; transform: none; } }

/* ---------- Review queue: items arrive one by one ---------- */
.revq-anim .rev-item { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.revq-anim.anim-pending .rev-item { opacity: 0; transform: translateY(12px); }
.revq-anim .rev-item.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .revq-anim.anim-pending .rev-item { opacity: 1; transform: none; } }

/* ---------- Taxonomy Builder: spine nodes appear, then leaf rows LOAD in ----------
   On scroll-in: the two level-1 spend nodes fade/slide in, then each of the 14
   subcategory rows resolves one-by-one — a shimmering skeleton bar holds the row's
   place, then its content fades in and the spend bar fills from zero. */
.tax-anim .tax-node { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tax-anim.anim-pending .tax-node { opacity: 0; transform: translateX(-10px); }
.tax-anim .tax-node.in { opacity: 1; transform: none; }

/* leaf rows: hold their place + position skeleton overlay */
.tax-anim .tax-leaf { position: relative; }
.tax-anim .tax-leaf > * { transition: opacity .35s var(--ease); }
/* spend bar fills from zero via scaleX (transform so the anim-off net can reset it) */
.tax-anim .tax-leaf .tl-track i { transform-origin: left center; transition: transform .7s var(--ease); }
.tax-anim.anim-pending .tax-leaf:not(.in) .tl-track i { transform: scaleX(0); }

/* while a row is still loading: hide its content, show the shimmer skeleton bar */
.tax-anim.anim-pending .tax-leaf:not(.in) > * { opacity: 0; }
.tax-anim.anim-pending .tax-leaf:not(.in)::after {
  content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 11px;
  transform: translateY(-50%); border-radius: 6px; pointer-events: none;
  background: linear-gradient(90deg, #dde3ec 25%, #eef2f8 37%, #dde3ec 63%);
  background-size: 340px 100%; animation: loadShimmer 1.15s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .tax-anim.anim-pending .tax-node { opacity: 1; transform: none; }
  .tax-anim.anim-pending .tax-leaf > * { opacity: 1; }
  .tax-anim.anim-pending .tax-leaf .tl-track i { transform: none; }
  .tax-anim.anim-pending .tax-leaf:not(.in)::after { display: none; }
}

/* ---------- Supplier resolution: alias rows LOAD in one by one ----------
   Same loading vocabulary as the taxonomy: each resolved-alias row holds its
   place with a shimmering skeleton, then its content fades in. */
.sup-anim .sd-child { position: relative; }
.sup-anim .sd-child > * { transition: opacity .35s var(--ease); }
.sup-anim.anim-pending .sd-child:not(.in) > * { opacity: 0; }
.sup-anim.anim-pending .sd-child:not(.in)::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 12px;
  transform: translateY(-50%); border-radius: 6px; pointer-events: none;
  background: linear-gradient(90deg, #dde3ec 25%, #eef2f8 37%, #dde3ec 63%);
  background-size: 340px 100%; animation: loadShimmer 1.15s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .sup-anim.anim-pending .sd-child > * { opacity: 1; }
  .sup-anim.anim-pending .sd-child:not(.in)::after { display: none; }
}

/* ---------- Integrations arch: sources → core → destinations flow ----------
   On scroll-in the source nodes rise in, the arrow lights, the Mithra core
   pops, the second arrow lights, then the destination nodes rise in — then
   the arrows pulse + core glows to suggest live data movement. */
.arch-anim .arch-node, .arch-anim .arch-label, .arch-anim .arch-core, .arch-anim .arch-arrow {
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.arch-anim.anim-pending .arch-label { opacity: 0; transform: translateY(6px); }
.arch-anim.anim-pending .arch-node { opacity: 0; transform: translateY(10px); }
.arch-anim.anim-pending .arch-core { opacity: 0; transform: scale(.93); }
.arch-anim.anim-pending .arch-arrow { opacity: 0; }
.arch-anim .arch-label.in { opacity: 1; transform: none; }
.arch-anim .arch-node.in { opacity: 1; transform: none; }
.arch-anim .arch-core.in { opacity: 1; transform: none; }
.arch-anim .arch-arrow.in { opacity: 1; }
@keyframes archFlow { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes archGlow { 0%, 100% { box-shadow: var(--shadow-blue); } 50% { box-shadow: 0 14px 48px -10px color-mix(in srgb, var(--accent) 60%, transparent); } }
@media (prefers-reduced-motion: no-preference){
  .arch-anim.flowing .arch-arrow { animation: archFlow 1.9s var(--ease) infinite; }
  .arch-anim.flowing .arch-core { animation: archGlow 3.2s var(--ease) infinite; }
}
@media (prefers-reduced-motion: reduce){
  .arch-anim.anim-pending .arch-node,
  .arch-anim.anim-pending .arch-label,
  .arch-anim.anim-pending .arch-core,
  .arch-anim.anim-pending .arch-arrow { opacity: 1; transform: none; }
}

/* ---------- Generic: stagger a container's direct children ---------- */
.pop-seq > * { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pop-seq.anim-pending > * { opacity: 0; transform: translateY(10px); }
.pop-seq.anim-pending > .pop-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .pop-seq.anim-pending > * { opacity: 1 !important; transform: none !important; transition: none !important; } }
/* Frozen-preview / no-animation safety: never leave primed content hidden.
   transition:none is essential — in a frozen-transition sandbox an in-flight
   opacity transition would otherwise stay pinned at 0 and (per the cascade)
   beat even the !important below. */
html.anim-off .pop-seq.anim-pending > * { opacity: 1 !important; transform: none !important; transition: none !important; }
/* Same frozen-preview safety for the other home-anim components primed at paint —
   without it a frozen-transition sandbox could leave primed content stuck hidden. */
html.anim-off .atlas-classify.anim-pending .clr,
html.anim-off .pulse-opps.anim-pending .opp-rr,
html.anim-off #flowStrip.flow-anim .flow-step,
html.anim-off #atlasFlow.flow-anim .flow-step,
html.anim-off .opp-card-anim.anim-pending .opp-row,
html.anim-off .opp-card-anim.anim-pending .opp-actions,
html.anim-off .tm-anim.anim-pending .tm-cell,
html.anim-off .revq-anim.anim-pending .rev-item,
html.anim-off .tax-anim.anim-pending .tax-node,
html.anim-off .tax-anim.anim-pending .tax-leaf > *,
html.anim-off .tax-anim.anim-pending .tax-leaf .tl-track i,
html.anim-off .sup-anim.anim-pending .sd-child > *,
html.anim-off .arch-anim.anim-pending .arch-node,
html.anim-off .arch-anim.anim-pending .arch-label,
html.anim-off .arch-anim.anim-pending .arch-core,
html.anim-off .arch-anim.anim-pending .arch-arrow,
html.anim-off .ba.anim-resolve.anim-pending .ba-mid,
html.anim-off .ba.anim-resolve.anim-pending .ba-after,
html.anim-off #flowStrip.flow-anim .flow-step .fs-ic,
html.anim-off #atlasFlow.flow-anim .flow-step .fs-ic,
html.anim-off #flowStrip.flow-anim .flow-step::after,
html.anim-off #atlasFlow.flow-anim .flow-step::after {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
/* and never leave the loading shimmer running in a frozen preview */
html.anim-off .tax-anim.anim-pending .tax-leaf::after { display: none !important; }
html.anim-off .sup-anim.anim-pending .sd-child::after { display: none !important; }

/* ---------- Pyramid: build from the base up ----------
   Tiers rise + settle into the stack (reversed order via .pop-seq-rev),
   and the zone-rail labels fade in alongside them. Overrides the generic
   pop-seq translate with a taller, bottom-anchored motion. */
.pyr-tiers.pop-seq > .pyr-tier { transition: opacity .5s var(--ease), transform .55s var(--ease); transform-origin: 50% 100%; will-change: transform, opacity; }
.pyr-tiers.pop-seq.anim-pending > .pyr-tier { opacity: 0; transform: translateY(24px) scaleY(.6); }
.pyr-tiers.pop-seq.anim-pending > .pyr-tier.pop-in { opacity: 1; transform: none; }
.pyr-zones.pop-seq > .pyr-zone { transition: opacity .55s var(--ease), transform .55s var(--ease); }
.pyr-zones.pop-seq.anim-pending > .pyr-zone { opacity: 0; transform: translateX(-6px); }
.pyr-zones.pop-seq.anim-pending > .pyr-zone.pop-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .pyr-tiers.pop-seq.anim-pending > .pyr-tier,
  .pyr-zones.pop-seq.anim-pending > .pyr-zone { opacity: 1; transform: none; }
}

/* ---------- Hero: legacy ink-fx pause hook (fx removed — kept as no-op) ---------- */
.hero.fx-paused { /* ink layers retired */ }

/* ---------- Platform demo screens: per-line LOADING reveal ----------
   Replaces the slide-up. Each line holds its place, shows a shimmering
   skeleton bar, then resolves to its content (like the Atlas classify table). */
@keyframes loadShimmer { 0% { background-position: -170px 0; } 100% { background-position: 170px 0; } }

/* the row itself stays put + visible (override the fly-in slide/opacity) */
.load-lines.anim-pending .opp-rr,
.load-lines.anim-pending .rev-item,
.load-lines.anim-pending .init-row,
.load-lines.anim-pending tr { opacity: 1; transform: none; }

/* positioning context for the skeleton overlay */
.load-lines .opp-rr, .load-lines .rev-item, .load-lines .init-row { position: relative; }
.load-lines td { position: relative; }

/* content fades in once the line resolves — no vertical movement */
.load-lines .opp-rr > *, .load-lines .rev-item > *, .load-lines .init-row > *,
.load-lines td > * { transition: opacity .35s var(--ease); }

/* while a line is still loading: hide its content, show the shimmer bar */
.load-lines.anim-pending .opp-rr:not(.in) > *,
.load-lines.anim-pending .rev-item:not(.in) > *,
.load-lines.anim-pending .init-row:not(.pop-in) > * { opacity: 0; }
.load-lines.anim-pending tr:not(.pop-in) td { color: transparent; }
.load-lines.anim-pending tr:not(.pop-in) td > * { opacity: 0; }

.load-lines.anim-pending .opp-rr:not(.in)::after,
.load-lines.anim-pending .rev-item:not(.in)::after,
.load-lines.anim-pending .init-row:not(.pop-in)::after {
  content: ""; position: absolute; left: 18px; right: 18px; top: 50%; height: 13px;
  transform: translateY(-50%); border-radius: 7px; pointer-events: none;
  background: linear-gradient(90deg, #dde3ec 25%, #eef2f8 37%, #dde3ec 63%);
  background-size: 340px 100%; animation: loadShimmer 1.15s linear infinite;
}
.load-lines.anim-pending tr:not(.pop-in) td::after {
  content: ""; position: absolute; left: 6px; right: 12px; top: 50%; height: 11px;
  transform: translateY(-50%); border-radius: 6px; pointer-events: none;
  background: linear-gradient(90deg, #dde3ec 25%, #eef2f8 37%, #dde3ec 63%);
  background-size: 340px 100%; animation: loadShimmer 1.15s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .load-lines.anim-pending .opp-rr > *, .load-lines.anim-pending .rev-item > *,
  .load-lines.anim-pending .init-row > *, .load-lines.anim-pending td,
  .load-lines.anim-pending td > * { opacity: 1; color: inherit; }
}

/* ---------- Customer stories — expanding photo strip ---------- */
.cstory-strip { display: flex; gap: 10px; height: clamp(480px, 44vw, 560px); }
.cstory {
  position: relative; overflow: hidden; flex: 1 1 0; min-width: 0; margin: 0;
  border-radius: var(--radius-lg); border: 1px solid var(--soft-border);
  background: var(--off-white); cursor: pointer;
  container-type: inline-size;
  transition: flex-grow .6s var(--ease);
}
.cstory.active { flex-grow: 3.4; cursor: default; }
.cstory:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cstory picture { display: contents; }
.cstory .cst-photo {
  position: absolute; top: 0; left: 0; bottom: 0; width: 100%; height: 100%;
  object-fit: cover; transition: width .6s var(--ease), filter .35s var(--ease);
}
.cstory:not(.active):hover .cst-photo { filter: brightness(1.07); }

/* collapsed label (logo chip + company) */
.cst-min {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  background: linear-gradient(180deg, rgba(11,21,51,0) 0%, rgba(11,21,51,.58) 100%);
  color: #fff; pointer-events: none;
  opacity: 1; transition: opacity .2s var(--ease);
}
.cstory.active .cst-min { opacity: 0; transition: none; }
.cst-chip {
  width: 46px; height: 46px; border-radius: 11px; background: #fff;
  display: grid; place-items: center; padding: 7px;
  box-shadow: 0 4px 14px rgba(11,21,51,.25);
}
.cst-chip img { max-width: 100%; max-height: 30px; object-fit: contain; }
.cst-co { font-family: var(--font-head); font-weight: 600; font-size: 15px; text-shadow: 0 1px 10px rgba(11,21,51,.5); }

/* expanded detail panel — sized by the PANEL's width (cqw), not the viewport,
   so the layout holds together at any preview/browser width */
.cst-detail {
  position: absolute; top: 0; right: 0; bottom: 0; left: 40%;
  padding: clamp(20px, 5.5cqw, 40px);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  /* closing: text vanishes instantly — no fade trailing the shrinking panel */
  transition: none;
}
/* text pops in (no fade) just after the panel's expansion has settled */
.cstory.active .cst-detail { opacity: 1; pointer-events: auto; transition: opacity 0s .3s; }
.cstory.active .cst-photo { width: 40%; }
.cst-logo { height: clamp(20px, 4.5cqw, 28px); width: auto; max-width: 150px; object-fit: contain; object-position: left; align-self: flex-start; }
.cst-quote {
  margin: clamp(14px, 3cqw, 24px) 0 0; font-family: var(--font-head); font-weight: 500;
  font-size: clamp(15.5px, 3.3cqw, 21px); line-height: 1.45; letter-spacing: -.01em;
  color: var(--ink); text-wrap: pretty;
}
.cst-person { margin-top: clamp(10px, 2.4cqw, 18px); display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--slate); line-height: 1.35; }
.cst-person b { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.cst-actions { margin-top: auto; padding-top: clamp(14px, 2.8cqw, 20px); display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.cst-watch { padding: 10px 18px; font-size: 14px; gap: 8px; }
.cst-watch svg { width: 13px; height: 13px; }

@media (max-width: 1080px){
  .cstory-strip { flex-direction: column; height: auto; gap: 12px; }
  .cstory, .cstory.active { flex: none; transition: none; }
  .cstory:not(.active){ display: flex; align-items: center; gap: 0; padding: 10px 14px 10px 10px; }
  .cstory:not(.active) .cst-photo { position: static; width: 56px; height: 56px; border-radius: 13px; flex: 0 0 auto; }
  .cstory:not(.active) .cst-min {
    position: static; background: none; pointer-events: none;
    flex-direction: row; align-items: center; gap: 12px; padding: 0 0 0 14px;
  }
  .cstory:not(.active) .cst-chip { width: 36px; height: 36px; padding: 5px; box-shadow: none; border: 1px solid var(--soft-border-2); }
  .cstory:not(.active) .cst-chip img { max-height: 24px; }
  .cstory:not(.active) .cst-co { color: var(--ink); text-shadow: none; }
  .cstory:not(.active) .cst-detail { display: none; }
  .cstory.active { display: flex; flex-direction: column; }
  .cstory.active .cst-photo { position: static; width: 100%; height: clamp(220px, 34vw, 300px); flex: 0 0 auto; object-position: 50% 30%; }
  .cstory.active .cst-min { display: none; }
  .cstory.active .cst-detail { position: static; opacity: 1; pointer-events: auto; padding: 22px 20px 24px; transition: none; }
}

/* ---------- Video lightbox ---------- */
.vid-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.vid-modal[hidden] { display: none; }
.vid-backdrop { position: absolute; inset: 0; background: rgba(4,10,30,.78); backdrop-filter: blur(5px); }
.vid-wrap { position: relative; width: min(960px, 100%); }
.vid-box {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
}
.vid-frame, .vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-tools { position: absolute; top: -48px; right: 0; display: flex; gap: 10px; z-index: 2; }
.vid-close, .vid-full {
  position: relative; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center; transition: background .18s var(--ease); cursor: pointer;
}
.vid-close:hover, .vid-full:hover { background: rgba(255,255,255,.24); }
.vid-close svg { width: 16px; height: 16px; }
.vid-full svg { width: 17px; height: 17px; }
.vid-full .vf-exit { display: none; }
/* While the box is in native fullscreen, the floating chrome is off-screen — pin
   it inside the viewport and swap the icon to "exit". */
.vid-box:fullscreen { border-radius: 0; }
.vid-box:fullscreen .vid-frame, .vid-box:fullscreen .vid-frame iframe { width: 100%; height: 100%; }
.vid-wrap.is-fs .vid-tools { position: fixed; top: 18px; right: 18px; }
.vid-wrap.is-fs .vid-full .vf-enter { display: none; }
.vid-wrap.is-fs .vid-full .vf-exit { display: block; }
/* CSS maximize fallback (native Fullscreen API is blocked in embedded/preview frames) */
.vid-wrap.is-max { position: fixed; inset: 0; width: 100vw; height: 100vh; }
.vid-wrap.is-max .vid-box { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; }
.vid-wrap.is-max .vid-tools { position: fixed; top: 18px; right: 18px; }
.vid-wrap.is-max .vid-full .vf-enter { display: none; }
.vid-wrap.is-max .vid-full .vf-exit { display: block; }

/* ============================================================
   Chapter rail — Fin-style scrollspy legend for chapters 01–04.
   The rail is absolutely positioned over the whole scope and a
   sticky inner pins it in the viewport while the chapters scroll;
   it parks at the top of chapter 01 and rides away with the end
   of chapter 04. Per-item bars fill with scroll progress (JS).
   ============================================================ */
.rail-scope { position: relative; }
.chapter-rail {
  position: absolute; top: 0; bottom: 0;
  left: clamp(20px, 2.2vw, 40px); width: 178px;
  z-index: 6; display: none; pointer-events: none;
  /* aligns the legend's start with chapter 01's heading band; lives on the
     wrapper (not the sticky inner) so the legend pins the moment it meets
     the nav bar, then travels the whole scope */
  padding-top: clamp(64px, 9vw, 122px);
  /* bottom stop: when the scope's end scrolls up, the legend parks with the
     same breathing room below its last bar as sits between the nav border
     and the "01" label when pinned (≈16px gap + 13px item padding) */
  padding-bottom: 28px;
}
.chapter-rail-inner {
  position: sticky; top: 80px; /* 64px nav + breathing room */
  display: flex; flex-direction: column;
  pointer-events: auto;
}
.rail-item {
  display: flex; align-items: baseline; gap: 9px;
  position: relative; padding: 11px 0 13px;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; line-height: 1;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  color: var(--slate-light); text-decoration: none;
  transition: color .3s var(--ease);
}
.rail-item:hover { color: var(--slate); }
.rail-item .rail-num { font-weight: 600; }
.rail-item .rail-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--soft-border); overflow: hidden;
}
.rail-item .rail-fill {
  position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .12s linear;
}
.rail-item.active { color: var(--ink); }

/* Home keeps its nav bar pinned for the whole scroll — the legend docks
   beneath it — so neutralize the global hide-on-scroll-down behavior here */
body[data-page="index.html"] .site-header.nav-hidden { transform: none; }

/* Wide screens: show the rail. Fin-style staging — the legend column sits
   on the bare page field (.rail-scope keeps the site background) and each
   section's background is inset to start right of it, so the sections read
   as panels scrolling past a pinned legend. Below 1100px the rail hides
   and sections return to full-bleed.
   Each container is a size-query container so the section layouts below
   reflow against the ACTUAL content width (the rail steals ~250px, so
   viewport-based breakpoints fire too late). */
@media (min-width: 1100px) {
  .chapter-rail { display: block; }
  .rail-scope { background: var(--page); }
  .rail-scope > section {
    margin-left: max(calc((100% - var(--container)) / 2 - 32px), 222px);
    margin-right: max(calc((100% - var(--container)) / 2 - 32px), 20px);
    border: 1px solid var(--soft-border);
    border-radius: 0;
  }
  .rail-scope > section + section { margin-top: 44px; }
  .rail-scope .container { container-type: inline-size; }

  /* Kimia-style structural hairlines: the panels' vertical edge rules
     continue through the gaps for the full height of the scope… */
  .rail-scope::before, .rail-scope::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
    background: var(--soft-border); pointer-events: none;
  }
  .rail-scope::before { left: max(calc((100% - var(--container)) / 2 - 32px), 222px); }
  .rail-scope::after { right: max(calc((100% - var(--container)) / 2 - 32px), 20px); }
}

/* …and each gap between panels carries a full-width separator line with
   small crosshair ticks where it meets the edge rules (positioned by
   chapter-rail.js, which centers one in every gap). */
.rail-gapline { display: none; }
@media (min-width: 1100px) {
  .rail-gapline {
    display: block; position: absolute; left: 0; right: 0; height: 1px;
    background: var(--soft-border); pointer-events: none;
    /* keep the line clear of the legend column: paint only from the
       panel's left edge rightward */
    padding-left: max(calc((100% - var(--container)) / 2 - 32px), 222px);
    background-clip: content-box;
  }
  .rail-gapline::before, .rail-gapline::after {
    content: ""; position: absolute; top: -4px; width: 9px; height: 9px;
    background:
      linear-gradient(var(--border-strong), var(--border-strong)) center / 9px 1px no-repeat,
      linear-gradient(var(--border-strong), var(--border-strong)) center / 1px 9px no-repeat;
  }
  .rail-gapline::before { left: max(calc((100% - var(--container)) / 2 - 32px), 222px); transform: translateX(-50%); }
  .rail-gapline::after { right: max(calc((100% - var(--container)) / 2 - 32px), 20px); transform: translateX(50%); }
}

/* ---- container-width reflow for sections living beside the rail ---- */
/* 7-step flow strip needs ~1150px to breathe; fold to 4-up earlier */
@container (max-width: 1150px) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}
/* chapters (copy + product panel) stack once the panel would squeeze */
@container (max-width: 760px) {
  .chapter, .chapter.flip { grid-template-columns: 1fr; gap: 44px; }
  .chapter.flip .chapter-copy, .chapter.flip .chapter-visual { order: initial; }
  .chapter-copy { max-width: 760px; }
  .chapter-visual { max-width: 880px; }
}
/* integrations split stacks; logo grid stays 3-up at full width */
@container (max-width: 1040px) {
  .split, .split.narrow-text { grid-template-columns: 1fr; gap: 44px; }
  .split > * { max-width: 760px; }
}
/* card trios and the metrics band fold to readable widths */
@container (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .scale-band { grid-template-columns: 1fr 1fr; }
  .scale-cell:nth-child(odd)::before { display: none; }
  .scale-cell:nth-child(n+3)::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: rgba(255,255,255,.13); }
}
@container (max-width: 700px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .scale-band { grid-template-columns: 1fr; }
}

/* ---------- Flow strip: open node rail (flat, cellgrid-aligned) ----------
   Seven numbered icon nodes sit on a single hairline rail — no cards, no
   shadows, no hover lift. Connector segments live ONLY in the gap between
   adjacent node centres, so the rail never crosses behind a node and the
   look works on any background. Shared by #flowStrip (light) and the
   dark #atlasFlow on data-foundation. */
#flowStrip, #atlasFlow {
  --flow-line: var(--soft-border);
  --flow-node-border: var(--border-strong);
  --flow-ic: var(--really-blue);
  --flow-num: var(--slate-light);
  --flow-h: var(--ink);
  --flow-p: var(--slate);
  gap: 28px;
}
.bg-dark #atlasFlow, .bg-dark-grad #atlasFlow {
  --flow-line: rgba(255,255,255,.20);
  --flow-node-border: rgba(255,255,255,.32);
  --flow-ic: var(--clear-sky);
  --flow-num: rgba(255,255,255,.55);
  --flow-h: #fff;
  --flow-p: rgba(255,255,255,.68);
}
#flowStrip .flow-step, #atlasFlow .flow-step {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
#flowStrip .flow-step:hover, #atlasFlow .flow-step:hover {
  transform: none; box-shadow: none; border: 0;
}
#flowStrip .flow-step .fs-n, #atlasFlow .flow-step .fs-n {
  font: 700 12px/1 var(--font-head); letter-spacing: .08em; color: var(--flow-num); margin: 0 0 14px;
}
#flowStrip .flow-step .fs-ic, #atlasFlow .flow-step .fs-ic {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--flow-node-border); background: transparent;
  color: var(--flow-ic); display: grid; place-items: center; margin: 0 0 18px;
  position: relative; z-index: 1; transition: border-color .25s var(--ease), color .25s var(--ease);
}
#flowStrip .flow-step:hover .fs-ic, #atlasFlow .flow-step:hover .fs-ic { border-color: var(--flow-ic); }
#flowStrip .flow-step .fs-ic svg, #atlasFlow .flow-step .fs-ic svg { width: 22px; height: 22px; }
#flowStrip .flow-step h4, #atlasFlow .flow-step h4 {
  font: 600 15px/1.25 var(--font-head); color: var(--flow-h); margin: 0 0 6px;
}
#flowStrip .flow-step p, #atlasFlow .flow-step p {
  font-size: 12.5px; line-height: 1.45; color: var(--flow-p); max-width: 19ch;
}
/* rail segment — sits at the node centre (y=50px), spans only the inter-node gap */
#flowStrip .flow-step::after, #atlasFlow .flow-step::after {
  content: ""; position: absolute; top: 50px; right: auto;
  left: calc(50% + 24px); width: calc(100% - 20px); height: 1px;
  background: var(--flow-line); border: 0; transform: none; z-index: 0;
}
#flowStrip .flow-step:last-child::after, #atlasFlow .flow-step:last-child::after { display: none; }
@media (max-width: 1080px) {
  #flowStrip .flow-step:nth-child(4n)::after, #atlasFlow .flow-step:nth-child(4n)::after { display: none; }
}
@media (max-width: 640px) {
  #flowStrip .flow-step:nth-child(2n)::after, #atlasFlow .flow-step:nth-child(2n)::after { display: none; }
}
@container (max-width: 1150px) {
  #flowStrip .flow-step:nth-child(4n)::after, #atlasFlow .flow-step:nth-child(4n)::after { display: none; }
}
@container (max-width: 700px) {
  #flowStrip .flow-step:nth-child(2n)::after, #atlasFlow .flow-step:nth-child(2n)::after { display: none; }
}

/* ---------- [07] Investors & advisors (Fin-style people row) ---------- */
.inv-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .inv-head { grid-template-columns: 1fr; gap: 28px; } }

.inv-rule {
  display: flex; align-items: center; gap: 18px;
  margin-top: clamp(40px, 5vw, 64px);
}
.inv-rule span {
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62); white-space: nowrap;
}
.inv-rule::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.16); }

.inv-firms {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap;
  width: 100%; gap: clamp(20px, 3cqw, 44px); margin-top: 0; padding-right: clamp(8px, 2cqw, 28px);
}
.inv-firms img { width: auto; opacity: .8; flex: 0 0 auto; }
/* per-logo heights scale with available width so the row never wraps;
   ratios tuned for equal optical weight */
.inv-firm-42cap   { height: clamp(38px, 4.1cqw, 49px); }
.inv-firm-sequoia { height: clamp(34px, 3.8cqw, 44px); transform: translateY(4px); }
.inv-firm-pnp     { height: clamp(20px, 2.2cqw, 25px); }

.inv-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 40px 16px; margin-top: clamp(36px, 4vw, 56px);
}
.inv-cell { display: flex; flex-direction: column; align-items: center; text-align: center; }
.inv-avatar {
  width: clamp(72px, 9cqw, 128px); height: clamp(72px, 9cqw, 128px);
  border-radius: 50%; overflow: hidden; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.inv-name { margin-top: 18px; font-family: var(--font-head); font-weight: 600; font-size: 16.5px; line-height: 1.3; color: #fff; }
.inv-role { margin-top: 5px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.6); max-width: 180px; text-wrap: pretty; }

/* the closing "and 10+ more" line — full-width row under the people grid,
   separated by the same hairline language as the section rule */
.inv-more-line {
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  text-align: left; text-wrap: pretty;
  font-size: clamp(14px, 1.3vw, 16px); line-height: 1.6;
  color: rgba(255,255,255,.6); letter-spacing: .005em;
}
.inv-more-line b { color: #fff; font-weight: 600; }
@container (max-width: 700px) {
  .inv-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 16px; }
}
@container (max-width: 440px) {
  .inv-grid { grid-template-columns: repeat(2, 1fr); }
}
/* media fallbacks for viewports below 1100px, where the rail (and its
   container-type) is off and @container rules above never match */
@media (max-width: 700px) {
  .inv-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 16px; }
}
@media (max-width: 440px) {
  .inv-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- [06] Integrations — orbital hub diagram ----------
   Circular icon nodes sitting on a dashed orbit ring around a central
   circular Mithra mark (its own inner dashed ring), tethered by faint
   straight wires with traveling light pulses. Flat — no shadows.
   Geometry lives in a square 520×520 viewBox matching the square panel
   so %-positioned HTML nodes and SVG endpoints stay glued at every size. */
.integ-net {
  position: relative; container-type: inline-size;
  aspect-ratio: 1 / 1;
  width: 100%; max-width: 440px; justify-self: end;
  align-self: center;
  margin-top: 56px; /* nudge down so the diagram's top clears the section title's baseline */
}
@media (max-width: 900px) { .integ-net { justify-self: center; margin-top: 8px; } }
.integ-net .in-wires { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.in-wire { fill: none; stroke: rgba(11,14,20,.10); stroke-width: 1; }
.in-rings circle {
  fill: none; stroke: rgba(11,14,20,.26); stroke-width: 1.1;
  stroke-dasharray: 1 7; stroke-linecap: round;
}

/* traveling light: a short normalized dash (pathLength=100) cycling its
   offset — one full loop per cycle, seamless wrap. Glow comes from a single
   drop-shadow on each group, not per path. */
.in-glow-out  { filter: drop-shadow(0 0 5px rgba(15,98,254,.45)); }
.in-glow-back { filter: drop-shadow(0 0 4px rgba(69,137,255,.4)); }
.in-pulse { fill: none; stroke-linecap: round; }
.in-glow-out .in-pulse {
  stroke: #0F62FE; stroke-width: 2;
  stroke-dasharray: 7 93; stroke-dashoffset: 100;
  animation: inPulseOut var(--d, 4.6s) linear infinite;
  animation-delay: var(--o, 0s);
}
.in-glow-back .in-pulse {
  stroke: rgba(69,137,255,.8); stroke-width: 1.4;
  stroke-dasharray: 4.5 95.5; stroke-dashoffset: 0;
  animation: inPulseBack var(--d, 6s) linear infinite;
  animation-delay: var(--o, 0s);
}
@keyframes inPulseOut  { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes inPulseBack { from { stroke-dashoffset: 0; }   to { stroke-dashoffset: 100; } }

/* full-bleed circular logo nodes — the logo IS the circle, flat, no shadows */
.in-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  display: grid; place-items: center;
  width: clamp(48px, 13.5cqw, 62px); height: clamp(48px, 13.5cqw, 62px);
  background: #fff;
  border-radius: 50%;
  transition: transform .2s var(--ease);
}
.in-node:hover {
  transform: translate(-50%, -50%) scale(1.06);
}
.in-node img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 50%;
}
/* Excel's mark isn't circular — keep it inside a bordered white circle */
.in-node.n-excel { border: 1px solid var(--soft-border); }
.in-node.n-excel img { width: 64%; height: 64%; object-fit: contain; border-radius: 0; }

/* Mithra core — the circular brand mark itself, one step larger */
.in-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: clamp(58px, 16.5cqw, 76px); height: clamp(58px, 16.5cqw, 76px);
  display: grid; place-items: center;
  background: #fff; border-radius: 50%;
}
.in-core img { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .in-pulse { animation: none; }
  .in-glow-out .in-pulse { stroke-dashoffset: 46; }   /* park one light mid-wire */
  .in-glow-back .in-pulse { display: none; }
}

/* ---------- [01] Optimization + [02] Data foundation + [03] Atlas chapters on dark (mirror the enterprise section) ---------- */
#chapter-pulse .agent-id .tag, #chapter-foundation .agent-id .tag, #chapter-atlas .agent-id .tag { color: rgba(255,255,255,.6); }
#chapter-pulse .sub-agent, #chapter-foundation .sub-agent, #chapter-atlas .sub-agent { border-top-color: rgba(255,255,255,.12); }
#chapter-pulse .sub-agent b, #chapter-foundation .sub-agent b, #chapter-atlas .sub-agent b { color: #fff; }
#chapter-pulse .sub-agent .sa-desc, #chapter-foundation .sub-agent .sa-desc, #chapter-atlas .sub-agent .sa-desc { color: rgba(255,255,255,.62); }
#chapter-pulse .pull-quote, #chapter-foundation .pull-quote, #chapter-atlas .pull-quote { background: rgba(255,255,255,.05); border-left-color: var(--clear-sky); }
#chapter-pulse .pull-quote blockquote, #chapter-foundation .pull-quote blockquote, #chapter-atlas .pull-quote blockquote { color: #fff; }
#chapter-pulse .pull-quote figcaption, #chapter-foundation .pull-quote figcaption, #chapter-atlas .pull-quote figcaption { color: rgba(255,255,255,.7); }
#chapter-pulse .pull-quote figcaption b, #chapter-foundation .pull-quote figcaption b, #chapter-atlas .pull-quote figcaption b { color: #fff; }