/* Home page — cinematic hero, logo strip, positioning pin, capabilities stage,
   industries, AI agents, control tower, stats band, simulator fallback,
   resources. Shared chrome/component styles live in the global sheets;
   this file only adds home-specific layout and skin. The single lime
   moment of the page is the .hl-lime in the positioning strap. */

/* ============================================================
   Hero — cinematic scroll-driven map scene (.hero-cine)
   Camera = transform on .scene-map (JS-owned, desktop only).
   CSS defaults = the composed no-JS / reduced-motion scene:
   map at cover overview, cards visible at their anchors.
   ============================================================ */
.hero-cine { position: relative; background: #F8F7FE; }

/* --- stage + map --- */
.scene-stage {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  z-index: 1;
}
.scene-map { position: absolute; inset: 0; transform-origin: 0 0; }
.scene-map svg.cm-svg { width: 100%; height: 100%; display: block; }
.cm-svg text { text-rendering: geometricPrecision; user-select: none; }

/* map skin */
.cm-street { stroke: #F0EEFA; stroke-width: 11; fill: none; }
.cm-ave-dash { stroke: #E3E0F8; stroke-width: 2; stroke-dasharray: 12 16; fill: none; }
.cm-road-label {
  font: 600 12px var(--font-body);
  letter-spacing: .22em;
  fill: rgba(13, 10, 43, .28);
}
.cm-pill-label { font: 700 10px var(--font-display); letter-spacing: .1em; fill: #fff; }
.cm-glow { fill: none; stroke: rgba(74, 37, 224, .15); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.cm-glow--warn { stroke: rgba(249, 115, 22, .2); }
.cm-route { fill: none; stroke: var(--indigo); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.cm-route--warn { stroke: var(--warn); }
.cm-old { fill: none; stroke: var(--lavender); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 9; opacity: .6; }
/* planned route (lavender, drawn by Planning; sits UNDER the executed indigo) */
.cm-plan { fill: none; stroke: var(--lavender); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.cm-stop-c { fill: var(--indigo); stroke: #fff; stroke-width: 2.5; }
.cm-stop-n { font: 700 9.5px var(--font-display); fill: var(--indigo); opacity: 0; /* end-state: check replaces number */ }
.cm-stop-k { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cm-halo { fill: none; stroke: var(--indigo); stroke-width: 2; opacity: 0; }
.cm-halo--s4 { stroke: var(--warn); }
.cm-ripple { fill: none; stroke: var(--indigo); stroke-width: 2; opacity: 0; }
.cm-pin { fill: var(--ink); }
.cm-pin-dot { fill: var(--indigo); }

/* beat-gated pulses (scrub-direction safe: keyed off data-beat).
   v6 phases (Fleet/Dispatch split adds a beat): 4 = Execution (van drives,
   S3 in-progress ring), 5 = Live Ops exception (S4 warns, risk stroke pulses,
   Live Ops avatar → warn), 5r = resolution, 6 = Customer. */
.hero-cine[data-beat="4"] .cm-halo--s3 { animation: cmHalo 1.4s ease-in-out infinite; }
.hero-cine[data-beat="5"] .cm-halo--s4 { animation: cmHalo 1.1s ease-in-out infinite; }
.hero-cine[data-beat="5"] .cm-risk-stroke { animation: cmRiskPulse 1.1s ease-in-out infinite; }
.hero-cine[data-beat="5"] .feed-avatar--liveops { background: var(--warn); color: #fff; }
@keyframes cmHalo { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }
@keyframes cmRiskPulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .45; } }
/* customer close-up (beat 6): the scaled SMS card gets a deeper shadow to
   read against the tight zoom */
.hero-cine[data-beat="6"] .story-card--sms { box-shadow: 0 26px 60px rgba(13, 10, 43, .26); }

/* --- scrim + copy column --- */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #F8F7FE 0%, #F8F7FE 32%, rgba(248, 247, 254, .92) 48%, transparent 68%);
  pointer-events: none;
  z-index: 2;
}
.hero-copy {
  position: absolute;
  inset-block: 0;
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  width: min(600px, 44%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  z-index: 3;
}
.hero-copy .pill { margin-bottom: var(--sp-4); }
.hero-copy h1 { max-width: 12em; margin-bottom: var(--sp-5); }
/* JS-injected word masks (home.js). Padding guard keeps descenders unclipped. */
.home-hero h1 .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.home-hero h1 .w > span { display: inline-block; will-change: transform; }
.hero-copy .lead { margin-bottom: 0; max-width: 30em; }
.hero-strap { display: block; margin: var(--sp-8) 0 var(--sp-1); color: var(--text-40); }
.hero-sim-link { display: inline-block; font-size: var(--fs-small); font-weight: 600; }
/* --- story cards (screen-space overlay) --- */
.hero-cards { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.story-card {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--ink-border);
  border-radius: var(--r-md);
  box-shadow: 0 2px 6px rgba(13, 10, 43, .06), 0 16px 40px rgba(13, 10, 43, .13);
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
}
.story-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 10.5px var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-40);
  margin-bottom: 8px;
}
.story-label svg { width: 15px; height: 15px; color: var(--indigo); flex: none; }
.story-card .ok { color: var(--success); font-weight: 700; }

/* agent feed (dark ink panel) */
.story-card--panel {
  top: 12%; right: 4%;
  width: 292px;
  background: var(--ink);
  border-color: rgba(255, 255, 255, .08);
  color: #F3F2FC;
  padding: 15px 16px 10px;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.panel-title { font: 700 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 242, 252, .55); }
.panel-live { font: 700 9.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--success); display: inline-flex; align-items: center; gap: 5px; }
.panel-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: liveDot 1.6s ease-in-out infinite; }
@keyframes liveDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.feed-row { display: flex; gap: 9px; align-items: flex-start; padding: 4.5px 0; }
.feed-row + .feed-row { border-top: 1px dashed rgba(255, 255, 255, .09); }
.feed-avatar {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 10px var(--font-display);
  background: var(--indigo);
  color: #fff;
  margin-top: 2px;
}
.feed-avatar--lav { background: var(--lavender); color: var(--indigo-deep); }
.feed-avatar--liveops { transition: background-color .5s, color .5s; /* → --warn during data-beat 3 */ }
.feed-avatar--icon svg { width: 11px; height: 11px; }
.feed-body { min-width: 0; }
.feed-row b { display: block; font: 600 8.5px var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: rgba(243, 242, 252, .5); }
.feed-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.28; color: #F3F2FC; overflow: hidden; }
/* second detail sub-line (muted; matches the reference dashboard rows) */
.feed-sub { display: block; font-size: 9.5px; line-height: 1.3; color: rgba(243, 242, 252, .5); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-ok { color: var(--success); }
/* row state cell: pulsing dot = working (mid-story; scrub owns opacity),
   ✓ = done (the authored end-state, visible by default for no-JS/static) */
.feed-state { position: relative; margin-left: auto; flex: none; width: 15px; height: 16px; margin-top: 2px; }
.feed-status { position: absolute; inset: 0; font-weight: 700; font-size: 11.5px; line-height: 16px; text-align: center; }
.feed-dot {
  position: absolute;
  left: 4px; top: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lavender);
  opacity: 0; /* mid-story state; scrub reveals while the agent works */
  animation: feedPulse 1.1s ease-in-out infinite; /* pulses scale — opacity stays JS-owned */
}
@keyframes feedPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.55); } }
.feed-foot { display: flex; align-items: center; gap: 8px; padding: 8px 0 3px; margin-top: 3px; border-top: 1px dashed rgba(255, 255, 255, .09); }
.feed-foot .m4-caret { background: var(--lavender); width: 7px; height: 13px; }
/* "+5 agents working" cluster (static; letter-circle avatars overlap) */
.feed-cluster { display: inline-flex; flex: none; }
.feed-mini {
  width: 17px; height: 17px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 8px var(--font-display);
  border: 1.5px solid var(--ink);
  background: var(--indigo); color: #fff;
}
.feed-mini + .feed-mini { margin-left: -6px; }
.feed-mini--l { background: var(--lavender); color: var(--indigo-deep); }
.feed-cluster-label { font: 700 9px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 242, 252, .55); }

