/* The scene fills the viewport; the words live in a small card that changes at every step. */
.immersive-story { --orange: #b45309; --card: rgba(252, 250, 243, .94); --card-line: rgba(201, 164, 95, .38); --ink: #123d33; --muted: #4d6558; position: relative; background: #e9e5d9; color: var(--ink); scroll-margin-top: var(--scene-nav); }
.story-viewport { position: relative; height: calc(100svh - var(--scene-nav)); min-height: 620px; overflow: hidden; isolation: isolate; }
.immersive-story.is-ready:not(.is-reduced) { height: calc(100svh + (var(--story-steps, 4) - 1) * 80svh); }
.immersive-story.is-ready:not(.is-reduced) .story-viewport { position: sticky; top: var(--scene-nav); min-height: 0; }
.story-world, .story-canvas, .story-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-world { z-index: -3; }
.story-canvas canvas { display: block; width: 100%; height: 100%; }
.story-poster { object-fit: cover; object-position: center; }
.immersive-story[data-render="3d"] .story-poster { visibility: hidden; }
/* Switching example cuts to the other room with a short fade. */
.story-viewport.is-cutting .story-canvas { animation: story-cut .45s ease-out both; }
@keyframes story-cut { from { opacity: 0; } }
.immersive-story[data-render="fallback"] .story-canvas { display: none; }

/* Top bar: what this is, the three examples, the way out. */
/* The examples sit centred on top; the way out stays on the right. */
/* Top left: the headline, the three examples stacked, the way out. */
.story-topbar { position: absolute; top: 26px; left: 4.9%; width: 250px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; z-index: 5; }
.story-pick { display: flex; flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
.story-kicker { font-size: clamp(28px, 2.4vw, 36px); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.story-kicker em { font-style: normal; color: var(--orange); }
.story-chapters { position: static; width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 4px; border: 0; border-radius: 18px; background: var(--card); box-shadow: 0 10px 30px rgba(35, 48, 30, .12), 0 0 0 1px var(--card-line); backdrop-filter: blur(10px); }
.story-chapters button { min-height: 40px; padding: 9px 16px; border: 0; border-radius: 14px; background: transparent; color: #365044; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.story-chapters button[aria-current] { background: #164f3d; color: #fff; }
.story-chapters button:hover:not([aria-current]) { background: #e2e7d8; }
.story-skip { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 44px; border-radius: 100px; background: var(--card); box-shadow: 0 0 0 1px var(--card-line); font-size: 12px; font-weight: 600; color: #234438; text-decoration: none; }
.story-skip:hover { background: #fff; }
.story-skip span { transition: transform .2s var(--ease); }
.story-skip:hover span { transform: translateY(3px); }

/* The caption sits under the tabs: step, one-line title, one sentence, the link to the demo. */
/* The caption is the voice of the story: dark, large, with a tail pointing at the scene. */
.story-narration { --caption: #164f3d; --caption-accent: #fdba74; position: absolute; left: max(50%, calc(4.9% + 280px + min(660px, 46vw) / 2)); top: 60px; transform: translateX(-50%); z-index: 4; width: min(660px, 46vw); padding: 18px 30px; text-align: center; border-radius: 18px; background: var(--caption); color: #fff; box-shadow: 0 24px 60px rgba(15, 58, 45, .35); pointer-events: none; }
.story-narration::after { content: ''; position: absolute; top: 100%; left: 50%; width: 26px; height: 13px; transform: translateX(-50%); background: var(--caption); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.story-narration h3 { font-size: clamp(21px, 2vw, 28px); font-weight: 600; line-height: 1.28; letter-spacing: -.02em; text-wrap: balance; color: #fff; }
.story-narration h3 strong { font-weight: 800; color: var(--caption-accent); }
/* The ring that flashes once around the caption at every step (animated from home-world.js). */
.story-narration::before { content: ''; position: absolute; inset: -6px; border-radius: 24px; border: 3px solid var(--caption-accent); opacity: 0; pointer-events: none; }
/* The last beat of each story: what happened, in three numbers. */

/* The last beat of each story: what the AI did (green, like the AI) and the time saved (orange). */
.story-recap { position: absolute; right: 4.9%; top: 50%; z-index: 4; width: 264px; padding: 18px 20px 16px; border-radius: 16px; background: var(--card); box-shadow: 0 22px 60px rgba(20, 40, 25, .2), 0 0 0 1px var(--card-line); backdrop-filter: blur(12px); transform: translateY(-50%); animation: story-recap .5s cubic-bezier(.2, .7, .2, 1) both; }
.story-recap[hidden] { display: none; }
.story-recap-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.story-recap-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.story-recap-list li { display: grid; grid-template-columns: 62px 1fr; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.3; color: var(--ink); }
.story-recap-list strong { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #164f3d; font-variant-numeric: tabular-nums; text-align: right; }
.story-recap-saved { display: grid; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--card-line); }
.story-recap-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.story-recap-saved strong { margin-top: 2px; font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--orange); }
.story-recap-note { font-size: 13px; line-height: 1.35; color: var(--muted); }
@keyframes story-recap { from { opacity: 0; transform: translate(24px, -50%); } }
@keyframes story-recap-up { from { opacity: 0; transform: translateY(16px); } }

/* Controls, bottom right: previous, one dot per step, next. */
.story-bottom { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.story-scroll { padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); animation: story-hint 2.2s ease-in-out infinite; }
.story-scroll > span { display: inline-block; margin-left: 8px; }
@keyframes story-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.immersive-story:not([data-step="0"]) .story-scroll { visibility: hidden; }
.story-navigation { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 100px; background: var(--card); box-shadow: 0 10px 30px rgba(35, 48, 30, .12), 0 0 0 1px var(--card-line); backdrop-filter: blur(10px); }
.story-navigation > button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #164f3d; color: #fff; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s var(--ease), opacity .2s var(--ease); }
.story-navigation > button:hover:not(:disabled) { background: #0f3a2d; }
.story-navigation > button:disabled { background: #d7ddd2; color: #6f8276; cursor: default; }
.story-process { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0 2px; }
.story-process button { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(18, 61, 51, .28); cursor: pointer; transition: width .25s var(--ease), background .25s var(--ease); }
.story-process button:hover { background: rgba(18, 61, 51, .55); }
.story-process li[aria-current] button { width: 24px; background: #164f3d; }
.story-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(18, 61, 51, .12); }
.story-progress > span { display: block; height: 100%; background: #c9a45f; transform: scaleX(var(--story-progress, 0)); transform-origin: left; }

/* Speech labels anchored to a character or to the AI, drawn as small bubbles. */
.story-disclaimer { position: absolute; bottom: 12px; right: 4.9%; font-size: 11px; color: #6f8276; z-index: 2; pointer-events: none; }

.story-fallback { padding: 40px 4.9%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.story-fallback h3 { font-size: 23px; margin-bottom: 14px; }
.story-fallback p { font-size: 16px; line-height: 1.6; }
.story-fallback a { display: inline-block; padding: 14px 0; text-decoration: underline; }
.immersive-story.is-ready .story-fallback { display: none; }
.immersive-story:not(.is-ready) :is(.story-chapters, .story-navigation, .story-scroll) { display: none; }
.immersive-story.is-reduced .story-scroll { visibility: hidden; }
.immersive-story :is(button, a):focus-visible { outline: 3px solid #bd8642; outline-offset: 4px; }
.immersive-story ::selection { color: #133d2d; background: #e9c98c; }
.immersive-story .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.home-immersive.story-in-view :is(#chatNotification, #chatLauncherWrap, .mob-sticky-cta) { display: none; }

@media (min-width: 901px) and (max-height: 780px) {
  .story-topbar { top: 16px; gap: 10px; }
  .story-pick { gap: 12px; }
  .story-kicker { font-size: 28px; }
  .story-narration { top: 40px; padding: 14px 26px; }
  .story-narration h3 { font-size: 21px; }
  .story-bottom { bottom: 22px; }
}
@media (max-width: 900px) {
  .immersive-story.is-ready:not(.is-reduced) { height: calc(100svh + (var(--story-steps, 4) - 1) * 70svh); }
  .story-viewport { min-height: 650px; }
  .story-topbar { left: 14px; right: 14px; top: 14px; width: auto; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .story-pick { width: auto; }
  .story-kicker { display: none; }
  .story-chapters { width: auto; flex-direction: row; gap: 0; padding: 3px; border-radius: 100px; }
  .story-chapters button { font-size: 12px; min-height: 42px; padding: 9px 14px; border-radius: 100px; text-align: center; }
  .story-skip { font-size: 12px; gap: 6px; padding: 8px 12px; min-height: 42px; }
  /* The caption sits under the tabs; the controls take the bottom edge. */
  .story-narration { left: 12px; right: 12px; top: 68px; width: auto; transform: none; padding: 14px 16px; border-radius: 16px; text-align: left; }
  .story-narration h3 { font-size: clamp(18px, 5vw, 22px); }
  .story-narration::after { left: 50%; }
  .story-bottom { left: 12px; right: 12px; bottom: 12px; transform: none; flex-direction: row; justify-content: center; gap: 12px; }
  .story-scroll { display: none; }
  .story-navigation { width: 100%; justify-content: space-between; padding: 6px; }
  .story-navigation > button { width: 38px; height: 38px; }
  .story-disclaimer { left: 30px; right: 30px; bottom: 72px; text-align: center; font-size: 9.5px; line-height: 1.3; z-index: 5; }
  .story-fallback { grid-template-columns: 1fr; }
  /* The recap sits above the controls, its three figures side by side. */
  .story-recap { left: 12px; right: 12px; top: auto; bottom: 90px; width: auto; padding: 12px 14px; transform: none; animation-name: story-recap-up; }
  .story-recap-title, .story-recap-label { font-size: 10.5px; }
  .story-recap-list { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
  .story-recap-list li { grid-template-columns: 1fr; gap: 2px; font-size: 11.5px; }
  .story-recap-list strong { font-size: 22px; text-align: left; }
  .story-recap-saved { display: block; margin-top: 10px; padding-top: 8px; }
  .story-recap-label { display: block; }
  .story-recap-saved strong { font-size: 20px; margin-right: 6px; }
  .story-recap-note { font-size: 12px; }
}
@media (max-width: 480px) {
  .story-topbar { left: 12px; right: 12px; top: 12px; }
  .story-chapters button { padding-inline: 12px; font-size: 11.5px; }
  .story-chapter-more { display: none; }
  .story-skip { font-size: 11.5px; padding-inline: 10px; }
  .story-narration { left: 10px; right: 10px; top: 64px; padding: 12px 14px 12px; }
  .story-bottom { left: 10px; right: 10px; bottom: 10px; }
  .story-disclaimer { bottom: 68px; }
}
@media (max-height: 570px) {
  .immersive-story.is-ready:not(.is-reduced) { height: auto; }
  .immersive-story.is-ready:not(.is-reduced) .story-viewport { position: relative; top: 0; min-height: 600px; }
  .story-scroll { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .immersive-story *, .immersive-story *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}