/* Product demonstrations and posters in the normal document flow.
   Load after the original studio/mobile sheets. No chapter or viewport sizing. */
#ai-stack .section-intro { margin-bottom: 30px; }
#ai-stack .section-intro h2 { font-size: clamp(35px, 4vw, 60px); line-height: 1.3; letter-spacing: -.035em; }
#ai-stack .stack-layout { display: block; margin-top: 0; }
#ai-stack .stack-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0 0 20px;
  border: 0;
  background: transparent;
  overflow: visible;
}
#ai-stack .stack-step {
  width: auto;
  min-height: 54px;
  height: auto;
  margin: 0;
  padding: 12px 14px;
  gap: 10px;
  border: 1px solid #d0e4e8;
  border-radius: 11px;
  background: #ffffffa3;
  font-size: 13px;
  line-height: 1.6;
  justify-content: flex-start;
}
#ai-stack .stack-step.active { background: linear-gradient(120deg, #d8eff2, #f9fdfd); border-color: #94c3d0; box-shadow: 0 6px 18px #20596b09; }
#ai-stack .stack-step b { font-size: 10px; }
#ai-stack .stack-step span { white-space: normal; }
#ai-stack .stack-step:last-child { grid-column: auto; }
#ai-stack .stack-panel,
#ai-stack .stack-panel[data-mode="knowledge"] {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.6fr);
  grid-template-rows: auto auto auto;
  align-items: stretch;
  gap: 24px 34px;
  padding: 28px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: none;
  position: relative;
  inset: auto;
  border: 1px solid #ccE2e7;
  border-radius: 22px;
  background: linear-gradient(125deg, #fff, #eff8f9);
  box-shadow: 0 20px 50px -35px #174e6470;
  overflow: visible;
}
#ai-stack .stack-panel-top { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px 18px; font-size: 10px; line-height: 1.6; }
#ai-stack .stack-copy,
#ai-stack .stack-panel[data-mode="knowledge"] .stack-copy { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 19px; padding: 0; min-width: 0; }
#ai-stack .stack-panel h3,
#ai-stack .stack-panel[data-mode="knowledge"] h3 { grid-area: auto; font-size: clamp(26px, 2.3vw, 37px); line-height: 1.55; letter-spacing: -.02em; margin: 0; max-width: 15em; text-wrap: pretty; }
#ai-stack .stack-panel .stack-copy > p { display: block; margin: 0; max-width: 31em; font-size: 14px; line-height: 1.95; color: #5b7884; }
#ai-stack .stack-tags { position: static; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
#ai-stack .stack-tags span { font-size: 11px; padding: 5px 9px; line-height: 1.6; }
#ai-stack .stack-visual { grid-column: 2; grid-row: 2; display: flex; align-items: stretch; width: 100%; height: auto; min-width: 0; min-height: 0; max-height: none; margin: 0; overflow: visible; border-radius: 13px; }
#ai-stack .stack-swipe-controls { grid-column: 1 / -1; grid-row: 3; min-height: 44px; margin: 0; padding-top: 16px; gap: 12px; }
#ai-stack .stack-swipe-controls button { width: 42px; height: 42px; min-height: 42px; flex: 0 0 42px; }
#ai-stack .story-preview-toggle { display: none !important; }
#ai-stack .studio-examples { position: static; inset: auto; max-height: none; margin-top: 18px; overflow: visible; box-shadow: none; }
#ai-stack .studio-examples > summary { min-height: 52px; padding: 15px 22px; font-size: 13px; line-height: 1.7; }
#ai-stack :is(.brain-ui,.cockpit-ui,.growth-ui,.sales-ui,.digital-ui) { display: flex; flex-direction: column; width: 100%; height: auto; min-height: 0; max-height: none; padding: 20px; border-radius: 13px; box-shadow: 0 14px 30px -21px #0e536b70; }
#ai-stack :is(.brain-top,.cockpit-top,.growth-top,.sales-top,.digital-top) { display: flex; align-items: center; justify-content: space-between; min-height: 24px; gap: 12px; flex-wrap: wrap; }
#ai-stack :is(.brain-brand,.agent-brand) { font-size: 11px; line-height: 1.5; letter-spacing: .03em; }
#ai-stack :is(.live-pill,.agent-live) { flex: 0 0 auto; font-size: 9px; }
#ai-stack :is(.brain-command,.agent-command) { display: flex; height: auto; min-height: 40px; margin: 15px 0; padding: 8px 11px; font-size: 11px; line-height: 1.75; white-space: normal; }
#ai-stack :is(.brain-command,.agent-command) > span:nth-child(2) { min-width: 0; overflow: visible; white-space: normal; }
#ai-stack .brain-main { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(160px, 1fr); gap: 12px; min-height: 0; }
#ai-stack .brain-network { width: 100%; height: auto; min-height: 250px; }
#ai-stack .brain-node { width: 44px; height: 36px; font-size: 10px; line-height: 1.45; }
#ai-stack .brain-core { width: 82px; height: 82px; }
#ai-stack .brain-core strong { font-size: 25px; }
#ai-stack .brain-core :is(small,em) { font-size: 9px; }
#ai-stack .brain-index { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; margin: 0; padding: 14px 12px; gap: 17px; }
#ai-stack .brain-index .index-head { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; font-size: 11px; }
#ai-stack .brain-index .index-head b { font-size: 23px; }
#ai-stack .brain-index .index-row { display: grid; font-size: 11px; gap: 8px; }
#ai-stack .brain-index .index-row > b { font-size: 11px; }
#ai-stack .cockpit-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 15px 0; }
#ai-stack .metric-card { padding: 12px 10px; min-width: 0; }
#ai-stack .metric-card:first-child { grid-column: auto; }
#ai-stack .metric-card small { font-size: 10px; line-height: 1.6; }
#ai-stack .metric-card strong { font-size: 25px; line-height: 1.2; margin: 8px 0; }
#ai-stack .metric-card > b { display: block; font-size: 9px; line-height: 1.6; }
#ai-stack .cockpit-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
#ai-stack :is(.cockpit-chart-card,.cockpit-ring-card,.cockpit-feed) { min-width: 0; padding: 13px; }
#ai-stack .cockpit-chart { height: 130px; }
#ai-stack .cockpit-ring-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
#ai-stack .ring-progress { width: 88px; height: 88px; flex: 0 0 auto; }
#ai-stack .ring-key { display: flex; flex-direction: column; font-size: 9px; line-height: 1.7; gap: 5px; margin: 0; }
#ai-stack .cockpit-feed { display: block; grid-column: 1 / -1; }
#ai-stack .cockpit-feed p { display: flex; font-size: 11px; line-height: 1.75; gap: 8px; }
#ai-stack .cockpit-feed p b { font-size: 11px; }
#ai-stack :is(.growth-main,.sales-main) { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 12px; min-height: 0; }
#ai-stack :is(.funnel-card,.channel-card,.journey-card,.customer-card) { display: block; min-height: 0; padding: 15px 13px; }
#ai-stack .agent-head { font-size: 11px; line-height: 1.65; gap: 9px; }
#ai-stack .agent-head b { font-size: 9px; }
#ai-stack .funnel { display: flex; flex-direction: column; gap: 17px; margin: 22px 0 0; }
#ai-stack .funnel-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; padding: 0; font-size: 11px; line-height: 1.65; }
#ai-stack .funnel-row b { font-size: 11px; }
#ai-stack .funnel-foot { display: flex; flex-wrap: wrap; margin-top: 22px; padding-top: 13px; font-size: 9px; line-height: 1.75; gap: 9px; }
#ai-stack .channel-row { margin-top: 17px; font-size: 11px; }
#ai-stack .channel-spark { margin-top: 18px; padding-top: 12px; }
#ai-stack .journey-line { margin-top: 25px; gap: 5px; }
#ai-stack .journey-step { font-size: 10px; line-height: 1.7; gap: 9px; }
#ai-stack .journey-step b { font-size: 10px; }
#ai-stack .journey-note { display: flex; flex-wrap: wrap; margin-top: 25px; padding-top: 15px; gap: 8px; font-size: 9px; line-height: 1.8; }
#ai-stack .customer-head { flex-wrap: nowrap; }
#ai-stack .customer-head strong { font-size: 12px; line-height: 1.5; white-space: normal; }
#ai-stack .customer-head small { font-size: 9px; line-height: 1.75; white-space: normal; }
#ai-stack .customer-tags { margin-top: 15px; gap: 5px; }
#ai-stack .customer-next { margin-top: 16px; padding-top: 13px; }
#ai-stack .customer-next p { font-size: 11px; line-height: 1.9; }
#ai-stack .customer-next button { font-size: 11px; min-height: 44px; }
#ai-stack .flow-canvas { display: grid; grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr); min-height: 270px; gap: 6px; padding: 20px 12px 42px; }
#ai-stack .flow-node { min-height: 94px; padding: 11px 7px; grid-row: 1 !important; }
#ai-stack .flow-node.trigger { grid-column: 1 !important; }
#ai-stack .flow-node.ai { grid-column: 3 !important; }
#ai-stack .flow-node.action { grid-column: 5 !important; }
#ai-stack .flow-node.review { grid-column: 7 !important; }
#ai-stack .flow-connector { display: block; grid-row: 1 !important; }
#ai-stack .flow-connector.c1 { grid-column: 2 !important; }
#ai-stack .flow-connector.c2 { grid-column: 4 !important; }
#ai-stack .flow-connector.c3 { grid-column: 6 !important; }
#ai-stack .flow-node strong { font-size: 11px; line-height: 1.7; }
#ai-stack .flow-node em { display: block; font-size: 9px; line-height: 1.7; }
#ai-stack .flow-branch { font-size: 10px; }