/* stop chips (work-type pills) */
.stop-chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; }
.stop-chip-pill {
  background: var(--indigo);
  color: #fff;
  font: 600 11px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  box-shadow: 0 2px 5px rgba(74, 37, 224, .22), 0 10px 24px rgba(74, 37, 224, .3);
  white-space: nowrap;
}
.stop-chip--done .stop-chip-pill { background: var(--success); box-shadow: 0 8px 20px rgba(55, 194, 106, .3); }
.stop-chip-tick {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(13, 10, 43, .18);
}
.stop-avatar {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--indigo-deep);
  font: 700 9.5px var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(13, 10, 43, .18);
}
.stop-chip[data-card="s1"] { left: 30%; top: 43%; }
.stop-chip[data-card="s2"] { left: 57%; top: 40%; }
.stop-chip[data-card="s3"] { left: 56%; top: 34%; }
.stop-chip[data-card="s5"] { right: 26%; top: 13%; }

/* exception case panel (was the risk card) */
.story-card--risk {
  left: 40%; top: 11%;
  width: 322px;
  padding: 13px 15px;
  background: var(--warn-bg);
  border-color: rgba(249, 115, 22, .45);
}
.exc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.exc-title {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--warn-deep);
}
.exc-title svg { width: 14px; height: 14px; color: var(--warn); flex: none; }
.exc-case {
  font: 700 8.5px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--warn-deep);
  background: var(--warn-16); border-radius: var(--r-pill);
  padding: 3px 8px; white-space: nowrap;
}
.exc-log {
  list-style: none; margin: 0; padding: 8px 0 0;
  border-top: 1px dashed var(--warn-16);
  display: grid; gap: 8px;
}
.exc-row { display: grid; gap: 2px; }
.exc-row + .exc-row { padding-top: 8px; border-top: 1px dashed var(--warn-16); }
.exc-meta { display: inline-flex; align-items: center; gap: 7px; }
.exc-time { font: 600 9.5px var(--font-mono, var(--font-body)); font-variant-numeric: tabular-nums; color: var(--ink-40); letter-spacing: .02em; }
.exc-tag {
  font: 700 7.5px var(--font-body); letter-spacing: .11em; text-transform: uppercase;
  color: var(--warn-deep); background: var(--warn-16);
  border-radius: 4px; padding: 2px 6px; white-space: nowrap;
}
.exc-tag--dispatch { color: var(--indigo-deep); background: var(--indigo-16); }
.exc-line { margin: 0; font-size: 11.5px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.exc-desc { margin: 0; font-size: 10.5px; line-height: 1.35; color: var(--ink-60); }
.exc-pill {
  display: inline-block; vertical-align: baseline;
  font: 700 8.5px var(--font-body); letter-spacing: .04em;
  color: #4C1D95; background: #EDE9FE; border: 1px solid #DDD6FE;
  border-radius: var(--r-pill); padding: 1px 7px; margin-left: 2px; white-space: nowrap;
}
.exc-chip {
  display: inline-block; vertical-align: baseline;
  font: 700 8.5px var(--font-body); letter-spacing: .03em;
  color: #157347; background: rgba(55, 194, 106, .14); border: 1px solid rgba(55, 194, 106, .4);
  border-radius: var(--r-pill); padding: 1px 8px; margin-top: 2px; white-space: nowrap;
}
.exc-foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--warn-16);
  font: 700 9px var(--font-body); letter-spacing: .07em; text-transform: uppercase;
  color: #157347;
}
.exc-foot .ok { color: var(--success); font-weight: 700; }

/* resolved card (top clears the 8-row agent feed panel at short stages) */
.story-card--resolved { right: 6%; top: max(56%, 468px); width: 250px; border-color: rgba(55, 194, 106, .45); }
.story-card--resolved .story-label { color: var(--success); }
.story-card--resolved .story-label svg { color: var(--success); }
.resolved-line { margin: 0; font-size: 12.5px; }
.resolved-eta { color: var(--success); font-weight: 700; }

/* SMS bubble (Customer Agent beat, lands near the customer pin) */
.story-card--sms {
  /* centred on the F4s look-at point so the notification is the clear subject
     at the Customer rest (transform-origin centre so the scale-up doesn't
     drift to a corner) */
  /* v8.1: sit BELOW the customer pin (pin fully visible above the bubble)
     and clear of the Stop-5 ring on the right */
  left: 50%; top: 46%;
  margin-left: -146px;
  transform-origin: 50% 50%;
  width: 252px;
  border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
}
.sms-from {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 10px var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-40);
  margin-bottom: 6px;
}
.sms-from svg { width: 13px; height: 13px; color: var(--indigo); flex: none; }
.sms-line { margin: 0; font-size: 12.5px; }
.sms-line b { color: var(--indigo); }

/* compact result chips (per-beat confirmations) */
.result-chip {
  position: absolute;
  /* v8.1: below the SMS bubble, left-aligned with it — never over its text */
  left: 40%; top: 58%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--ink-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-raised);
  font: 600 11px var(--font-body);
  padding: 7px 13px;
  color: var(--ink);
  white-space: nowrap;
}
.result-chip .ok { color: var(--success); font-weight: 700; }
/* delivered chip (Delivered moment at S4; position eyeballed at F4p) */
.result-chip--delivered { left: 34%; top: 27%; }