/* A real image box followed by its caption keeps every poster visible. */
#cases { --poster-art-height: clamp(330px, 30vw, 440px); --poster-card-width: calc(var(--poster-art-height) * .7 + 16px); --poster-wide-width: min(64vw, 780px, calc(var(--poster-art-height) * 1.77)); }
#cases .cases-head { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin: 0; }
#cases .section-intro { margin: 0; }
#cases .case-controls { display: flex; flex-wrap: nowrap; max-width: 100%; gap: 3px; margin: 0; padding: 4px; border: 1px solid #d4e6eb; border-radius: 12px; background: #ffffffad; overflow-x: auto; scrollbar-width: none; }
#cases .filter { flex: 0 0 auto; min-height: 42px; padding: 9px 14px; font-size: 12px; line-height: 1.6; border-radius: 8px; white-space: nowrap; }
#cases .case-grid { display: flex; align-items: center; gap: 18px; width: 100%; height: auto; min-height: 0; margin: 28px 0 0; padding: 6px 1px 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 1px; overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom; scrollbar-width: none; mask-image: none; }
#cases .case-grid::-webkit-scrollbar,#cases .case-controls::-webkit-scrollbar { display: none; }
#cases .case-card,
#cases .case-card.case-wide,
#cases .case-card.case-large,
#cases .case-card.case-landscape { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; flex: 0 0 var(--poster-card-width); align-self: center; width: var(--poster-card-width); height: auto; min-height: 0; max-height: none; max-width: none; padding: 0; margin: 0; border: 1px solid #cfdfe5; border-radius: 14px; background: #f0f6f7; box-shadow: 0 9px 25px -20px #20596b50; overflow: hidden; scroll-snap-align: start; transform: none; opacity: 1; scale: none; }
#cases .case-card.case-landscape { flex-basis: var(--poster-wide-width); width: var(--poster-wide-width); }
#cases .case-card::before,#cases .case-card::after { display: none; }
#cases .case-card.visual-poster { opacity: 1; transform: none; scale: none; }
#cases .case-card img,
#cases .case-card.case-landscape img { grid-row: 1; position: static; display: block; flex: none; width: 100%; height: var(--poster-art-height); min-height: 0; max-height: none; max-width: 100%; margin: 0; padding: 8px; box-sizing: border-box; aspect-ratio: auto; object-fit: contain; object-position: center; background: #eff5f6; filter: none; transform: none; border-radius: 0; }
#cases .case-card.case-landscape img { height: auto; aspect-ratio: 16/9; }
#cases .case-overlay { grid-row: 2; position: static; inset: auto; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; align-content: center; gap: 3px; width: 100%; height: auto; min-height: 86px; margin: 0; padding: 13px 15px; box-sizing: border-box; border-top: 1px solid #dce8ec; border-radius: 0; background: #fff; backdrop-filter: none; transform: none; color: #234e60; }
#cases .case-overlay span { font: 9px/1.5 var(--mono); letter-spacing: .07em; color: #658591; }
#cases .case-overlay h3 { margin: 0; font: 600 16px/1.45 var(--sans); letter-spacing: 0; white-space: normal; color: #234e60; }
#cases .case-overlay p { display: block; margin: 0; font-size: 11px; line-height: 1.65; color: #6b8590; }
#cases .gallery-toolbar { position: static; display: flex; align-items: center; gap: 20px; height: auto; min-height: 44px; margin: 0; padding-top: 5px; }
#cases .gallery-buttons { flex: 0 0 auto; display: flex; gap: 8px; }
#cases .gallery-buttons button { width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 0; }
#cases .gallery-track { min-width: 20px; }
#cases .case-card:hover { transform: none; }
#cases .case-card:hover img { transform: none; filter: none; }
@media (min-width: 761px) and (max-width: 1100px) {
  #ai-stack .stack-step { padding: 11px; font-size: 12px; gap: 7px; }
  #ai-stack .stack-panel,#ai-stack .stack-panel[data-mode="knowledge"] { grid-template-columns: minmax(200px,.64fr) minmax(0,1.6fr); gap: 20px 24px; padding: 24px; }
  #ai-stack .stack-panel h3,#ai-stack .stack-panel[data-mode="knowledge"] h3 { font-size: 25px; }
  #ai-stack .brain-main { grid-template-columns: minmax(0,1fr); }
  #ai-stack .brain-index { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  #ai-stack .index-head { grid-column: 1 / -1; }
  #ai-stack .brain-index .index-row { font-size: 10px; gap: 6px; }
  #ai-stack :is(.growth-main,.sales-main) { grid-template-columns: minmax(0,1fr); }
  #cases .cases-head { display: block; }
  #cases .case-controls { width: max-content; margin-top: 22px; }
}
@media (max-width: 760px) {
  #ai-stack .section-intro { margin-bottom: 25px; }
  #ai-stack .section-intro h2 { font-size: clamp(30px,8.4vw,40px); line-height: 1.35; }
  #ai-stack .stack-rail { display: flex; overflow-x: auto; overflow-y: hidden; gap: 7px; margin: 0 0 16px; padding: 3px 0 8px; scrollbar-width: none; scroll-padding-inline: 2px; }
  #ai-stack .stack-rail::-webkit-scrollbar { display: none; }
  #ai-stack .stack-step { flex: 0 0 auto; min-height: 44px; padding: 10px 13px; font-size: 12px; gap: 7px; }
  #ai-stack .stack-step span { white-space: nowrap; }
  #ai-stack .stack-step b { display: inline; font-size: 9px; }
  #ai-stack .stack-panel,#ai-stack .stack-panel[data-mode="knowledge"] { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto; gap: 22px; padding: 18px; border-radius: 18px; }
  #ai-stack .stack-panel-top { grid-column: 1; grid-row: 1; font-size: 9px; }
  #ai-stack .studio-demo-badge { font-size: 10px; line-height: 1.65; }
  #ai-stack .stack-copy,#ai-stack .stack-panel[data-mode="knowledge"] .stack-copy { grid-column: 1; grid-row: 2; gap: 15px; }
  #ai-stack .stack-panel h3,#ai-stack .stack-panel[data-mode="knowledge"] h3 { font-size: 25px; line-height: 1.6; max-width: none; }
  #ai-stack .stack-panel .stack-copy > p { font-size: 13px; line-height: 1.9; }
  #ai-stack .stack-tags { display: flex; }
  #ai-stack .stack-tags span { font-size: 10px; }
  #ai-stack .stack-visual { grid-column: 1; grid-row: 3; width: 100%; margin: 0; }
  #ai-stack .stack-swipe-controls { grid-column: 1; grid-row: 4; padding-top: 14px; gap: 10px; }
  #ai-stack .stack-swipe-controls button { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; }
  #ai-stack :is(.brain-ui,.cockpit-ui,.growth-ui,.sales-ui,.digital-ui) { padding: 13px; border-radius: 11px; }
  #ai-stack :is(.brain-brand,.agent-brand) { font-size: 0; }
  #ai-stack :is(.brain-brand,.agent-brand)::after { font-size: 11px; line-height: 1.6; }
  #ai-stack :is(.brain-top,.cockpit-top,.growth-top,.sales-top,.digital-top) { flex-wrap: nowrap; gap: 8px; }
  #ai-stack :is(.live-pill,.agent-live) { font-size: 8px; }
  #ai-stack :is(.brain-command,.agent-command) { min-height: 0; margin: 13px 0; padding: 9px; font-size: 10px; line-height: 1.8; }
  #ai-stack .brain-main { display: block; }
  #ai-stack .brain-network { min-height: 240px; }
  #ai-stack .brain-node { width: 37px; height: 34px; font-size: 9px; }
  #ai-stack .brain-core { width: 70px; height: 70px; }
  #ai-stack .brain-core strong { font-size: 21px; }
  #ai-stack .brain-index { display: flex; flex-direction: column; margin-top: 13px; padding: 15px 12px; gap: 16px; }
  #ai-stack .brain-index .index-head { font-size: 12px; }
  #ai-stack .brain-index .index-head b { font-size: 25px; }
  #ai-stack .brain-index .index-row,#ai-stack .brain-index .index-row > b { font-size: 11px; }
  #ai-stack .cockpit-metrics { gap: 5px; margin: 14px 0; }
  #ai-stack .metric-card { padding: 10px 6px; }
  #ai-stack .metric-card small { font-size: 9px; }
  #ai-stack .metric-card strong { font-size: 20px; line-height: 1.3; }
  #ai-stack .metric-card > b { font-size: 9px; }
  #ai-stack .cockpit-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  #ai-stack .cockpit-chart { height: 150px; }
  #ai-stack .cockpit-ring-card { flex-direction: row; gap: 24px; padding: 18px 13px; }
  #ai-stack .ring-key { font-size: 10px; line-height: 1.8; }
  #ai-stack :is(.growth-main,.sales-main) { grid-template-columns: minmax(0,1fr); gap: 14px; }
  #ai-stack :is(.funnel-card,.channel-card,.journey-card,.customer-card) { padding: 15px 12px; }
  #ai-stack .funnel { gap: 18px; margin-top: 22px; }
  #ai-stack .funnel-row,#ai-stack .funnel-row b { font-size: 11px; }
  #ai-stack .journey-line { gap: 4px; margin-top: 23px; }
  #ai-stack .journey-step { font-size: 10px; gap: 8px; }
  #ai-stack .customer-head strong { font-size: 12px; }
  #ai-stack .customer-next p { font-size: 12px; }
  #ai-stack .customer-next button { font-size: 12px; }
  #ai-stack .flow-canvas { grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr); min-height: 290px; gap: 20px 8px; padding: 20px 10px 42px; }
  #ai-stack .flow-node { min-height: 90px; padding: 10px 7px; }
  #ai-stack .flow-node.trigger { grid-column: 1 !important; grid-row: 1 !important; }
  #ai-stack .flow-node.ai { grid-column: 3 !important; grid-row: 1 !important; }
  #ai-stack .flow-node.action { grid-column: 1 !important; grid-row: 2 !important; }
  #ai-stack .flow-node.review { grid-column: 3 !important; grid-row: 2 !important; }
  #ai-stack .flow-connector.c1 { grid-column: 2 !important; grid-row: 1 !important; }
  #ai-stack .flow-connector.c2 { display: none; }
  #ai-stack .flow-connector.c3 { grid-column: 2 !important; grid-row: 2 !important; }
  #ai-stack .flow-node strong { font-size: 11px; line-height: 1.6; }
  #ai-stack .flow-node em { font-size: 9px; line-height: 1.7; }
  #ai-stack .studio-examples > summary { padding-inline: 16px; }
  #cases { --poster-art-height: clamp(265px,84vw,345px); --poster-card-width: calc(var(--poster-art-height) * .7 + 12px); --poster-wide-width: calc(100vw - 74px); }
  #cases .cases-head { display: block; }
  #cases .case-controls { width: 100%; gap: 2px; margin-top: 22px; padding: 3px; }
  #cases .filter { flex: 1 0 auto; padding: 8px 9px; font-size: 11px; min-height: 40px; }
  #cases .case-grid { gap: 14px; margin-top: 20px; padding-bottom: 16px; }
  #cases .case-card img,#cases .case-card.case-landscape img { padding: 6px; }
  #cases .case-overlay { min-height: 84px; padding: 12px; }
  #cases .case-overlay h3 { font-size: 15px; line-height: 1.5; }
  #cases .case-overlay span { font-size: 8px; }
  #cases .case-overlay p { font-size: 10px; }
  #cases .gallery-toolbar { gap: 15px; }
}
@media (max-width: 350px) {
  #ai-stack .stack-panel,#ai-stack .stack-panel[data-mode="knowledge"] { padding: 15px; }
  #ai-stack .stack-panel h3,#ai-stack .stack-panel[data-mode="knowledge"] h3 { font-size: 23px; }
  #ai-stack :is(.brain-ui,.cockpit-ui,.growth-ui,.sales-ui,.digital-ui) { padding: 10px; }
  #ai-stack .metric-card strong { font-size: 18px; }
  #ai-stack .metric-card small,#ai-stack .metric-card > b { font-size: 8px; }
  #ai-stack .flow-node strong { font-size: 10px; }
  #ai-stack .flow-node em { font-size: 8px; }
  #cases .filter { padding-inline: 7px; font-size: 10px; }
}