/* proof-of-delivery photo card (Proof Agent beat, lands by Stop 2) */
.story-card--proof { left: 48%; top: 34%; width: 216px; }
.proof-photo {
  position: relative;
  height: 84px;
  border-radius: 9px;
  background:
    radial-gradient(120% 90% at 30% 0%, #EDEBFC 0%, #DBD6F4 60%, #CFC9EE 100%);
  overflow: hidden;
  margin-bottom: 8px;
}
.proof-parcel {
  position: absolute;
  left: 20px; bottom: 12px;
  width: 34px; height: 26px;
  border-radius: 4px;
  background: var(--indigo);
  opacity: .8;
}
.proof-parcel::after {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 5px; height: 100%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .55);
}
.proof-stamp {
  position: absolute;
  right: 8px; bottom: 8px;
  background: var(--success);
  color: #fff;
  font: 700 10px var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
}
.proof-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-60);
}
.proof-meta li { display: inline-flex; gap: 4px; align-items: center; }

/* checklist card */
.story-card--check { left: 6%; bottom: 12%; width: 278px; }
.check-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 12.5px; }
.check-rows li { display: flex; align-items: center; gap: 9px; }
.check-rows li svg { width: 14px; height: 14px; color: var(--indigo); flex: none; }
.check-rows li .ok { margin-left: auto; }

/* KPI card */
.story-card--kpi { right: 5%; bottom: 12%; width: 306px; }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi-grid .m2-kpi { padding: 9px 11px; }
.kpi-grid .m2-kpi b { font-size: 1.2rem; }
.kpi-grid .m2-kpi span { display: block; white-space: nowrap; }
.kpi-grid .delta { font-size: 9.5px; padding: 2px 7px; margin-left: 2px; font-style: normal; }

/* connector arrow (risk → resolved), geometry set by JS */
.hero-connector { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-connector-path { fill: none; stroke: var(--indigo); stroke-width: 2; stroke-dasharray: 7 6; stroke-linecap: round; }
.hero-connector-head { fill: var(--indigo); stroke: none; }

/* --- ambient counters (top-left) --- */
.hero-counters {
  position: absolute;
  top: 102px;
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  z-index: 4;
  pointer-events: none;
}
.hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--ink-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-raised);
  font: 600 11px var(--font-body);
  padding: 7px 13px;
  color: var(--ink);
  white-space: nowrap;
}
.hud-pill b { color: var(--indigo); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.hud-pill--ink { background: var(--ink); color: #fff; border-color: transparent; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: liveDot 1.6s ease-in-out infinite; }

/* --- closing strap (settle payoff) --- */
.hero-closing {
  position: absolute;
  left: 0; right: 0;
  bottom: 13%;
  text-align: center;
  z-index: 5;
  pointer-events: none;
}
.closing-strap {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ink);
}
.closing-links { margin: var(--sp-2) 0 0; font-size: var(--fs-small); font-weight: 600; }
.closing-links a { pointer-events: auto; }
.closing-sep { margin: 0 10px; color: var(--text-40); }

/* --- HUD furniture --- */
.hero-hud {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--gutter) 16px;
  z-index: 5;
  pointer-events: none;
}
.hud-coords {
  font: 500 10.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  color: var(--ink-40);
}
.hud-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 10.5px var(--font-body);
  letter-spacing: .04em;
  color: var(--ink-60);
}
.hud-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); }

/* --- scroll cue: lives INSIDE .hero-dots, right under the chapter dots, so
   it always tracks the rail regardless of dot count --- */
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px; /* + the nav's 8px gap */
  pointer-events: none;
}
/* Label sits in a filled indigo pill so it stands out from the busy hero
   instead of reading as faint grey text. Whole cue breathes gently. */
.scroll-cue > span:first-child {
  font: 700 10.5px var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  background: var(--indigo);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 18px rgba(74, 37, 224, .28);
  animation: cuePulse 2.2s ease-in-out infinite;
}
/* Double down-chevron travelling downward — the clear "keep scrolling" signal. */
.scroll-cue-chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 2px; /* nudge toward the dot column */
  height: 20px;
  animation: cueChevrons 1.5s ease-in-out infinite;
}
.scroll-cue-chevron {
  width: 15px; height: 15px; /* caret symbol is 24x24; keep square so the chevron isn't squashed */
  color: var(--indigo);
  display: block;
  margin-top: -7px; /* overlap the two carets into a tight chevron stack */
}
.scroll-cue-chevron:first-child { margin-top: 0; }
.scroll-cue-chevron:last-child { opacity: .5; }
@keyframes cueChevrons {
  0%   { transform: translateY(-3px); opacity: .5; }
  50%  { transform: translateY(3px);  opacity: 1; }
  100% { transform: translateY(-3px); opacity: .5; }
}
@keyframes cuePulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* skip-the-demo pill — bottom-centre (the cue now lives on the dots rail);
   shown by the step driver only (display:none until the driver arms; mobile /
   reduced-motion never show it). Indigo outline so it's clearly findable
   without competing with the story or the primary CTA. */
.hero-skip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 7;
  align-items: center;
  padding: 15px 30px;
  background: var(--surface);
  border: 2px solid var(--indigo);
  border-radius: var(--r-pill);
  box-shadow: 0 12px 30px rgba(13, 10, 43, .16);
  font: 700 17px var(--font-body);
  color: var(--indigo);
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.hero-skip:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 14px 30px rgba(13, 10, 43, .18); }
.hero-skip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* replay-the-demo pill - same bottom-centre slot as the skip pill (never
   visible together: skip only while armed, replay only after a release when
   the hero is back in view); inherits the .hero-skip indigo-outline look */

/* --- unpin seam into the marquee --- */
.hero-seam {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, #F3F2FC);
  pointer-events: none;
  z-index: 2;
}

/* --- Agent Spotlight title cards ---
   CSS default = readable stacked list in flow below the stage (the no-JS
   scene). The desktop scrub context lifts the container into a centre-stage
   overlay and hides the cards via gsap.set — never here. */
.hero-spots {
  display: grid;
  gap: 14px;
  max-width: 620px;
  margin: 0 auto;
  padding: var(--sp-6) var(--gutter);
}
/* CLS fix (2026-07-18): on JS-enabled desktop, take the container out of flow
   BEFORE first paint. Every desktop JS context does this anyway — the scrub
   context lifts it to a centre-stage overlay, the tablet collage and reduced
   motion hide it — but home.js is deferred, so the browser used to paint the
   tall in-flow list first and the later gsap.set shifted the whole page
   (homepage CLS 0.696 lab / 0.50 in GSC field data). html.no-js keeps the
   readable in-flow list for crawlers/no-JS; mobile already hides it in the
   stacked-layout media query. Spot cards still become visible on desktop via
   their own inline autoAlpha (child visibility overrides the container's). */
@media (min-width: 1024px) {
  html.js .hero-spots {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    max-width: none;
    margin: 0; padding: 0;
    pointer-events: none;
    visibility: hidden;
  }
}
.spot-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--ink-border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(13, 10, 43, .14);
  padding: 18px 22px;
}
.spot-card--pair { flex-direction: column; align-items: stretch; gap: 12px; }
.spot-seg { display: flex; align-items: center; gap: 16px; }
.spot-seg + .spot-seg { border-top: 1px dashed var(--ink-border); padding-top: 12px; }
.spot-avatar {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 17px var(--font-display);
  background: var(--indigo);
  color: #fff;
}
.spot-avatar svg { width: 19px; height: 19px; }
.spot-avatar--lav { background: var(--lavender); color: var(--indigo-deep); }
.spot-avatar--warn { background: var(--warn); }
.spot-card--warn { border-color: rgba(249, 115, 22, .45); background: var(--warn-bg); }
.spot-body { min-width: 0; }
/* Agent name reads as an active AI agent: brand indigo, bold, with a small
   pulsing "live" dot (echoes the agent-feed LIVE dot). Warn card goes orange. */
.spot-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 800 12px var(--font-body);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--indigo);
}
.spot-label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  animation: spotLabelPulse 2s ease-in-out infinite;
}
@keyframes spotLabelPulse { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
.spot-card--warn .spot-label { color: var(--warn-deep); }
.spot-line {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.5vw, 1.3rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
.spot-card--warn .spot-line { color: var(--warn-deep); }

/* --- mobile-only layers --- */
.hero-chips-m, .hero-kpis-m { display: none; }
.m-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--ink-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-raised);
  font: 600 11px var(--font-body);
  padding: 7px 12px;
  color: var(--ink);
  white-space: nowrap;
  z-index: 4;
}
.m-chip--risk { top: 18%; left: 4%; background: var(--warn-bg); border-color: rgba(249, 115, 22, .45); color: var(--warn-deep); }
.m-chip--resolved { top: 42%; right: 4%; }
.m-chip--proof { bottom: 8%; left: 4%; }
/* mobile agent-feed strip (loop swaps agent + text per beat) */
.m-feed {
  position: absolute;
  top: 4%; left: 4%; right: 4%;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--ink-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-raised);
  font: 600 11px var(--font-body);
  padding: 7px 12px;
  color: var(--ink);
  z-index: 4;
}
.m-feed-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  color: var(--indigo);
  flex: none;
  animation: spotLabelPulse 2s ease-in-out infinite;
}
.m-feed-agent { color: var(--indigo); flex: none; }
.m-feed-text { color: var(--ink-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-feed--warn { background: var(--warn-bg); border-color: rgba(249, 115, 22, .45); }
.m-feed--warn .m-feed-dot { color: var(--warn); }
.m-feed--warn .m-feed-agent, .m-feed--warn .m-feed-text { color: var(--warn-deep); }

/* --- mobile / stacked layout --- */
@media (max-width: 1023px) {
  .hero-cine { padding-top: 94px; }
  .hero-copy {
    position: static;
    width: auto;
    max-width: 640px;
    padding: var(--sp-7) var(--gutter) var(--sp-6);
  }
  .scene-stage {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: 0 var(--gutter);
    border-radius: var(--r-xl);
    border: 1px solid var(--ink-border);
    box-shadow: var(--shadow-raised);
  }
  .hero-scrim, .hero-cards, .hero-counters, .hero-closing, .scroll-cue, .hero-seam, .hero-spots { display: none; }
  .hero-chips-m { display: block; }
  .hero-hud { padding: 0 14px 10px; }
  .hero-kpis-m {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 640px;
    padding: var(--sp-5) var(--gutter) var(--sp-7);
  }
  .hero-kpis-m .m2-kpi .delta { font-size: 9.5px; padding: 2px 7px; margin-left: 2px; font-style: normal; }
}
@media (min-width: 480px) and (max-width: 1023px) {
  .hero-kpis-m { grid-template-columns: repeat(4, 1fr); }
}

/* Anchor targets clear the fixed header on native (no-Lenis) jumps */
#capabilities, #never-delivered, #positioning { scroll-margin-top: 110px; }

/* ---------- Logo strip ---------- */
.logo-strip .logo-strip-label {
  text-align: center;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-40);
  margin: 0 0 var(--sp-5);
}

/* ---------- Positioning (ink, pinned on desktop) ---------- */
.positioning { text-align: center; }
.pos-line {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.pos-line + .pos-line { margin-top: var(--sp-3); }
.pos-line .w { display: inline-block; }
.pos-body {
  margin: var(--sp-6) auto 0;
  max-width: 46em;
  color: var(--text-60);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}
.pos-strap {
  display: flex;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-8);
}
.pos-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
}

/* ---------- Capabilities: sticky stage + copy blocks ---------- */
.cap-stage { display: none; }
.cap-mini { margin-bottom: var(--sp-5); }
.cap-block { padding-block: var(--sp-6); }
.cap-block h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 700; }
.cap-block .list-check { margin: var(--sp-5) 0; }
.cap-block .list-check li { font-size: var(--fs-small); color: var(--ink-80); }

@media (min-width: 1024px) {
  .cap-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-9);
    align-items: start;
  }
  .cap-stage { display: block; position: sticky; top: 120px; }
  /* No-JS fallback: layers stack vertically and read in order. */
  .cap-stage .cap-layer + .cap-layer { margin-top: var(--sp-5); }
  /* JS sets data-state → layers become a crossfading stack. */
  .cap-stage[data-state] { height: 540px; }
  .cap-stage[data-state] .cap-layer {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
    pointer-events: none;
  }
  .cap-stage[data-state="plan"] .cap-layer--plan,
  .cap-stage[data-state="execute"] .cap-layer--execute,
  .cap-stage[data-state="control"] .cap-layer--control {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .cap-block {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .cap-mini { display: none; }
}
.cap-layer--control .mock-frame { max-width: 420px; width: 100%; margin-inline: auto; }

/* Plan layer: route map + stop-list side strip */
.cap-plan { display: grid; grid-template-columns: 1fr 138px; }
.cap-stoplist {
  border-left: 1px solid var(--ink-border);
  background: var(--surface);
  padding: 10px;
  display: grid;
  gap: 6px;
  align-content: start;
}
.cap-stoplist h5 {
  margin: 0 0 2px;
  font: 600 10px var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-40);
}
.cap-stop {
  font-size: 10.5px;
  line-height: 1.35;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 6px 7px;
  border: 1px solid var(--ink-border);
  border-radius: 8px;
  background: var(--bg);
}
.cap-stop .n {
  width: 16px; height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--lilac);
  color: var(--indigo);
  font-weight: 700;
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.cap-stop small { color: var(--text-60); display: block; }
@media (max-width: 479px) { .cap-plan { grid-template-columns: 1fr; } .cap-stoplist { border-left: 0; border-top: 1px solid var(--ink-border); } }

/* ---------- Industries ---------- */
.industries .section-head { max-width: 640px; margin-bottom: var(--sp-7); }
.ind-card { position: relative; }
.ind-card h3 { font-size: 1.15rem; margin-bottom: var(--sp-2); padding-right: var(--sp-6); }
.ind-card p { font-size: var(--fs-small); color: var(--text-60); margin: 0; }
.ind-card .card-arrow {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  width: 18px; height: 18px;
  color: var(--indigo);
  opacity: .35;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.ind-card .card-arrow svg { width: 18px; height: 18px; }
.ind-card:hover .card-arrow { opacity: 1; transform: translate(2px, -2px); }

/* ---------- AI agents (ink) ---------- */
.agents-grid { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 1024px) { .agents-grid { grid-template-columns: 1fr 1fr; } }
/* Mock frames are white surfaces — inside the ink section their content must
   resolve to light-theme colours, not the inherited ink-theme ones. */
.agents .mock-frame {
  --text: var(--ink);
  --text-60: var(--ink-60);
  --text-40: var(--ink-40);
  --chip-bg: var(--lilac);
  --chip-fg: var(--indigo);
  color: var(--ink);
}
.agents-thesis {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: #F3F2FC;
  margin: var(--sp-5) 0;
}
.agents .btn-ghost { margin-top: var(--sp-2); }
.agent-cards { margin-top: var(--sp-8); }
.agent-cards h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); }
.agent-cards p { font-size: var(--fs-small); color: var(--text-60); margin: 0; }

/* ---------- Control tower ---------- */
.ct-head { max-width: 640px; margin-bottom: var(--sp-7); }
.ct-head .btn-ghost { margin-top: var(--sp-2); }
.ct-mock { max-width: 980px; margin-inline: auto; }

/* ---------- Stats band (lilac backdrop) ---------- */
.stats-band .stats-inner {
  background: var(--lilac);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  gap: var(--sp-7) var(--sp-6);
  grid-template-columns: repeat(2, 1fr);
}
.stats-band .stats-inner .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
@media (min-width: 1024px) { .stats-band .stats-inner { grid-template-columns: repeat(4, 1fr); } }
.stats-band .stat-label { max-width: 20em; }
/* the before/after flip tile carries a unit — keep it on one line */
.stats-band .stat-num[data-flip] { font-size: clamp(2.4rem, 4.5vw, 3.5rem); line-height: 1.3; white-space: nowrap; }

/* ---------- Simulator fallback teaser ---------- */
.sim-fallback { text-align: center; max-width: 800px; margin-inline: auto; }
.sim-fallback h2 { margin-bottom: var(--sp-4); }
.sim-fallback h2 .hl { display: block; }
.sim-fallback .lead { margin: 0 auto var(--sp-6); }

/* ---------- Resources ---------- */
.resources .section-head { max-width: 640px; margin-bottom: var(--sp-7); }
.wp-card h3 { font-size: 1.2rem; margin: 0 0 var(--sp-2); }
.wp-card .wp-meta { font-size: var(--fs-eyebrow); color: var(--text-40); }
.wp-card p { font-size: var(--fs-small); color: var(--text-60); margin: 0 0 var(--sp-3); }

/* ---------- Hero chapter dots (v3 step driver; shown via JS only) ---------- */
.hero-dots {
  display: none;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  flex-direction: column;
  align-items: flex-end; /* the wider scroll-cue child must not shift the dots */
  gap: 8px; /* v8: 19 rests — tighter rail */
}
.hero-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--lavender);
  cursor: pointer;
  position: relative;
  transition: background-color .25s, transform .25s;
}
.hero-dots button:hover { background: var(--indigo-16); }
.hero-dots button.is-active { background: var(--indigo); transform: scale(1.4); }
.hero-dots button:hover::after,
.hero-dots button:focus-visible::after {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: #F3F2FC;
  font: 600 11px var(--font-body);
  letter-spacing: .02em;
  padding: 5px 11px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
}

/* v7 step driver: ambient "breath" on the resting spotlight so a parked
   chapter never looks frozen. Shadow-only (transform is GSAP-owned by
   spotIn/spotDock — must not fight it). Only the visible (opacity 1) card
   reads the pulse; docked/hidden cards are invisible regardless. */
@keyframes spotBreath {
  0%, 100% { box-shadow: 0 18px 48px rgba(13, 10, 43, .14); }
  50%      { box-shadow: 0 22px 60px rgba(74, 37, 224, .20); }
}
.hero-cine.is-resting .spot-card { animation: spotBreath 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero-cine.is-resting .spot-card { animation: none; }
  .m-feed-dot { animation: none; }
}