/* Presentation layer: one scene, one focus. The content remains authored HTML. */
html.presentation, .presentation body { height: 100%; overflow: hidden; scroll-behavior: auto; }
.presentation body { isolation: isolate; }
.presentation .site-header, .presentation .bottom-nav, .presentation .chapter-rail { --aegis-blue: #05082E; }
.presentation .fullscreen-toggle:hover, .presentation .bottom-nav>a:hover { background: rgba(5,8,46,.06); }
.journey-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.backdrop-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .22; }
.backdrop-orb--1 { width: 600px; height: 600px; background: #00C2FF; top: -140px; right: -100px; opacity: .14; }
.backdrop-orb--2 { width: 420px; height: 420px; background: #1737C8; bottom: -120px; left: -90px; opacity: .14; }
.backdrop-orb--3 { width: 320px; height: 320px; background: #8A5CFF; top: 38%; left: 26%; opacity: .13; }
.backdrop-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(70,90,160,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(70,90,160,.06) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 78% 6%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%); mask-image: radial-gradient(ellipse 90% 70% at 78% 6%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%); }
.presentation body::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: #05082E; opacity: 0; transition: opacity 600ms ease; }
.presentation.video-focus body::before { opacity: 1; }
.presentation.video-focus .site-header, .presentation.video-focus .bottom-nav, .presentation.video-focus .chapter-rail { --aegis-ink: #F6F9FF; --aegis-secondary: rgba(246,249,255,.7); --aegis-blue: #48DAFF; --aegis-line: rgba(246,249,255,.2); }
.presentation.video-focus .brand img { filter: brightness(0) invert(1); }
.presentation.video-focus .bottom-nav { background: transparent; }
.presentation.video-focus .progress-track { display: none; }
.presentation.video-focus .language-toggle span:first-child, .presentation.video-focus[data-lang=th] .language-toggle span:last-child { background: transparent; }
.presentation.video-focus[data-lang=en] .language-toggle span:first-child, .presentation.video-focus[data-lang=th] .language-toggle span:last-child { background: rgba(246,249,255,.15); }
.presentation main { z-index: 2; }
.presentation .site-header { position: fixed; inset: 0 0 auto; height: 72px; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand>.brand-by { display: flex; align-items: center; gap: 8px; }
.brand .muze-logo { width: auto; height: 10.2px; filter: brightness(0); }
.presentation main { position: fixed; inset: 72px 0 72px; max-width: none; margin: 0; padding: 0; overflow: hidden; }
.presentation .scene { display: none; }
.presentation .scene.active { display: grid; }
.presentation .scene { position: absolute; top: 50%; left: 50%; width: 1280px; height: 720px; min-height: 0; padding: 40px 56px; grid-template-columns: 340px 1fr; gap: 36px; align-items: center; transform: translate(-50%, -50%) scale(var(--stage-scale, 1)); transform-origin: center; border: 0; }
.presentation .scene-copy { margin: 0; max-width: none; }
.presentation h2, .presentation [id="7"] h2 { font-size: 40px; line-height: 1.18; letter-spacing: -1.2px; margin-bottom: 22px; }
.presentation[data-lang=th] h2, .presentation[data-lang=th] [id="7"] h2 { font-size: 32px; line-height: 1.4; }
.presentation .lead, .presentation [id="7"] .lead { font-size: 17px; line-height: 1.7; }
.presentation .eyebrow { font-size: 10px; letter-spacing: 1.4px; margin-bottom: 23px; }
.presentation .eyebrow-line { width: 20px; }
.presentation .panel { padding: 24px; }
.presentation .panel-toolbar { margin-bottom: 20px; }
.presentation .visual-note { font-size: 10px; margin-top: 14px; }
.presentation .primary { font-size: 13px; padding: 12px 20px; }
.presentation .hero { grid-template-columns: 475px 1fr; gap: 40px; }
.presentation h1 { font-size: 64px; letter-spacing: -2.2px; line-height: 1.07; }
.presentation[data-lang=th] h1 { font-size: 52px; line-height: 1.35; }
.presentation .hero .lead { font-size: 19px; }
.presentation .hero .promise { font-size: 15px; margin: 20px 0 24px; }
.presentation .hero .actions { flex-direction: column; align-items: flex-start; }
.presentation .hero-visual { display: block; position: relative; }
.presentation .feature-tile { margin: -12px auto 0; width: 94%; padding: 20px; }
.presentation .feature-preview { position: absolute; left: 16px; right: 16px; bottom: 152px; z-index: 2; box-shadow: var(--aegis-window-shadow); }
.presentation .fragment-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
.presentation .fragment-grid article { padding: 18px; }
.presentation .task-symbol { margin-bottom: 16px; }
.presentation .fragment-grid h3 { font-size: 16px; }
.presentation .takeaway { margin-top: 20px; padding-top: 20px; font-size: 14px; }
.presentation .brief-layout { grid-template-columns: 1fr; gap: 24px; }
.presentation blockquote { font-size: 26px; line-height: 1.5; }
.presentation .handoff { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: center; }
.presentation .handoff-arrow { display: none; }
.presentation .handoff>.outline-tag { grid-column: 1; width: fit-content; }
.presentation .handoff h3 { grid-column: 1; font-size: 24px; margin: 12px 0; }
.presentation .handoff p { grid-column: 1; margin-bottom: 0; font-size: 13px; }
.presentation .handoff .primary { grid-column: 2; grid-row: 1 / 4; }
.presentation .context-layout { grid-template-columns: 190px 1fr; gap: 20px; }
.presentation .context-node { padding: 18px 14px; }
.presentation .context-node h3 { font-size: 15px; }
.presentation .context-node p { font-size: 11px; }
.presentation .context-node>span { position: static; display: block; margin-bottom: 6px; }
.presentation .context-panel { padding: 22px; }
.presentation .kit-tabs { grid-template-columns: 1fr 1fr; gap: 8px; }
.presentation .kit-tabs button { font-size: 12px; padding: 11px 10px; min-height: 57px; }
.presentation .kit-detail { padding-top: 24px; min-height: 260px; }
.presentation .kit-detail h3 { font-size: 25px; }
.presentation .kit-detail p { font-size: 15px; }
.presentation .context-excerpt { font-size: 11px; }
.presentation .workspace { padding: 0; }
.presentation .workspace-top { padding: 14px 20px; }
.presentation .workspace-body { padding: 20px; }
.presentation .workspace-tabs { margin-bottom: 18px; }
.presentation .workspace-heading { margin-bottom: 16px; }
.presentation .workspace-heading h3 { font-size: 22px; }
.presentation .metrics { margin-bottom: 18px; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.presentation .metric { padding: 13px 16px; }
.presentation .metric strong { font-size: 28px; }
.presentation .chart-row { gap: 16px; }
.presentation .chart, .presentation .insight { padding: 16px; }
.presentation .insight p { font-size: 13px; }
.presentation .calendar, .presentation .strategy-grid { min-height: 260px; gap: 12px; }
.presentation .calendar article, .presentation .strategy-grid article { padding: 20px; }
.presentation .calendar h4 { font-size: 18px; }
.presentation [id="7"] { padding-top: 40px; }
.presentation [id="7"] .scene-copy { margin-bottom: 0; }
.presentation [id="7"] .publish-panel { padding: 24px; }
.presentation .publish-steps { gap: 6px; }
.presentation .publish-steps button { font-size: 11px; }
.presentation .publish-content { gap: 24px; }
.presentation .flow-detail article>p { font-size: 15px; }
.presentation .store-preview { min-height: 240px; }
.presentation .store-preview-heading { padding: 14px; gap: 10px; }
.presentation .store-preview-heading img { width: 64px; }
.presentation .store-preview-heading>span { font-size: 10px; }
.presentation .impact-layout { grid-template-columns: 1fr; gap: 20px; }
.presentation .impact-card { padding: 20px 24px; }
.presentation .impact-card h3 { font-size: 25px; margin: 12px 0; }
.presentation .impact-card p { font-size: 14px; }
.presentation .creator-path { font-size: 28px; margin-bottom: 16px; }
.presentation .belief>p { font-size: 15px; margin-bottom: 12px; }
.presentation .belief h3 { font-size: 20px; margin: 16px 0; }
.presentation .journey-footer { position: absolute; bottom: 20px; left: 56px; right: 56px; margin: 0; padding-top: 12px; font-size: 10px; }
.presentation .bottom-nav { padding-top: 4px; padding-bottom: 4px; height: 48px; border: 0; background: transparent; backdrop-filter: none; }
.presentation .nav-status { display: flex; gap: 6px; align-items: center; }
.presentation .step-status { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--aegis-line); font-size: 11px; }
.presentation .chapter-rail { left: 20px; top: 50%; width: 180px; transform: translateY(-50%); }
.presentation .rail-name { color: #05082E; background: #FFFFFF; border: 0; box-shadow: 0 3px 12px rgba(0,16,60,.07); font-size: 11px; line-height: 1.4; padding: 7px 12px; min-width: 100px; text-align: left; }
.presentation .chapter-rail a[aria-current=step] .rail-name { color: #05082E; }
.presentation .fullscreen-toggle { font-size: 12px; }
.presentation .active { animation: scene-enter 250ms ease both; }
@keyframes scene-enter { from { opacity: 0; } to { opacity: 1; } }
.presentation.zen .site-header { display: none; }
.presentation.zen main { top: 16px; }
@media (max-width: 767px) {
  .presentation main { inset: 72px 0 calc(72px + env(safe-area-inset-bottom)); }
  .presentation .scene, .presentation [id="7"] { top: 0; left: 0; width: 100%; height: 100%; transform: none; padding: 28px 22px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
  .presentation .scene.active { display: flex; flex-direction: column; align-items: stretch; justify-content: safe center; gap: 26px; }
  .presentation .scene-copy { flex-shrink: 0; }
  .presentation h2, .presentation [id="7"] h2 { font-size: 32px; }
  .presentation[data-lang=th] h2, .presentation[data-lang=th] [id="7"] h2 { font-size: 28px; }
  .presentation .lead, .presentation [id="7"] .lead { font-size: 16px; }
  .presentation .hero.active { gap: 0; }
  .presentation .hero-copy { display: contents; }
  .presentation h1, .presentation .hero-copy>h1 { font-size: 46px; }
  .presentation[data-lang=th] h1, .presentation[data-lang=th] .hero-copy>h1 { font-size: 40px; }
  .presentation .hero .lead { font-size: 17px; }
  .presentation .hero .actions { flex-direction: row; }
  .presentation .hero .promise { margin: 20px 0 0; }
  .presentation .hero-visual { display: flex; flex-direction: column; }
  .presentation .hero-visual>.feature-tile { margin: 0 0 16px; width: 100%; }
  .presentation .feature-preview { position: static; order: -1; margin: 0 0 18px; }
  .presentation .panel, .presentation [id="7"] .publish-panel { padding: 20px; }
  .presentation .context-layout, .presentation .publish-content { grid-template-columns: 1fr; }
  .presentation .context-map { max-width: 100%; }
  .presentation .context-node>span { position: absolute; }
  .presentation .context-node h3 { font-size: 17px; }
  .presentation .context-node p { font-size: 12px; }
  .presentation .kit-detail { min-height: 0; }
  .presentation .handoff { display: block; }
  .presentation .handoff p { margin-bottom: 20px; }
  .presentation .workspace { padding: 0; }
  .presentation .workspace-body { padding: 20px 16px; }
  .presentation .workspace-heading { flex-direction: column; align-items: flex-start; }
  .presentation .metrics { grid-template-columns: 1fr; }
  .presentation .metric { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
  .presentation .metric small { min-height: 0; }
  .presentation .metric strong { margin-top: 0; font-size: 26px; }
  .presentation .calendar, .presentation .strategy-grid, .presentation .chart-row { grid-template-columns: 1fr; min-height: 0; }
  .presentation .publish-steps { grid-template-columns: repeat(3, 1fr); }
  .presentation .impact-layout { gap: 24px; }
  .presentation .journey-footer { position: static; margin-top: 16px; }
  .presentation .fullscreen-toggle { font-size: 0; padding: 8px; width: 32px; height: 36px; }
  .presentation .fullscreen-toggle::after { content: '⛶'; font-size: 20px; }
  .presentation .header-right { gap: 4px; }
  .presentation .nav-hint { display: none; }
  .presentation .step-status { font-size: 10px; margin-left: 6px; padding-left: 6px; }
  .presentation .bottom-nav { height: calc(48px + env(safe-area-inset-bottom)); padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); }
  .presentation .bottom-nav>a { padding: 4px 9px; }
}
@media (prefers-reduced-motion: reduce) { .presentation .active { animation: none; } }
@media print {
  html.presentation, .presentation body { overflow: visible; height: auto; }
  .presentation main { position: static; overflow: visible; }
  .presentation .scene { display: block !important; position: static; width: auto; height: auto; transform: none; padding: 24px; break-after: page; }
  .presentation .journey-footer { position: static; }
}
/* The fullscreen fallback keeps its exit control available on touch devices. */
.presentation.zen .site-header { display: flex; height: 48px; justify-content: flex-end; pointer-events: none; }
.presentation.zen .brand, .presentation.zen .experience-label, .presentation.zen .language-toggle { display: none; }
.presentation.zen .header-right { pointer-events: auto; }
.presentation.zen main { top: 48px; bottom: calc(48px + env(safe-area-inset-bottom)); }
/* Heading focus announces a new slide without drawing an interactive outline. */
.presentation h1:focus, .presentation h2:focus { outline: none; }
/* A cinematic opening: a dark curtain and title yield to the video on play. */
.problem-opening { display: none; }
.cover-video-wrap { position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: var(--aegis-ink); box-shadow: 0 10px 32px rgba(0,16,60,.12); transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.presentation.video-focus .cover-video-wrap { transform: scale(1.04); box-shadow: 0 18px 48px rgba(0,16,60,.45); }
.cover-video-wrap video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.cover-intro { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 36px; background: var(--aegis-ink); opacity: 1; transition: opacity 600ms ease, transform 600ms ease; }
.presentation .video-cover { grid-template-columns: 1fr; gap: 0; justify-items: center; }
.presentation .video-cover .cover-video-wrap { width: 1120px; max-width: 100%; }
.presentation .video-cover h1 { margin: 0; color: var(--aegis-bg-end); text-align: center; font-size: 68px; line-height: 1.12; letter-spacing: -2px; transition: opacity 450ms ease, transform 600ms ease; }
.presentation[data-lang=th] .video-cover h1 { font-size: 54px; line-height: 1.4; }
.presentation .cover-intro h1 em { background: linear-gradient(90deg, #00C2FF, #48DAFF); background-clip: text; -webkit-background-clip: text; }
.cover-play { width: 76px; height: 76px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(72,218,255,.06); color: #48DAFF; border: 1px solid rgba(72,218,255,.5); transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; }
.cover-play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
.cover-play .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cover-play:hover { background: rgba(72,218,255,.14); border-color: #48DAFF; transform: scale(1.06); }
.cover-play:focus-visible { outline: 2px solid #48DAFF; outline-offset: 5px; }
.cover-video-wrap[data-started=true] .cover-intro { opacity: 0; transform: scale(1.025); pointer-events: none; }
.cover-video-wrap[data-started=true] h1 { opacity: 0; transform: translateY(-18px); }
.presentation .problem-scene[data-problem-stage=intro] { grid-template-columns: 1fr; }
.presentation .problem-scene[data-problem-stage=intro]>.scene-copy, .presentation .problem-scene[data-problem-stage=intro]>.workflow-panel { display: none; }
.presentation .problem-scene[data-problem-stage=intro]>.problem-opening { display: block; text-align: center; }
.presentation .problem-opening h2 { font-size: 84px; font-weight: 400; line-height: 1.12; letter-spacing: -2.6px; margin: 0; }
.presentation[data-lang=th] .problem-opening h2 { font-size: 64px; line-height: 1.4; }
@media (max-width: 767px) {
  .presentation .video-cover.active { gap: 0; justify-content: center; }
  .cover-video-wrap { flex-shrink: 0; }
  .cover-intro { padding: 14px; gap: 16px; }
  .presentation .video-cover h1 { font-size: 27px; letter-spacing: -.6px; }
  .presentation[data-lang=th] .video-cover h1 { font-size: 24px; }
  .cover-play { width: 46px; height: 46px; }
  .cover-play svg { width: 22px; height: 22px; margin-left: 3px; }
  .presentation .problem-scene[data-problem-stage=intro].active { justify-content: center; }
  .presentation .problem-opening h2 { font-size: 52px; letter-spacing: -1.5px; }
  .presentation[data-lang=th] .problem-opening h2 { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { .rail-name, .cover-intro, .cover-play, .cover-video-wrap, .presentation .video-cover h1, .presentation body::before { transition: none; } }

/* The employee's fragmented workload, shown as an authored infographic. */
.presentation .problem-opening { width: 1080px; max-width: 100%; margin: auto; }
.presentation .problem-opening h2 { font-size: 42px; line-height: 1.2; letter-spacing: -1.2px; }
.presentation[data-lang=th] .problem-opening h2 { font-size: 34px; line-height: 1.4; }
.problem-subtitle { margin: 12px 0 28px; font-size: 17px; color: var(--aegis-secondary); }
.workload-map { position: relative; display: grid; grid-template-columns: 1fr 280px 1fr; grid-template-rows: repeat(3, 110px); gap: 30px 40px; text-align: left; }
.workload-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.work-task { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid rgba(5,8,46,.07); border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(0,16,60,.04); }
.work-task>svg { width: 32px; height: 32px; flex-shrink: 0; fill: none; stroke: #1737C8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.work-task h3 { font-size: 17px; line-height: 1.35; font-weight: 600; margin: 0 0 5px; }
.work-task p { font-size: 12px; line-height: 1.5; color: var(--aegis-secondary); margin: 0; }
.work-task small { display: block; margin-top: 7px; font-size: 10px; color: #1737C8; }
.task-1 { grid-column: 1; grid-row: 1; }
.task-2 { grid-column: 1; grid-row: 2; }
.task-3 { grid-column: 1; grid-row: 3; }
.task-4 { grid-column: 3; grid-row: 1; }
.task-5 { grid-column: 3; grid-row: 2; }
.task-6 { grid-column: 3; grid-row: 3; }
.marketing-person { position: relative; grid-column: 2; grid-row: 1 / 4; align-self: center; text-align: center; }
.staff-illustration { display: block; width: 190px; height: auto; margin: auto; }
.marketing-person h3 { font-size: 19px; font-weight: 600; margin: 10px 0 5px; }
.marketing-person p { font-size: 13px; line-height: 1.5; color: var(--aegis-secondary); margin: 0; }
.workload-takeaway { font-size: 18px; font-weight: 500; margin: 24px 0 0; }
.workload-note { font-size: 10px; color: var(--aegis-secondary); margin: 8px 0 0; }
.work-flow path { fill: none; stroke: #1737C8; stroke-width: 1.5; stroke-dasharray: 5 7; opacity: .25; transition: opacity 220ms ease; }
.work-pulse { fill: #018FFF; opacity: 0; }
.work-task { transition: transform 220ms ease, border-color 220ms ease; }
.task-1 { --task-delay: 300ms; }
.task-2 { --task-delay: 460ms; }
.task-3 { --task-delay: 620ms; }
.task-4 { --task-delay: 780ms; }
.task-5 { --task-delay: 940ms; }
.task-6 { --task-delay: 1100ms; }
.problem-scene.active[data-problem-stage=intro] .marketing-person { animation: workload-reveal 450ms ease both; }
.problem-scene.active[data-problem-stage=intro] .work-task { animation: workload-reveal 450ms ease var(--task-delay) both; }
.problem-scene.active[data-problem-stage=intro] .work-task>div, .problem-scene.active[data-problem-stage=intro] .work-task>svg { animation: workload-enter 450ms ease var(--task-delay) both; }
.problem-scene.active[data-problem-stage=intro] .staff-illustration { animation: staff-breathe 4800ms ease-in-out 1500ms infinite; }
@keyframes workload-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes workload-enter { from { transform: translateY(10px); } to { transform: translateY(0); } }
@keyframes staff-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (hover: hover) {
  .work-task:hover { transform: translateY(-4px); border-color: rgba(23,55,200,.24); }
  .workload-map:has(.task-1:hover) .work-flow-1 path,
  .workload-map:has(.task-2:hover) .work-flow-2 path,
  .workload-map:has(.task-3:hover) .work-flow-3 path,
  .workload-map:has(.task-4:hover) .work-flow-4 path,
  .workload-map:has(.task-5:hover) .work-flow-5 path,
  .workload-map:has(.task-6:hover) .work-flow-6 path { opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .problem-scene.active[data-problem-stage=intro] .marketing-person,
  .problem-scene.active[data-problem-stage=intro] .work-task,
  .problem-scene.active[data-problem-stage=intro] .work-task>div,
  .problem-scene.active[data-problem-stage=intro] .work-task>svg,
  .problem-scene.active[data-problem-stage=intro] .staff-illustration { animation: none; }
  .work-task, .work-flow path { transition: none; }
  .work-task:hover { transform: none; }
  .work-pulse { display: none; }
}
@media (max-width: 767px) {
  .presentation .problem-scene[data-problem-stage=intro].active { justify-content: safe center; }
  .presentation .problem-opening { margin: 0; flex-shrink: 0; }
  .presentation .problem-opening h2 { font-size: 28px; letter-spacing: -.8px; }
  .presentation[data-lang=th] .problem-opening h2 { font-size: 26px; }
  .problem-subtitle { font-size: 14px; margin: 10px 0 20px; }
  .workload-map { grid-template-columns: 1fr 82px 1fr; grid-template-rows: repeat(3, minmax(128px, auto)); gap: 12px 8px; }
  .work-task { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 10px; border-radius: 12px; }
  .work-task>svg { width: 20px; height: 20px; }
  .work-task h3 { font-size: 12px; margin-bottom: 4px; }
  .work-task p { font-size: 10px; }
  .work-task small { display: none; }
  .staff-illustration { width: 90px; max-width: 100%; }
  .marketing-person h3 { font-size: 12px; margin-top: 8px; }
  .marketing-person p { font-size: 10px; }
  .workload-takeaway { font-size: 14px; margin-top: 20px; }
}

/* Keep the same canvas while scattered tasks gather into one workspace. */
.presentation .problem-scene { grid-template-columns: 1fr; }
.presentation .problem-scene>.problem-opening { display: block; text-align: center; }
.presentation .problem-scene :is(#heading-2-intro, #heading-2) { font-size: 52px; }
.presentation[data-lang=th] .problem-scene :is(#heading-2-intro, #heading-2) { font-size: 42px; }
.problem-scene[data-problem-stage=intro] .problem-subtitle { margin-bottom: 50px; }
.problem-scene[data-problem-stage=intro] #heading-2,
.problem-scene[data-problem-stage=intro] .after-copy,
.problem-scene[data-problem-stage=workflow] #heading-2-intro,
.problem-scene[data-problem-stage=workflow] .before-copy { display: none; }
.work-task { z-index: 2; transform: translate(var(--scatter-x), var(--scatter-y)) rotate(var(--scatter-angle)); transition: transform 900ms cubic-bezier(.2,.7,.2,1), opacity 650ms ease, border-color 220ms ease; }
.task-1 { --scatter-x: -22px; --scatter-y: -8px; --scatter-angle: -5deg; --gather-delay: 0ms; }
.task-2 { --scatter-x: 16px; --scatter-y: 7px; --scatter-angle: 3deg; --gather-delay: 60ms; }
.task-3 { --scatter-x: -12px; --scatter-y: 14px; --scatter-angle: -3deg; --gather-delay: 120ms; }
.task-4 { --scatter-x: 22px; --scatter-y: -14px; --scatter-angle: 4deg; --gather-delay: 180ms; }
.task-5 { --scatter-x: -14px; --scatter-y: 7px; --scatter-angle: -4deg; --gather-delay: 240ms; }
.task-6 { --scatter-x: 18px; --scatter-y: 16px; --scatter-angle: 3deg; --gather-delay: 300ms; }
.work-task::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255,255,255,.55); transform: translate(5px, 5px) rotate(2deg); border: 1px solid rgba(23,55,200,.08); }
.channel-source { position: absolute; top: -15px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 100px; background: #DCE8FF; color: #1737C8; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.channel-source svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.source-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.workload-takeaway { margin-top: 40px; }
.marketing-person { transition: opacity 500ms ease, transform 650ms ease; }
.workload-links { transition: opacity 650ms ease; }
.central-workspace { position: absolute; left: 50%; top: 50%; z-index: 1; width: 960px; max-width: 100%; padding: 26px; background: rgba(255,255,255,.98); border: 1px solid rgba(23,55,200,.12); border-radius: 20px; box-shadow: 0 18px 50px rgba(0,16,60,.1); opacity: 0; transform: translate(-50%, -50%) scale(.96); pointer-events: none; transition: opacity 550ms ease, transform 750ms cubic-bezier(.2,.7,.2,1); }
.workspace-idea-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.workspace-idea-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #F6F9FF; background: var(--aegis-cta-gradient); font-size: 23px; font-weight: 600; }
.workspace-idea-header small { font-size: 9px; color: #1737C8; letter-spacing: 1px; }
.workspace-idea-header h3 { font-size: 24px; line-height: 1.4; margin: 3px 0 0; font-weight: 600; }
.workspace-idea-modules { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 110px); gap: 12px; }
.workspace-idea-modules article { padding: 15px 12px; border-radius: 12px; background: #EDF3FE; }
.workspace-idea-modules article>span { display: block; color: #1737C8; font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.workspace-idea-modules h4 { font-size: 12px; line-height: 1.5; font-weight: 500; margin: 0; }
.workspace-idea-status { margin: 18px 0 0; font-size: 10px; color: var(--aegis-secondary); }
.problem-scene[data-problem-stage=workflow] .work-task { z-index: 2; transform: translate(var(--gather-x), var(--gather-y)) rotate(0) scale(var(--gather-scale)); opacity: 1; background: #EDF3FE; border-color: transparent; transition-delay: var(--gather-delay); }
.work-task::before, .channel-source { transition: opacity 300ms ease; }
.problem-scene[data-problem-stage=workflow] .work-task::before, .problem-scene[data-problem-stage=workflow] .channel-source { opacity: 0; }
.problem-scene[data-problem-stage=workflow] .marketing-person { opacity: 0; transform: scale(.85); }
.problem-scene[data-problem-stage=workflow] .workload-links { opacity: 0; }
.problem-scene[data-problem-stage=workflow] .central-workspace { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; transition-delay: 100ms; }
@media (hover: hover) {
  .problem-scene[data-problem-stage=intro] .work-task:hover { transform: translate(var(--scatter-x), calc(var(--scatter-y) - 4px)) rotate(var(--scatter-angle)); }
}
@media (max-width: 767px) {
  .presentation .problem-scene :is(#heading-2-intro, #heading-2) { font-size: 32px; }
  .presentation[data-lang=th] .problem-scene :is(#heading-2-intro, #heading-2) { font-size: 30px; }
  .work-task { --scatter-x: 0px; --scatter-y: 0px; --scatter-angle: -2deg; }
  .task-2, .task-4, .task-6 { --scatter-angle: 2deg; }
  .channel-source { font-size: 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; right: 0; padding: 3px 6px; }
  .channel-source svg { width: 12px; height: 12px; }
  .central-workspace { padding: 18px 14px; }
  .workspace-idea-header { gap: 10px; margin-bottom: 16px; }
  .workspace-idea-icon { width: 36px; height: 36px; flex-shrink: 0; font-size: 18px; }
  .workspace-idea-header small { font-size: 8px; }
  .workspace-idea-header h3 { font-size: 18px; }
  .workspace-idea-modules { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 148px); gap: 12px; }
  .problem-scene[data-problem-stage=workflow] .workload-map { min-height: 640px; }
  .workspace-idea-modules article { padding: 12px 10px; }
  .workload-takeaway { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-task, .marketing-person, .workload-links, .central-workspace { transition: none !important; }
  .problem-scene[data-problem-stage=intro] .work-task:hover { transform: translate(var(--scatter-x), var(--scatter-y)) rotate(var(--scatter-angle)); }
}

/* The same task cards become working views after landing in the app. */
.task-original, .task-original-icon { transition: opacity 300ms ease; }
.task-function { position: absolute; inset: 0; padding: 12px 16px; opacity: 0; pointer-events: none; transition: opacity 400ms ease; }
.task-function h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.problem-scene[data-problem-stage=workflow] .task-original,
.problem-scene[data-problem-stage=workflow] .task-original-icon { opacity: 0; transition-delay: calc(850ms + var(--gather-delay)); }
.problem-scene[data-problem-stage=workflow] .task-function { opacity: 1; transition-delay: calc(950ms + var(--gather-delay)); }
.function-bars { display: flex; height: 50px; gap: 12px; align-items: flex-end; }
.function-bars>span { display: flex; flex: 1; height: 100%; flex-direction: column; justify-content: flex-end; gap: 3px; }
.function-bars i { display: block; height: calc(var(--bar) * .62); min-height: 4px; background: var(--aegis-heading-gradient); border-radius: 4px 4px 0 0; }
.function-bars small { font-size: 9px; margin: 0; color: var(--aegis-secondary); line-height: 1.2; }
.function-sources { display: flex; gap: 7px; }
.function-sources>span { padding: 5px 8px; border-radius: 6px; background: #FFFFFF; font-size: 11px; color: #1737C8; }
.task-function .function-footnote { font-size: 10px; margin-top: 7px; }
.function-kpis { display: flex; gap: 22px; }
.function-kpis>span { display: flex; flex-direction: column; }
.function-kpis strong { font-size: 25px; line-height: 1.25; color: #1737C8; font-weight: 600; }
.function-kpis small { font-size: 9px; color: var(--aegis-secondary); margin: 0; }
.function-report { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: #FFFFFF; }
.report-file { font-size: 25px; color: #1737C8; }
.function-report b { display: block; font-size: 11px; font-weight: 500; }
.function-report small { font-size: 9px; margin: 0; }
.report-preview { margin-left: auto; color: #1737C8; font-size: 10px; white-space: nowrap; }
.function-calendar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.function-calendar>span { padding: 6px 8px; border-radius: 8px; background: #FFFFFF; }
.function-calendar small { margin: 0 0 3px; font-size: 9px; color: var(--aegis-secondary); }
.function-calendar b { display: block; font-size: 11px; color: #1737C8; font-weight: 500; }
.function-actions p { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; line-height: 1.5; }
.function-actions i { font-style: normal; color: #1737C8; }
@media (max-width: 767px) {
  .task-function { padding: 10px 6px; }
  .task-function h4 { font-size: 12px; }
  .function-bars { gap: 3px; }
  .function-bars small { font-size: 7px; }
  .function-sources { flex-wrap: wrap; gap: 3px; }
  .function-sources>span { padding: 3px; font-size: 9px; }
  .function-kpis { flex-wrap: wrap; gap: 5px; }
  .function-kpis strong { font-size: 15px; }
  .function-kpis small { font-size: 7px; }
  .function-report { flex-wrap: wrap; gap: 4px; padding: 5px; }
  .report-preview { margin-left: 0; }
  .function-calendar { grid-template-columns: 1fr; gap: 3px; }
  .function-calendar>span { padding: 3px 4px; }
  .function-calendar small { display: inline; font-size: 7px; margin-right: 4px; }
  .function-calendar b { display: inline; font-size: 9px; }
  .function-actions p { font-size: 10px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .task-original, .task-original-icon, .task-function { transition: none !important; }
}

/* Her expression changes as scattered work becomes one workspace. */
.staff-smile, .staff-happy { opacity: 0; transition: opacity 500ms ease; }
.staff-stress { opacity: 1; transition: opacity 500ms ease; }
.problem-scene[data-problem-stage=workflow] .central-workspace { width: 860px; left: calc(50% + 110px); }
.problem-scene[data-problem-stage=workflow] .marketing-person { z-index: 3; opacity: 1; transform: translateX(-435px) scale(.9); transition: transform 1100ms cubic-bezier(.2,.7,.2,1); }
.problem-scene[data-problem-stage=workflow] .staff-stress { opacity: 0; transition-delay: 650ms; }
.problem-scene[data-problem-stage=workflow] .staff-smile { opacity: 1; transition-delay: 650ms; }
.problem-scene[data-problem-stage=workflow] .staff-happy { opacity: .5; transition-delay: 650ms; }
.problem-scene[data-problem-stage=workflow] .staff-eyes { transform: translateX(3px); transition: transform 500ms ease 650ms; }
@media (max-width: 767px) {
  .problem-scene[data-problem-stage=workflow] .workload-map { min-height: 880px; }
  .problem-scene[data-problem-stage=workflow] .central-workspace { width: 100%; left: 50%; top: 63%; }
  .problem-scene[data-problem-stage=workflow] .marketing-person { position: absolute; left: 50%; top: 0; width: 180px; transform: translateX(-50%); }
  .problem-scene[data-problem-stage=workflow] .staff-illustration { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .staff-stress, .staff-smile, .staff-happy, .staff-eyes { transition: none !important; }
}

/* A second rearrangement turns the collected cards into an app dashboard. */
.problem-scene.app-ready .central-workspace { width: 900px; left: calc(50% + 90px); }
.problem-scene.app-ready .workspace-idea-modules { grid-template-columns: repeat(4, 1fr); grid-template-rows: 80px 110px 78px; }
.app-ready .workspace-slot:nth-child(1) { grid-column: 1 / 3; grid-row: 2; }
.app-ready .workspace-slot:nth-child(2) { grid-column: 1; grid-row: 1; }
.app-ready .workspace-slot:nth-child(3) { grid-column: 2 / 5; grid-row: 1; }
.app-ready .workspace-slot:nth-child(4) { grid-column: 3; grid-row: 2; }
.app-ready .workspace-slot:nth-child(5) { grid-column: 1 / 5; grid-row: 3; }
.app-ready .workspace-slot:nth-child(6) { grid-column: 4; grid-row: 2; }
.problem-scene.app-ready .work-task { width: var(--function-width); height: var(--function-height); transition: transform 850ms cubic-bezier(.2,.7,.2,1), width 850ms ease, height 850ms ease; transition-delay: 0ms; }
.problem-scene.app-ready .marketing-person { transform: translateX(-455px) scale(.85); }
.app-ready .function-kpis { gap: 60px; }
.app-ready .function-sources { gap: 4px; }
.app-ready .function-sources>span { padding: 4px; font-size: 9px; }
.app-ready .function-footnote { display: none; }
.app-ready .function-report { padding: 5px; gap: 5px; flex-wrap: wrap; }
.app-ready .function-actions p { font-size: 10px; line-height: 1.4; }
.app-ready .function-calendar { gap: 12px; }
.app-ready .function-calendar>span { display: flex; align-items: center; gap: 16px; padding: 5px 10px; }
.app-ready .function-calendar small { margin: 0; }
@media (min-width: 768px) {
  .problem-scene[data-problem-stage=workflow] .workload-map { min-height: 430px; }
}
@media (max-width: 767px) {
  .problem-scene.app-ready .central-workspace { width: 100%; left: 50%; }
  .problem-scene.app-ready .workspace-idea-modules { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 148px); }
  .app-ready .workspace-slot:nth-child(n) { grid-column: auto; grid-row: auto; }
  .problem-scene.app-ready .marketing-person { transform: translateX(-50%); }
  .app-ready .function-kpis { gap: 8px; }
  .app-ready .function-calendar>span { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .problem-scene.app-ready .work-task { transition: none !important; }
}
.problem-scene.app-ready .workload-map { grid-template-columns: minmax(0,1fr) 280px minmax(0,1fr); }
@media (max-width:767px) { .problem-scene.app-ready .workload-map { grid-template-columns: minmax(0,1fr) 82px minmax(0,1fr); } }
.app-ready .task-function { padding: 8px 16px; }
.app-ready .task-function h4 { margin-bottom: 6px; }
.app-ready .task-original { visibility: hidden; }
@media (max-width:767px) { .app-ready .task-function { padding: 10px 6px; } }
@media (max-width:767px) { .problem-scene.app-ready .workload-map { grid-template-rows: repeat(3,148px); } }
.staff-eyes { opacity: 0; transition: opacity 500ms ease; }
.problem-scene[data-problem-stage=workflow] .staff-eyes { opacity: 1; }
/* Move directly from scattered tasks to their final app positions. */
.work-task { width: 100%; height: 100%; }
.app-ready .task-original { visibility: visible; }
.problem-scene.app-ready .work-task { overflow: hidden; }

/* Give the desired workspace more of the slide. */
.problem-scene[data-problem-stage=workflow] .workload-takeaway,
.problem-scene[data-problem-stage=workflow] .workload-note,
.problem-scene[data-problem-stage=workflow] .marketing-person p { display: none; }
@media (min-width:768px) {
  .presentation .problem-scene[data-problem-stage=workflow] .problem-opening { width: 1160px; }
  .problem-scene.app-ready .workload-map { min-height: 540px; }
  .problem-scene.app-ready .central-workspace { width: 980px; left: calc(50% + 90px); }
  .problem-scene.app-ready .workspace-idea-modules { grid-template-rows: 90px 145px 105px; }
  .problem-scene.app-ready .marketing-person { transform: translateX(-480px) scale(.75); }
  .app-ready .task-function { padding: 14px 18px; }
  .app-ready .function-bars { height: 78px; }
  .app-ready .function-kpis strong { font-size: 30px; }
  .app-ready .function-calendar>span { padding: 12px; }
}

/* Center the app; keep its creator beside the lower left corner. */
@media (min-width:768px) {
  .problem-scene.app-ready .central-workspace { left: 50%; width: 980px; }
  .problem-scene.app-ready .marketing-person { transform: translate(-570px, 210px) scale(.65); }
}
@media (max-width:767px) {
  .problem-scene.app-ready .workload-map { min-height: 1000px; }
  .problem-scene.app-ready .central-workspace { top: 42%; }
  .problem-scene.app-ready .marketing-person { left: 8px; top: auto; bottom: 20px; width: 140px; transform: none; }
}

/* Let the app fill the desired-workspace view. */
.problem-scene[data-problem-stage=workflow] .marketing-person { display: none; }
@media (min-width:768px) {
  .problem-scene.app-ready .central-workspace { width: 1120px; }
}
@media (max-width:767px) {
  .problem-scene.app-ready .workload-map { min-height: 680px; }
  .problem-scene.app-ready .central-workspace { top: 50%; }
}

/* An oversized app canvas fades away as if the workspace continues below. */
@media (min-width:768px) {
  .presentation .problem-scene[data-problem-stage=workflow] .problem-opening { width: 1240px; }
  .problem-scene.app-ready .central-workspace { width: 1220px; top: 62%; padding-bottom: 100px; }
  .problem-scene.app-ready .workspace-idea-modules { grid-template-rows: 100px 180px 150px; }
  .problem-scene.app-ready .workload-map { min-height: 540px; }
  .problem-scene.app-ready .workspace-idea-status { margin-top: 24px; }
  .problem-scene.app-ready .workload-map { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%); }
}
@media (min-width:768px) { .problem-scene.app-ready .central-workspace { top: 66%; } }

/* Channel colors and a weekly calendar echo the actual workspace. */
.function-bars i { background: var(--channel-color); border-radius: 4px 4px 0 0; }
.function-bars { border-bottom: 1px solid rgba(5,8,46,.08); }
.function-bars small { white-space: nowrap; font-size: 8px; }
.app-ready .function-calendar { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; border: 1px solid rgba(23,55,200,.08); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.65); }
.calendar-day { min-width: 0; padding: 6px 8px; border-right: 1px solid rgba(23,55,200,.08); }
.calendar-day:last-child { border-right: 0; }
.calendar-date { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.function-calendar .calendar-date small { font-size: 8px; color: var(--aegis-secondary); }
.function-calendar .calendar-date b { font-size: 12px; color: #05082E; }
.calendar-event { padding: 6px 8px; border-radius: 5px; background: #FFFFFF; border-left: 3px solid var(--channel-color); }
.function-calendar .calendar-event small { font-size: 8px; color: var(--channel-color); margin-bottom: 2px; }
.function-calendar .calendar-event b { font-size: 10px; color: #05082E; line-height: 1.3; font-weight: 500; }
.calendar-time { display: block; margin-top: 3px; font-size: 8px; color: var(--aegis-secondary); }
@media (min-width:768px) {
  .problem-scene.app-ready .function-bars { height: 105px; gap: 15px; }
  .function-bars small { font-size: 9px; }
}
@media (max-width:767px) {
  .function-bars { gap: 3px; }
  .function-bars small { font-size: 6px; white-space: normal; }
  .app-ready .function-calendar { grid-template-columns: 1fr; }
  .calendar-day { display: flex; gap: 4px; align-items: center; padding: 2px 3px; border-right: 0; border-bottom: 1px solid rgba(23,55,200,.08); }
  .calendar-date { min-width: 30px; gap: 3px; margin: 0; }
  .function-calendar .calendar-date small, .function-calendar .calendar-date b { font-size: 6px; }
  .calendar-event { flex: 1; padding: 2px 3px; border-left-width: 2px; }
  .function-calendar .calendar-event small, .function-calendar .calendar-event b { font-size: 7px; margin: 0; }
  .calendar-time { display: none; }
}
@media (min-width:768px) {
  .problem-scene.app-ready .workload-map { -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%); mask-image: linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%); }
}

/* The same employee becomes the signed-in profile in her workspace. */
.workspace-login { position: absolute; right: 26px; top: 26px; display: flex; align-items: center; gap: 12px; }
.workspace-login-copy { text-align: right; }
.workspace-login-copy b { display: block; font-size: 12px; font-weight: 500; }
.workspace-login-copy small { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 4px; font-size: 10px; color: var(--aegis-secondary); }
.workspace-login-copy i { width: 5px; height: 5px; border-radius: 50%; background: #39BC79; }
.workspace-profile-slot { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #E4EDFF; box-shadow: 0 0 0 2px #FFFFFF; }
.problem-scene.app-ready .marketing-person { display: block; position: relative; left: auto; top: auto; bottom: auto; width: 280px; transform-origin: top left; transform: translate(var(--profile-x),var(--profile-y)) scale(.42); z-index: 4; }
.problem-scene.app-ready .marketing-person h3 { display: none; }
.problem-scene.app-ready .staff-illustration { width: 190px; max-width: none; clip-path: circle(55px at 95px 69px); transition: clip-path 650ms ease 300ms; }
@media (max-width:767px) {
  .workspace-login { top: 18px; right: 14px; }
  .workspace-login-copy { display: none; }
  .workspace-idea-header { padding-right: 46px; }
}
@media (prefers-reduced-motion:reduce) { .staff-illustration { transition: none !important; } }

/* Keep calendar entries readable before the continuation fades away. */
@media (min-width:768px) {
  .problem-scene.app-ready .central-workspace { top: 63%; }
  .problem-scene.app-ready .workspace-idea-modules { grid-template-rows: 100px 150px 150px; }
  .problem-scene.app-ready .function-bars { height: 80px; }
  .problem-scene.app-ready .workload-map { -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 94%,transparent 100%); mask-image: linear-gradient(to bottom,#000 0%,#000 94%,transparent 100%); }
}
@media (min-width:768px) {
  .problem-scene.app-ready .workload-map { -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 91%,transparent 100%); mask-image: linear-gradient(to bottom,#000 0%,#000 91%,transparent 100%); }
}

/* End the continuation fade at the navigation progress line. */
@media (min-width:768px) {
  .problem-scene.app-ready .workload-map { -webkit-mask-image: none; mask-image: none; }
  .presentation:has(.problem-scene.active.app-ready) main {
    bottom: 48px;
    -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 calc(100% - 100px),transparent 100%);
    mask-image: linear-gradient(to bottom,#000 0%,#000 calc(100% - 100px),transparent 100%);
  }
}

/* Carry only task titles into the app, then reveal each working view. */
.work-task { transform-origin: top left; }
.problem-scene.app-ready .work-task {
  background: transparent; border-color: transparent; box-shadow: none;
  transition: transform 850ms cubic-bezier(.2,.7,.2,1); overflow: visible;
}
.problem-scene.app-ready .task-original-icon,
.problem-scene.app-ready .task-original p,
.problem-scene.app-ready .task-original small,
.problem-scene.app-ready .channel-source { visibility: hidden; }
.problem-scene.app-ready .work-task::before { display: none; }
.problem-scene.app-ready .task-function { background: #EDF3FE; border-radius: inherit; }
.problem-scene.app-ready .task-original { position: absolute; left: 18px; top: 14px; right: 16px; }
@media (prefers-reduced-motion:reduce) {
  .problem-scene.app-ready .work-task { transition: none !important; }
}
@media (min-width:768px) {
  .task-original { position: absolute; left: 68px; top: 22px; right: 16px; }
  .problem-scene.app-ready .task-original {
    transition: left 850ms cubic-bezier(.2,.7,.2,1), top 850ms ease, opacity 300ms ease;
    transition-delay: 0ms, 0ms, 850ms;
  }
}

/* Carry the card frame with its title, keeping the contents quiet in motion. */
.problem-scene.app-ready .work-task {
  background: #EDF3FE;
  border-color: rgba(5,8,46,.07);
  box-shadow: 0 8px 24px rgba(0,16,60,.04);
  transition: transform 850ms cubic-bezier(.2,.7,.2,1), width 850ms cubic-bezier(.2,.7,.2,1), height 850ms cubic-bezier(.2,.7,.2,1), background-color 850ms ease;
}
@media (prefers-reduced-motion:reduce) {
  .problem-scene.app-ready .work-task { transition: none !important; }
}

/* Measure both layouts once, then move with transforms in either direction. */
.marketing-person { transform-origin: top left; }
.problem-scene.motion-settled .work-task,
.problem-scene.motion-settled .marketing-person,
.problem-scene.motion-settled .staff-illustration,
.problem-scene.motion-settled .work-task>div,
.problem-scene.motion-settled .work-task>svg { animation: none !important; }
.problem-scene.motion-settled .work-task,
.problem-scene.motion-settled .marketing-person { transition: none !important; }
.problem-scene.morphing * { transition: none !important; }
.problem-scene.morphing .task-original { opacity: 1 !important; }
.problem-scene.morphing .task-function { opacity: 0 !important; }
.problem-scene.morphing .task-original-icon,
.problem-scene.morphing .task-original p,
.problem-scene.morphing .task-original small,
.problem-scene.morphing .channel-source { visibility: hidden; }
.problem-scene.motion-settled .task-function,
.problem-scene.motion-settled .task-original { transition: opacity 300ms ease; transition-delay: 0ms; }

/* Restore the scattered-task details softly after the return journey. */
.problem-scene.motion-settled[data-problem-stage=intro] .task-original-icon,
.problem-scene.motion-settled[data-problem-stage=intro] .task-original p,
.problem-scene.motion-settled[data-problem-stage=intro] .task-original small,
.problem-scene.motion-settled[data-problem-stage=intro] .channel-source {
  visibility: visible;
  opacity: 1;
  transition: opacity 450ms ease;
}
.problem-scene.motion-settled.morphing[data-problem-stage=intro] .task-original-icon,
.problem-scene.motion-settled.morphing[data-problem-stage=intro] .task-original p,
.problem-scene.motion-settled.morphing[data-problem-stage=intro] .task-original small,
.problem-scene.motion-settled.morphing[data-problem-stage=intro] .channel-source {
  visibility: visible;
  opacity: 0;
}
@media (prefers-reduced-motion:reduce) {
  .problem-scene.motion-settled[data-problem-stage=intro] .task-original-icon,
  .problem-scene.motion-settled[data-problem-stage=intro] .task-original p,
  .problem-scene.motion-settled[data-problem-stage=intro] .task-original small,
  .problem-scene.motion-settled[data-problem-stage=intro] .channel-source { transition: none !important; }
}
.problem-scene.motion-settled[data-problem-stage=intro] .workload-links,
.problem-scene.motion-settled[data-problem-stage=intro] .marketing-person h3,
.problem-scene.motion-settled[data-problem-stage=intro] .marketing-person p,
.problem-scene.motion-settled[data-problem-stage=intro] .work-task::before { opacity: 1; transition: opacity 450ms ease; }
.problem-scene.motion-settled.morphing[data-problem-stage=intro] .workload-links,
.problem-scene.motion-settled.morphing[data-problem-stage=intro] .marketing-person h3,
.problem-scene.motion-settled.morphing[data-problem-stage=intro] .marketing-person p,
.problem-scene.motion-settled.morphing[data-problem-stage=intro] .work-task::before { opacity: 0; }
@media (prefers-reduced-motion:reduce) {
  .problem-scene.motion-settled .workload-links,
  .problem-scene.motion-settled .marketing-person h3,
  .problem-scene.motion-settled .marketing-person p,
  .problem-scene.motion-settled .work-task::before { transition: none !important; }
}

/* Quiet light trails and staggered incoming-work notifications. */
.work-flow .work-light { fill: none; stroke: #018FFF; stroke-width: 2.5; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 3px rgba(0,194,255,.45)); }
.work-notice { position: absolute; left: 20px; bottom: -10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; background: #FFFFFF; color: #536083; border-radius: 6px; box-shadow: 0 3px 12px rgba(5,8,46,.07); font-size: 9px; line-height: 1.3; opacity: 0; pointer-events: none; }
.work-notice i { width: 4px; height: 4px; background: #018FFF; border-radius: 50%; }
.problem-scene.active[data-problem-stage=intro]:not(.morphing) .work-notice { animation: incoming-work 6500ms ease infinite; animation-delay: calc(1400ms + var(--notice-delay)); }
.task-1 { --notice-delay: 0ms; }
.task-2 { --notice-delay: 1050ms; }
.task-3 { --notice-delay: 2100ms; }
.task-4 { --notice-delay: 3150ms; }
.task-5 { --notice-delay: 4200ms; }
.task-6 { --notice-delay: 5250ms; }
@keyframes incoming-work {
  0%,29%,100% { opacity: 0; transform: translateY(5px); }
  5%,20% { opacity: 1; transform: translateY(0); }
}
@media (max-width:767px) { .work-notice { left: 3px; bottom: -7px; font-size: 7px; padding: 3px 5px; } }
@media (prefers-reduced-motion:reduce) {
  .work-light, .work-notice { display: none !important; }
}

/* Incoming tasks themselves travel along the connector. */
.work-message { opacity: 0; overflow: visible; pointer-events: none; }
.travel-notice { display: flex; align-items: center; justify-content: center; gap: 5px; width: max-content; max-width: 150px; margin: 3px auto; padding: 5px 9px; border-radius: 6px; background: rgba(255,255,255,.97); color: #536083; box-shadow: 0 3px 12px rgba(5,8,46,.08); font-size: 9px; line-height: 1.4; white-space: nowrap; }
.travel-notice i { width: 4px; height: 4px; border-radius: 50%; background: #8797BC; }
@media (prefers-reduced-motion:reduce) { .work-message { display: none !important; } }
/* Notices and dots now share a random incoming-work schedule. */
.problem-scene.active[data-problem-stage=intro]:not(.morphing) .work-notice { animation: none !important; }

/* A compact app identity, with an icon drawn from the workspace layout. */
.workspace-idea-header { gap: 16px; align-items: center; margin-bottom: 24px; }
.workspace-idea-icon { width: 54px; height: 54px; flex-shrink: 0; border-radius: 15px; background: linear-gradient(145deg,#05082E,#1737C8); color: #FFFFFF; box-shadow: 0 5px 14px rgba(23,55,200,.12),inset 0 1px 0 rgba(255,255,255,.18); }
.workspace-idea-icon svg { width: 36px; height: 36px; }
.workspace-title { min-width: 0; }
.workspace-title small { display: block; color: #7682A0; font-size: 9px; font-weight: 500; letter-spacing: 1.3px; line-height: 1.4; }
.workspace-title-divider { padding: 0 6px; color: #ADB6CB; }
.workspace-title h3 { margin: 4px 0 0; font-size: 27px; line-height: 1.2; letter-spacing: -.7px; font-weight: 600; color: #05082E; }
.workspace-title-light { color: #56627F; font-weight: 400; }
@media (max-width:767px) {
  .workspace-idea-header { gap: 10px; margin-bottom: 20px; }
  .workspace-idea-icon { width: 38px; height: 38px; border-radius: 11px; }
  .workspace-idea-icon svg { width: 28px; height: 28px; }
  .workspace-title small { font-size: 7px; letter-spacing: .5px; }
  .workspace-title-divider { padding: 0 2px; }
  .workspace-title h3 { font-size: 18px; letter-spacing: -.3px; line-height: 1.15; }
  .workspace-title-light { display: block; }
}
/* Flat workspace icon. */
.workspace-idea-icon { background: #1737C8; box-shadow: none; }

/* A visual report preview before the view-more affordance. */
.app-ready .function-report { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 7px 8px; }
.report-summary-preview { display: flex; align-items: center; gap: 10px; min-width: 0; }
.report-summary-preview svg { display: block; width: 94px; height: 55px; flex-shrink: 0; }
.report-summary-preview>div { min-width: 0; }
.function-report .report-preview { align-self: flex-end; font-size: 9px; margin: 0; }
@media (max-width:767px) {
  .app-ready .function-report { gap: 5px; padding: 5px; }
  .report-summary-preview { flex-direction: column; align-items: flex-start; gap: 4px; }
  .report-summary-preview svg { width: 76px; height: 45px; max-width: 100%; }
  .report-summary-preview b { font-size: 9px; }
  .function-report .report-preview { font-size: 8px; }
}

/* Readable report content, rather than a report-shaped icon. */
.app-ready .function-report { gap: 3px; padding: 6px 8px; }
.report-document-heading { display: flex; justify-content: space-between; align-items: center; gap: 5px; }
.function-report .report-document-heading b { font-size: 10px; line-height: 1.3; }
.report-sample { font-size: 6px; color: #7A879F; padding: 2px 4px; border-radius: 3px; background: #F1F5FB; white-space: nowrap; }
.report-document-metrics { display: flex; align-items: center; gap: 14px; }
.report-document-metrics>span { display: flex; align-items: baseline; gap: 4px; }
.report-document-metrics strong { font-size: 12px; line-height: 1.3; font-weight: 600; color: #1737C8; }
.report-document-metrics>span:nth-child(2) strong { color: #008AB8; }
.report-document-metrics span span { font-size: 7px; color: #8190AA; }
.report-document-metrics .report-trend { margin-left: auto; color: #7350C8; font-size: 7px; white-space: nowrap; }
.function-report .report-document-chart { display: block; width: 100%; height: 32px; }
.function-kpis>span:nth-child(1) strong { color: #1737C8; }
.function-kpis>span:nth-child(2) strong { color: #008AB8; }
.function-kpis>span:nth-child(3) strong { color: #7350C8; }
@media (max-width:767px) {
  .app-ready .function-report { padding: 5px; gap: 4px; }
  .report-document-heading { flex-wrap: wrap; }
  .function-report .report-document-heading b { font-size: 8px; }
  .report-document-metrics { flex-wrap: wrap; gap: 3px 7px; }
  .report-document-metrics strong { font-size: 9px; }
  .report-document-metrics span span { font-size: 6px; }
  .report-document-metrics .report-trend { display: none; }
  .function-report .report-document-chart { height: 25px; }
}
@media (max-width:360px) {
  .report-document-heading .report-sample { display: none; }
  .app-ready .function-report { gap: 3px; padding: 4px; }
  .report-document-metrics>span { gap: 2px; }
  .function-report .report-document-chart { height: 20px; }
}

/* Actionable task rows with due dates and clear states. */
.function-actions { display: flex; flex-direction: column; gap: 5px; }
.action-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; background: #FFFFFF; cursor: pointer; }
.action-row input { margin: 0; width: 12px; height: 12px; flex-shrink: 0; accent-color: #1737C8; cursor: pointer; }
.action-copy { flex: 1; min-width: 0; }
.action-copy b { display: block; font-size: 10px; line-height: 1.25; font-weight: 500; color: #05082E; }
.action-due { display: block; margin-top: 2px; font-size: 7px; line-height: 1.2; color: #8190AA; }
.action-status { padding: 3px 5px; border-radius: 4px; background: #EAF1FF; color: #1737C8; font-size: 7px; white-space: nowrap; }
.action-status-queued { color: #7350C8; background: #F1EDFB; }
.action-done { display: none; }
.action-row:has(input:checked) .action-copy b { color: #8190AA; text-decoration: line-through; }
.action-row:has(input:checked) .action-open { display: none; }
.action-row:has(input:checked) .action-done { display: inline; }
.action-row:has(input:checked) .action-status { background: #EAF5F5; color: #008A91; }
.action-row:focus-within { outline: 2px solid rgba(23,55,200,.25); outline-offset: 1px; }
.action-view-plan { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px; border-radius: 5px; color: #1737C8; background: rgba(255,255,255,.65); font-size: 8px; line-height: 1.2; }
.problem-scene.app-ready .task-function:has(.function-actions) { pointer-events: auto; }
@media (max-width:767px) {
  .function-actions { gap: 4px; }
  .action-row { gap: 4px; padding: 5px; align-items: flex-start; }
  .action-row input { width: 10px; height: 10px; margin-top: 1px; }
  .action-copy b { font-size: 8px; }
  .action-due { font-size: 6px; }
  .action-status { display: none; }
  .action-view-plan { font-size: 7px; padding: 4px; }
}
/* The weekly report title belongs to the panel header. */
.function-report { position: relative; }
.function-report>.report-sample { position: absolute; top: 5px; right: 7px; }
.app-ready .function-report { padding-top: 8px; }
.function-report .report-document-metrics { padding-right: 30px; }
.function-report .report-document-chart { height: 43px; }
@media (max-width:767px) {
  .function-report>.report-sample { display: none; }
  .function-report .report-document-metrics { padding-right: 0; }
  .function-report .report-document-chart { height: 25px; }
}

/* Chapter 3: an authored prompt becomes a governed company app. */
.presentation .creator-scene { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 22px; padding: 26px 70px; align-content: center; }
.creator-heading { text-align: center; }
.creator-heading .eyebrow { justify-content: center; margin-bottom: 10px; color: #7682A0; }
.presentation .creator-heading h2 { margin: 0; font-size: 42px; line-height: 1.12; letter-spacing: -1px; }
.presentation[data-lang=th] .creator-heading h2 { font-size: 34px; line-height: 1.3; }
.creator-layout { display: grid; grid-template-columns: 1.65fr 1fr; gap: 26px; align-items: stretch; }
.coder-window { background: #0E1531; color: #F6F9FF; border: 1px solid rgba(5,8,46,.12); border-radius: 18px; overflow: hidden; box-shadow: 0 16px 45px rgba(5,8,46,.12); }
.coder-toolbar { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.coder-window-dots { font-size: 9px; letter-spacing: 3px; color: #56627F; }
.coder-toolbar b { font-size: 12px; font-weight: 500; }
.coder-tools { margin-left: auto; font-size: 9px; color: #929DB8; }
.coder-content { padding: 22px 24px 16px; }
.prompt-sender { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #C5D0E8; }
.prompt-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1737C8; color: white; font-size: 10px; }
.prompt-role { margin-left: auto; color: #6F7E9D; font-size: 9px; }
.coder-prompt { margin-top: 12px; padding: 16px 18px; border-radius: 10px; background: #182341; min-height: 112px; font-size: 16px; line-height: 1.6; }
.ready .typing-char:not(.typed) { display: none; }
.typing-caret { display: inline-block; vertical-align: -.12em; width: 2px; height: 1em; margin-left: 3px; background: #48DAFF; animation: creator-caret 900ms steps(1) infinite; }
.creator-scene:not([data-creator-phase="0"]) .typing-caret { display: none; }
@keyframes creator-caret { 50% { opacity: 0; } }
.creator-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.coder-response { margin-top: 22px; opacity: 1; transform: none; transition: opacity 500ms ease,transform 500ms ease; }
.creator-scene[data-creator-phase="0"] .coder-response { opacity: 0; transform: translateY(8px); }
.coder-response-heading { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #C5D0E8; }
.coder-response-heading b { font-weight: 500; }
.coder-agent-mark { color: #48DAFF; font-size: 15px; }
.coder-building { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 9px; color: #48DAFF; }
.coder-building i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: creator-building 1300ms ease infinite; }
@keyframes creator-building { 50% { opacity: .25; } }
.creator-scene[data-creator-phase="4"] .coder-building,.creator-scene[data-creator-phase="5"] .coder-building { display: none; }
.coder-response>p { font-size: 11px; line-height: 1.5; color: #8F9EBE; margin: 7px 0 12px; }
.generated-workspace { background: #F6F9FF; color: #05082E; border-radius: 8px; padding: 13px; }
.generated-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; }
.generated-toolbar svg { width: 21px; height: 21px; color: #1737C8; }
.generated-toolbar b { font-size: 11px; font-weight: 600; }
.generated-status { margin-left: auto; font-size: 7px; color: #8190AA; }
.generated-modules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.generated-modules>div { padding: 9px; background: #EDF3FE; border-radius: 6px; }
.generated-modules small { display: block; font-size: 8px; color: #536083; margin-bottom: 8px; }
.generated-bars { display: flex; align-items: end; gap: 5px; height: 40px; }
.generated-bars i { flex: 1; height: 70%; background: #1877F2; border-radius: 2px 2px 0 0; }
.generated-bars i:nth-child(2) { height: 48%; background: #E52D70; }
.generated-bars i:nth-child(3) { height: 85%; background: #111; }
.generated-bars i:nth-child(4) { height: 42%; background: #0A66C2; }
.generated-bars i:nth-child(5) { height: 63%; background: #FF0000; }
.generated-calendar { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.generated-calendar i { font-size: 6px; font-style: normal; color: #8190AA; }
.generated-calendar>span { height: 24px; background: white; border-left: 2px solid #1737C8; border-radius: 3px; }
.generated-calendar>span:nth-last-child(2) { border-color: #7350C8; }
.generated-tasks { display: flex; flex-direction: column; gap: 5px; font-size: 7px; color: #536083; }
.coder-footer { border-top: 1px solid rgba(255,255,255,.06); padding-top: 11px; margin-top: 16px; font-size: 9px; color: #929DB8; min-height: 24px; }
.creator-status { display: none; }
.creator-scene[data-creator-phase="0"] .creator-status[data-phase="0"],.creator-scene[data-creator-phase="1"] .creator-status[data-phase="1"],.creator-scene[data-creator-phase="4"] .creator-status[data-phase="2"],.creator-scene[data-creator-phase="5"] .creator-status[data-phase="3"] { display: inline; }
.creator-pipeline { display: flex; flex-direction: column; justify-content: center; }
.pipeline-card { display: flex; gap: 12px; padding: 16px; border: 1px solid rgba(23,55,200,.09); border-radius: 13px; background: rgba(255,255,255,.8); opacity: .45; transition: opacity 450ms ease,border-color 450ms ease,box-shadow 450ms ease; }
.pipeline-icon { flex-shrink: 0; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; background: #EAF1FF; color: #1737C8; }
.pipeline-icon svg { width: 25px; height: 25px; }
.pipeline-kicker { font-size: 7px; letter-spacing: 1px; color: #8190AA; }
.pipeline-card h3 { margin: 3px 0 4px; font-size: 16px; line-height: 1.2; font-weight: 600; }
.pipeline-card p { margin: 0; color: #7682A0; font-size: 10px; line-height: 1.4; }
.pipeline-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pipeline-tags>span { padding: 3px 5px; font-size: 7px; border-radius: 4px; background: #EDF3FE; color: #536083; }
.pipeline-link { align-self: center; font-size: 16px; line-height: 24px; color: #9BAAD0; }
.pipeline-checks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pipeline-checks li { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #7682A0; }
.check-mark { color: #1737C8; opacity: .25; }
.pipeline-store-app { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px; background: #EDF3FE; border-radius: 7px; opacity: 0; transform: translateY(5px); transition: opacity 450ms ease,transform 450ms ease; }
.pipeline-store-app>svg { width: 28px; height: 28px; color: #1737C8; flex-shrink: 0; }
.pipeline-store-app b { display: block; font-size: 9px; font-weight: 500; }
.pipeline-store-app div>span { display: block; font-size: 7px; color: #8190AA; margin-top: 3px; }
.store-ready { color: #008A91; font-size: 12px; margin-left: auto; }
.creator-scene:not([data-creator-phase="0"]) .pipeline-kit,.creator-scene[data-creator-phase="4"] .pipeline-govern,.creator-scene[data-creator-phase="5"] .pipeline-govern,.creator-scene[data-creator-phase="5"] .pipeline-store { opacity: 1; border-color: rgba(23,55,200,.2); box-shadow: 0 4px 16px rgba(23,55,200,.04); }
.creator-scene[data-creator-phase="4"] .pipeline-checks li,.creator-scene[data-creator-phase="5"] .pipeline-checks li { animation: creator-check 450ms ease both; }
.creator-scene[data-creator-phase="4"] .pipeline-checks li:nth-child(2) { animation-delay: 550ms; }
.creator-scene[data-creator-phase="4"] .pipeline-checks li:nth-child(3) { animation-delay: 1100ms; }
@keyframes creator-check { from { opacity: .2; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.creator-scene[data-creator-phase="4"] .check-mark,.creator-scene[data-creator-phase="5"] .check-mark { opacity: 1; }
.creator-scene[data-creator-phase="5"] .pipeline-store-app { opacity: 1; transform: none; }
.creator-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.creator-bottom p { font-size: 8px; color: #8190AA; margin: 0; }
.creator-bottom button { font-size: 10px; white-space: nowrap; }
@media (max-width:767px) {
  .presentation .creator-scene { padding: 28px 22px; gap: 20px; justify-content: flex-start; }
  .presentation .creator-heading h2 { font-size: 29px; }
  .presentation[data-lang=th] .creator-heading h2 { font-size: 27px; }
  .creator-heading .eyebrow { font-size: 8px; }
  .creator-layout { grid-template-columns: 1fr; gap: 18px; }
  .coder-toolbar { padding: 12px; gap: 8px; }
  .coder-tools { font-size: 7px; }
  .coder-toolbar b { font-size: 10px; }
  .coder-window-dots { display: none; }
  .coder-content { padding: 16px; }
  .coder-prompt { font-size: 13px; min-height: 150px; padding: 12px; }
  .generated-modules { grid-template-columns: 1fr 1fr; }
  .generated-modules>div:last-child { grid-column: 1 / 3; }
  .pipeline-card { padding: 14px; }
  .creator-bottom { align-items: flex-start; }
  .creator-bottom p { font-size: 7px; line-height: 1.5; }
}
@media (prefers-reduced-motion:reduce) {
  .typing-caret,.coder-building i { animation: none; }
  .coder-response,.pipeline-card,.pipeline-store-app { transition: none; }
  .pipeline-checks li { animation: none !important; }
}

/* Keep both problem headings anchored while the app extends to the footer. */
@media (min-width: 768px) {
  .presentation .problem-scene > .problem-opening {
    align-self: start;
    margin: 0 auto;
  }
  .presentation .problem-scene[data-problem-stage=workflow] {
    top: calc(50% - 12px);
  }
}

/* Her signed-in profile becomes the employee typing the request. */
.coder-request { display: grid; grid-template-columns: 102px minmax(0,1fr); gap: 16px; align-items: center; }
.coder-request-copy { min-width: 0; }
.creator-staff-illustration { display: block; width: 102px; height: auto; transform-origin: 50% 28.75%; }
.creator-staff .staff-stress { display: none; }
.creator-staff .staff-eyes,.creator-staff .staff-smile { opacity: 1; }
.creator-staff .staff-happy { opacity: .5; }
.creator-scene.active[data-creator-phase="0"] .typing-hand-left { animation: staff-type 240ms ease-in-out infinite alternate; }
.creator-scene.active[data-creator-phase="0"] .typing-hand-right { animation: staff-type 310ms ease-in-out 100ms infinite alternate-reverse; }
@keyframes staff-type { to { transform: translateY(-3px); } }
@media (max-width:767px) {
  .coder-request { grid-template-columns: 68px minmax(0,1fr); gap: 10px; align-items: start; }
  .creator-staff-illustration { width: 68px; margin-top: 24px; }
}
@media (prefers-reduced-motion:reduce) {
  .creator-staff .typing-hand-left,.creator-staff .typing-hand-right { animation: none !important; }
}
.creator-scene.staff-entering .coder-window { overflow: visible; }
.creator-scene.staff-entering .coder-toolbar { border-radius: 18px 18px 0 0; }

/* A conversation, with her profile anchored at the lower left of the coder. */
.coder-request { display: block; width: 87%; }
.prompt-sender { justify-content: flex-start; }
.prompt-role { display: none; }
.coder-prompt { position: relative; margin-top: 9px; border-radius: 14px 14px 14px 3px; background: #22315A; min-height: 120px; font-size: 15px; }
.coder-response { position: relative; width: 91%; margin: 18px 0 0 auto; padding: 15px; border: 1px solid rgba(116,145,211,.14); border-radius: 14px 14px 3px 14px; background: #151F3B; }
.coder-agent-mark { display: grid; place-items: center; width: 24px; height: 24px; background: #253558; border-radius: 50%; }
.coder-footer { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 12px; }
.creator-staff { flex-shrink: 0; width: 38px; height: 38px; }
.creator-staff-illustration { width: 38px; height: 38px; margin: 0; border-radius: 50%; background: #E4EDFF; transform-origin: 50% 50%; }
.coder-status-copy { min-width: 0; line-height: 1.5; }
.coder-staff-label { display: block; margin-bottom: 2px; color: #C5D0E8; font-size: 10px; font-weight: 500; }
@media (max-width:767px) {
  .coder-request { width: 94%; }
  .coder-prompt { font-size: 13px; min-height: 140px; }
  .coder-response { width: 96%; padding: 11px; }
  .creator-staff-illustration { width: 38px; margin: 0; }
}
@media (min-width:768px) {
  .presentation .creator-scene { gap: 18px; }
  .coder-content { padding: 16px 24px 14px; }
  .coder-prompt { min-height: 96px; padding: 13px 16px; }
  .coder-response { padding: 12px; margin-top: 14px; }
  .generated-workspace { padding: 10px; }
  .generated-modules>div { padding: 7px; }
  .coder-footer { margin-top: 14px; padding-top: 10px; }
}

/* White app cards preserve the original task surfaces on a quiet grey canvas. */
.problem-scene.app-ready .central-workspace { background: #F3F4F7; }
.problem-scene.app-ready .work-task,
.problem-scene.app-ready .task-function { background: #FFFFFF; }
.problem-scene.app-ready .work-task { border-color: rgba(5,8,46,.06); box-shadow: 0 2px 8px rgba(5,8,46,.025); }

/* Give the employee and profile faces more breathing room. */
.problem-scene[data-problem-stage=intro] .staff-illustration { width: 170px; }
.problem-scene.app-ready .marketing-person { transform: translate(var(--profile-x),var(--profile-y)) scale(.34); }
.problem-scene.app-ready .staff-illustration { clip-path: circle(70px at 95px 69px); }
@media (max-width:767px) {
  .problem-scene[data-problem-stage=intro] .staff-illustration { width: 82px; }
}

/* AI coder narrates its work as ordinary chat text. */
.coder-progress-chat { min-height: 125px; }
.coder-progress-chat p { font-size: 12px; line-height: 1.65; color: #B4C2DF; margin: 12px 0 0; }
@keyframes coder-chat-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width:767px) { .coder-progress-chat p { font-size: 11px; } }

/* Human messages on the right; the AI thinks, then replies on the left. */
.coder-request { margin-left: auto; }
.prompt-sender { justify-content: flex-end; }
.coder-prompt { border-radius: 14px 14px 3px 14px; }
.coder-response { margin-left: 0; margin-right: auto; border-radius: 14px 14px 14px 3px; }
.coder-thinking { display: none; align-items: center; gap: 8px; position: absolute; top: 52px; left: 12px; font-size: 12px; color: #9AABCD; }
.creator-scene[data-creator-state="thinking"] .coder-response { opacity: 1; transform: none; }
.creator-scene[data-creator-state="thinking"] .coder-response>p,
.creator-scene[data-creator-state="thinking"] .coder-progress-chat { visibility: hidden; }
.creator-scene[data-creator-state="thinking"] .coder-thinking { display: flex; }
.creator-scene[data-creator-state="thinking"] .typing-caret { display: none; }
.thinking-dots { display: flex; gap: 4px; }
.thinking-dots i { width: 4px; height: 4px; border-radius: 50%; background: #9AABCD; animation: thinking-dot 900ms ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay: 150ms; }
.thinking-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes thinking-dot { 0%,70%,100% { opacity: .35; transform: none; } 35% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion:reduce) { .thinking-dots i { animation: none; } }

/* Grow the chat frame as the AI types each line. */
.coder-window { align-self: start; }
.coder-prompt { min-height: 0; }
.creator-scene[data-creator-state="typing"] .coder-response { display: none; }
.coder-response { min-height: 0; }
.coder-progress-chat { min-height: 0; padding-top: 0; }
.coder-thinking { position: static; margin-top: 12px; }
.creator-scene[data-creator-state="thinking"] .coder-progress-chat { display: none; }
.ready .ai-typing-char:not(.typed) { display: none; }
.ready .coder-progress-chat p { display: none; visibility: visible; animation: none; }
.ready .check-completed { visibility: visible; }
.creator-scene:not([data-coder-progress="0"]) .coder-check-social,
.creator-scene:is([data-coder-progress="3"],[data-coder-progress="4"],[data-coder-progress="5"],[data-coder-progress="6"]) .coder-check-calendar,
.creator-scene:is([data-coder-progress="5"],[data-coder-progress="6"]) .coder-start-coding { display: block; }
@media (min-width:768px) {
  .presentation .creator-scene { align-content: start; padding-top: 40px; }
}



/* Keep the outer coder frame steady; only chat bubbles grow. */
.coder-window { height: 460px; display: flex; flex-direction: column; }
.coder-toolbar { flex-shrink: 0; }
.coder-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.coder-request,.coder-response { flex-shrink: 0; }
.coder-footer { margin-top: auto; flex-shrink: 0; }
@media (max-width:767px) { .coder-window { height: 560px; } }

/* Keep the last chat message visibly in progress until submission. */
.coder-working { display: none; align-items: center; gap: 8px; margin-top: 12px; color: #8F9EBE; font-size: 10px; line-height: 1.4; }
.creator-scene[data-creator-phase="1"][data-coder-progress="5"] .coder-working { display: flex; }

/* A single headline leads into the two-column story from the left edge. */
.creator-heading { text-align: left; }
.creator-heading .eyebrow { justify-content: flex-start; margin-bottom: 12px; }
@media (min-width:768px) {
  .presentation .creator-scene { align-content: center; padding: 40px 70px; gap: 26px; }
  .presentation .creator-heading h2 { font-size: 44px; line-height: 1.2; letter-spacing: -1.3px; white-space: nowrap; }
  .presentation[data-lang=th] .creator-heading h2 { font-size: 36px; line-height: 1.4; letter-spacing: -.7px; }
  .creator-pipeline { justify-content: flex-start; padding-top: 10px; }
}

/* Give the headline more air before the coder and delivery flow. */
@media (min-width:768px) {
  .creator-heading { margin-bottom: 20px; }
}
@media (max-width:767px) {
  .creator-heading { margin-bottom: 10px; }
}

/* The coder shares a working preview without leaving the journey. */
.coder-preview-ready { display: none; margin-top: 12px; }
.creator-scene[data-coder-progress="6"] .coder-preview-ready { display: block; }
.coder-preview-ready p { margin: 0 0 6px; font-size: 11px; line-height: 1.4; color: #B4C2DF; }
.coder-preview-url { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #83C7FF; text-decoration: underline; text-underline-offset: 3px; }
.coder-preview-url:hover { color: #B7E2FF; }
.workspace-preview { width: min(1220px,94vw); height: min(850px,90vh); max-width: none; max-height: none; padding: 0; border: 1px solid #D8DFED; border-radius: 20px; background: #F3F5FA; color: #05082E; box-shadow: 0 35px 100px rgba(5,8,46,.28); overflow: hidden; }
.workspace-preview[open] { display: flex; flex-direction: column; }
.workspace-preview::backdrop { background: transparent; backdrop-filter: blur(8px); }
.preview-browser { height: 38px; display: flex; align-items: center; padding: 0 16px; gap: 16px; background: #E9EDF5; border-bottom: 1px solid #DDE3EE; flex-shrink: 0; }
.preview-browser-dots { color: #A2AEC4; letter-spacing: 3px; font-size: 8px; }
.preview-address { margin: auto; color: #75829D; font-size: 10px; }
.preview-browser button { padding: 0; width: 24px; height: 24px; border: 0; background: transparent; color: #536083; font-size: 22px; line-height: 1; cursor: pointer; }
.preview-app-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 80px; padding: 16px 24px; background: white; border-bottom: 1px solid #E3E8F1; flex-shrink: 0; }
.preview-app-brand { display: flex; align-items: center; gap: 12px; }
.preview-app-brand>svg { width: 40px; height: 40px; color: #1737C8; background: #EDF2FF; border-radius: 10px; padding: 6px; }
.preview-app-brand small { display: block; color: #7D8AA4; font-size: 8px; letter-spacing: 1.1px; margin-bottom: 4px; }
.preview-app-brand b { font-size: 20px; font-weight: 600; letter-spacing: -.4px; }
.preview-sample { margin-left: auto; color: #8D98AD; font-size: 10px; }
.preview-account { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 500; }
.preview-account small { display: block; font-size: 9px; color: #8190AA; margin-top: 3px; }
.preview-profile { width: 34px; height: 34px; background: #E4EDFF; border-radius: 50%; }
.preview-app-body { display: flex; flex: 1; min-height: 0; }
.preview-sidebar { width: 178px; flex-shrink: 0; padding: 24px 12px; display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,.75); border-right: 1px solid #E3E8F1; }
.preview-sidebar button { display: flex; align-items: center; gap: 9px; padding: 12px; border-radius: 9px; border: 0; color: #70809B; background: transparent; font-size: 11px; text-align: left; cursor: pointer; }
.preview-sidebar button[aria-pressed="true"] { color: #1737C8; background: #E8EEFF; font-weight: 600; }
.preview-sidebar button>span[aria-hidden] { font-size: 17px; width: 20px; }
.preview-connections { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding: 16px 10px 4px; font-size: 9px; color: #8390A9; }
.preview-connections small { font-size: 7px; letter-spacing: 1px; color: #A2ADC1; }
.preview-connections>span { display: flex; align-items: center; gap: 6px; }
.preview-connections i { width: 4px; height: 4px; background: #39BC79; border-radius: 50%; }
.presentation .workspace-preview .preview-main { position: static; inset: auto; flex: 1; min-width: 0; min-height: 0; max-width: none; margin: 0; padding: 24px; overflow: auto; background: radial-gradient(ellipse at 100% 0,rgba(155,210,255,.18),transparent 60%),#F3F5FA; mask-image: none; -webkit-mask-image: none; }
.preview-welcome { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.preview-welcome p { font-size: 8px; letter-spacing: 1px; color: #8190AA; margin: 0 0 7px; }
.presentation .workspace-preview .preview-welcome h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.6px; margin: 0; }
.preview-period { color: #677692; font-size: 9px; border: 1px solid #DFE5F0; background: white; border-radius: 7px; padding: 8px 10px; white-space: nowrap; }
.preview-card { background: white; border: 1px solid #E3E8F2; border-radius: 14px; padding: 18px; box-shadow: 0 3px 12px rgba(5,8,46,.025); }
.preview-card h4 { font-size: 13px; font-weight: 600; margin: 0 0 14px; letter-spacing: -.1px; }
.preview-overview { margin-bottom: 16px; }
.preview-overview .function-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.preview-overview .function-kpis>span { display: flex; flex-direction: column; align-items: flex-start; border-right: 1px solid #E8ECF5; padding: 0 20px; }
.preview-overview .function-kpis>span:first-child { padding-left: 0; }
.preview-overview .function-kpis>span:last-child { border: 0; }
.preview-overview .function-kpis strong { font-size: 32px; line-height: 1.15; }
.preview-overview .function-kpis small { font-size: 10px; margin-top: 5px; }
.preview-overview .function-kpis>span:nth-child(1) strong { color: #1737C8; }
.preview-overview .function-kpis>span:nth-child(2) strong { color: #008AB8; }
.preview-overview .function-kpis>span:nth-child(3) strong { color: #7350C8; }
.preview-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: 16px; }
.preview-channels .function-bars { height: 114px; gap: 20px; }
.preview-channels .function-bars small { font-size: 8px; }
.preview-channels .function-bars i { border-radius: 5px 5px 0 0; }
.preview-weekly .function-report { padding: 0; }
.preview-weekly .report-preview { display: block; font-size: 9px; margin-top: 3px; }
.preview-calendar .function-calendar { height: auto; gap: 7px; border: 0; background: transparent; }
.preview-calendar .calendar-day { min-width: 0; padding: 0; }
.preview-calendar .calendar-date { margin-bottom: 8px; }
.preview-calendar .calendar-date small { font-size: 7px; }
.preview-calendar .calendar-date b { font-size: 17px; }
.preview-calendar .calendar-event { min-height: 83px; padding: 7px; background: #F5F7FC; }
.preview-calendar .calendar-event small { font-size: 7px; }
.preview-calendar .calendar-event b { font-size: 9px; line-height: 1.35; }
.preview-calendar .calendar-time { font-size: 7px; }
.preview-actions .action-row { padding: 10px 0; }
.preview-actions .action-copy>b { font-size: 10px; }
.preview-actions .action-due { font-size: 8px; }
.preview-actions .action-status { font-size: 7px; }
.preview-actions .action-view-plan { font-size: 9px; margin-top: 12px; }
.preview-main[data-preview-view="calendar"] .preview-overview,.preview-main[data-preview-view="actions"] .preview-overview { display: none; }
.preview-main[data-preview-view="calendar"] .preview-dashboard-grid,.preview-main[data-preview-view="actions"] .preview-dashboard-grid { grid-template-columns: 1fr; }
.preview-main[data-preview-view="calendar"] .preview-card:not(.preview-calendar),.preview-main[data-preview-view="actions"] .preview-card:not(.preview-actions) { display: none; }
.preview-main[data-preview-view="calendar"] .calendar-event { min-height: 170px; }
.preview-main[data-preview-view="calendar"] .calendar-event b { font-size: 14px; }
.preview-app-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid #E3E8F1; background: white; flex-shrink: 0; }
.preview-app-footer>span { font-size: 10px; color: #8190AA; }
.preview-app-footer button { border: 0; border-radius: 8px; background: #05082E; color: white; font-size: 11px; padding: 11px 16px; cursor: pointer; }
@media (max-width:767px) {
  .workspace-preview { width: 96vw; height: 94dvh; border-radius: 14px; }
  .preview-app-header { padding: 12px; height: 70px; }
  .preview-app-brand { gap: 8px; }
  .preview-app-brand b { font-size: 14px; }
  .preview-app-brand>svg { width: 32px; height: 32px; }
  .preview-sample,.preview-account>span { display: none; }
  .preview-app-body { flex-direction: column; }
  .preview-sidebar { width: 100%; padding: 8px; flex-direction: row; gap: 4px; border-right: 0; border-bottom: 1px solid #E3E8F1; }
  .preview-sidebar button { padding: 8px; gap: 5px; font-size: 9px; flex: 1; }
  .preview-sidebar button>span[aria-hidden] { font-size: 13px; width: auto; }
  .preview-connections { display: none; }
  .presentation .workspace-preview .preview-main { padding: 14px; }
  .preview-welcome { align-items: flex-start; }
  .presentation .workspace-preview .preview-welcome h2 { font-size: 19px; }
  .preview-welcome p { font-size: 6px; }
  .preview-period { font-size: 6px; padding: 6px; }
  .preview-overview .function-kpis { gap: 8px; }
  .preview-overview .function-kpis>span { padding: 0 5px; }
  .preview-overview .function-kpis strong { font-size: 24px; }
  .preview-card { padding: 14px; }
  .preview-dashboard-grid { grid-template-columns: 1fr; gap: 12px; }
  .preview-channels .function-bars { gap: 10px; }
  .preview-channels .function-bars small { font-size: 6px; }
  .preview-calendar .function-calendar { gap: 4px; }
  .preview-calendar .calendar-event { padding: 4px; }
  .preview-calendar .calendar-event b { font-size: 7px; }
  .preview-calendar .calendar-event small { font-size: 6px; }
  .preview-main[data-preview-view="calendar"] .calendar-event b { font-size: 9px; }
  .preview-app-footer { padding: 10px 12px; }
  .preview-app-footer>span { font-size: 8px; }
  .preview-app-footer button { font-size: 9px; padding: 9px; }
}
/* Let the report and full week read as real dashboard sections. */
.preview-calendar .function-calendar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
@media (min-width:768px) {
  .presentation .workspace-preview .preview-main { padding: 16px 24px; }
  .preview-welcome { margin-bottom: 16px; }
  .preview-overview { padding: 14px 18px; margin-bottom: 12px; }
  .preview-overview h4 { font-size: 11px; margin-bottom: 8px; }
  .preview-overview .function-kpis strong { font-size: 26px; }
  .preview-overview .function-kpis small { font-size: 9px; margin-top: 3px; }
  .preview-dashboard-grid { gap: 12px 16px; }
  .preview-dashboard-grid .preview-card { padding: 14px 18px; }
  .preview-card h4 { margin-bottom: 10px; }
  .preview-channels .function-bars { height: 92px; }
  .preview-calendar .calendar-event { min-height: 70px; }
  .preview-calendar .calendar-date { margin-bottom: 6px; }
  .preview-weekly .report-preview { display: none; }
}

.preview-weekly .function-report { display: block; }
.preview-weekly .report-document-metrics { display: flex; gap: 18px; align-items: center; padding-right: 0; }
.preview-weekly .report-document-metrics>span { display: flex; flex-direction: column; gap: 3px; }
.preview-weekly .report-document-metrics strong { font-size: 18px; }
.preview-weekly .report-document-metrics>span>span { font-size: 8px; }
.preview-weekly .report-document-metrics .report-trend { margin-left: auto; margin-right: 0; font-size: 10px; }
.preview-weekly .function-report .report-document-chart { width: 100%; height: 48px; margin-top: 8px; }
.preview-weekly .function-report>.report-sample { display: none; }
.preview-calendar .calendar-day { display: block; }
.preview-calendar .calendar-event { min-width: 0; overflow-wrap: anywhere; }

/* Show the ongoing exchange with the coder while Builder Kit is active. */
.pipeline-kit { position: relative; }
.pipeline-kit>div { flex: 1; min-width: 0; }
.kit-working,.kit-exchange { display: none; }
.kit-thinking { display: flex; align-items: center; gap: 5px; color: #1737C8; font-size: 8px; }
.kit-thinking .thinking-dots { gap: 3px; }
.kit-thinking .thinking-dots i { width: 3px; height: 3px; background: #1737C8; }
.creator-scene[data-creator-state="thinking"] .kit-idle,
.creator-scene[data-creator-phase="1"]:not([data-coder-progress="6"]) .kit-idle { display: none; }
.creator-scene[data-creator-state="thinking"] .kit-working,
.creator-scene[data-creator-phase="1"]:not([data-coder-progress="6"]) .kit-working { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.creator-scene[data-creator-state="thinking"] .pipeline-kit,
.creator-scene[data-creator-phase="1"]:not([data-coder-progress="6"]) .pipeline-kit { opacity: 1; border-color: rgba(23,55,200,.35); }
.kit-exchange { position: absolute; left: -27px; top: 50%; width: 26px; height: 14px; border-top: 1px solid rgba(23,55,200,.16); border-bottom: 1px solid rgba(23,55,200,.1); }
.kit-exchange i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #1737C8; top: -2px; left: 0; animation: kit-context-exchange 1500ms ease-in-out infinite; }
.kit-exchange i:last-child { top: auto; bottom: -2px; background: #018FFF; animation-direction: reverse; animation-delay: 400ms; }
.creator-scene[data-creator-state="thinking"] .kit-exchange,
.creator-scene[data-creator-phase="1"]:not([data-coder-progress="6"]) .kit-exchange { display: block; }
@keyframes kit-context-exchange { 0% { transform: translateX(0); opacity: 0; } 20%,80% { opacity: 1; } 100% { transform: translateX(24px); opacity: 0; } }
@media (max-width:767px) { .kit-exchange { visibility: hidden; } }
@media (prefers-reduced-motion:reduce) {
  .pipeline-kit>.pipeline-icon,.kit-exchange i { animation: none !important; }
}

/* Make the collaboration visible across the gap, with activity on the icon. */
@media (min-width:768px) {
  .creator-layout { column-gap: 54px; }
  .kit-exchange { left: -55px; width: 54px; height: 22px; top: 45%; border-top-width: 1.5px; border-bottom-width: 1.5px; border-color: rgba(23,55,200,.3); }
  .kit-exchange i { width: 5px; height: 5px; top: -3px; }
  .kit-exchange i:last-child { bottom: -3px; }
}
.kit-thinking { display: none; }
.pipeline-kit>.pipeline-icon { position: relative; }
.pipeline-kit>.pipeline-icon::after { content: ""; position: absolute; inset: -4px; border: 2px solid rgba(23,55,200,.1); border-top-color: #1737C8; border-right-color: #018FFF; border-radius: 50%; opacity: 0; }
.creator-scene[data-creator-state="thinking"] .pipeline-kit>.pipeline-icon::after,
.creator-scene[data-creator-phase="1"]:not([data-coder-progress="6"]) .pipeline-kit>.pipeline-icon::after { opacity: 1; animation: kit-icon-spin 1500ms linear infinite; }
@keyframes kit-icon-spin { to { transform: rotate(360deg); } }
@keyframes kit-context-exchange { 0% { transform: translateX(0); opacity: 0; } 20%,80% { opacity: 1; } 100% { transform: translateX(48px); opacity: 0; } }
@media (prefers-reduced-motion:reduce) { .pipeline-kit>.pipeline-icon::after { animation: none !important; } }

/* Preview is the next action; give the chat more of the stage. */
.presentation .creator-scene { grid-template-rows: auto auto; }
.coder-window { height: 520px; }
.coder-toolbar #replayCreator { flex-shrink: 0; border: 0; padding: 0; background: transparent; color: #8F9EBE; font-size: 9px; cursor: pointer; }
.coder-preview-url { gap: 12px; flex-wrap: wrap; text-decoration: none; }
.preview-link-address { font-size: 10px; color: #8396BD; }
.preview-link-action { display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; border-radius: 7px; background: #E8F0FF; color: #1737C8; font-size: 11px; font-weight: 600; }
.creator-scene[data-creator-phase="1"][data-coder-progress="6"]:not(.preview-seen) .preview-link-action { animation: preview-invite 1800ms ease-in-out infinite; }
@keyframes preview-invite { 50% { background: #FFFFFF; box-shadow: 0 0 0 4px rgba(119,173,255,.14); transform: translateY(-1px); } }
@media (max-width:767px) {
  .coder-window { height: 590px; }
  .preview-link-action { font-size: 10px; padding: 7px 9px; }
  .preview-link-address { font-size: 9px; }
}
@media (prefers-reduced-motion:reduce) { .preview-link-action { animation: none !important; } }
.creator-scene[data-coder-progress="6"] .coder-preview-ready p { display: block; }

/* Mark checks only after their completed text, and the kit when preview is ready. */
.coder-complete-mark { display: none; color: #69CFB0; margin-right: 6px; }
.creator-scene[data-social-done="true"] .coder-check-social .coder-complete-mark,
.creator-scene[data-calendar-done="true"] .coder-check-calendar .coder-complete-mark,
.creator-scene[data-coder-progress="6"] .coder-start-coding .coder-complete-mark { display: inline; }
.kit-complete-mark { display: none; position: absolute; bottom: -4px; right: -5px; width: 17px; height: 17px; align-items: center; justify-content: center; border: 2px solid white; border-radius: 50%; background: #DDF5ED; color: #248C70; font-size: 10px; font-weight: 700; }
.kit-completed { display: none; color: #248C70; }
.creator-scene[data-coder-progress="6"] .kit-idle { display: none; }
.creator-scene[data-coder-progress="6"] .kit-completed { display: inline; }
.creator-scene[data-coder-progress="6"] .kit-complete-mark { display: flex; }

/* Preview is a distinct step, followed by her submit command and AEGIS checks. */
.coder-preview-url { gap: 6px; text-decoration: underline; text-underline-offset: 4px; }
.preview-link-address { color: #83C7FF; font-size: 12px; }
.preview-tutorial { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 10px; line-height: 1.5; color: #8F9EBE; }
.preview-tutorial::before { content: "↑"; color: #A9C7FF; font-size: 14px; }
.creator-scene[data-creator-phase="1"][data-coder-progress="6"] .preview-tutorial::before { animation: preview-tip 1600ms ease-in-out infinite; }
@keyframes preview-tip { 50% { transform: translateY(-3px); } }
.workspace-preview::backdrop { background: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.coder-submit-request,.coder-submission-response { display: none; }
.creator-scene:is([data-creator-phase="3"],[data-creator-phase="4"],[data-creator-phase="5"]) .coder-request-copy,
.creator-scene:is([data-creator-phase="3"],[data-creator-phase="4"],[data-creator-phase="5"]) .coder-response { display: none; }
.creator-scene:is([data-creator-phase="3"],[data-creator-phase="4"],[data-creator-phase="5"]) .coder-submit-request { display: block; }
.ready .submit-char:not(.typed) { display: none; }
.submit-caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: #48DAFF; animation: creator-caret 900ms steps(1) infinite; }
.creator-scene:not([data-creator-phase="3"]) .submit-caret { display: none; }
.coder-submission-response { width: 91%; margin: 14px auto 0 0; padding: 12px; border: 1px solid rgba(116,145,211,.14); border-radius: 14px 14px 14px 3px; background: #151F3B; }
.coder-submission-response p { color: #B4C2DF; font-size: 12px; line-height: 1.65; margin: 12px 0 0; }
.creator-scene:is([data-creator-phase="4"],[data-creator-phase="5"]) .coder-submission-response { display: block; }
.submission-scanning { display: flex; align-items: center; gap: 9px; color: #8F9EBE; font-size: 11px; margin-top: 14px; }
.coder-submission-response .submission-released { display: none; color: #69CFB0; }
.creator-scene[data-creator-phase="5"] .submission-scanning { display: none; }
.creator-scene[data-creator-phase="5"] .submission-released { display: block; }
.pipeline-govern { position: relative; }
.pipeline-govern>div { flex: 1; min-width: 0; }
.pipeline-govern>.pipeline-icon { position: relative; }
.pipeline-govern>.pipeline-icon::after { content: ""; position: absolute; inset: -4px; border: 2px solid rgba(23,55,200,.1); border-top-color: #1737C8; border-right-color: #018FFF; border-radius: 50%; opacity: 0; }
.creator-scene[data-creator-phase="4"] .pipeline-govern>.pipeline-icon::after { opacity: 1; animation: kit-icon-spin 1500ms linear infinite; }
.govern-status { font-size: 10px; margin: 6px 0 8px; }
.govern-working,.govern-completed,.govern-complete-mark { display: none; }
.creator-scene[data-creator-phase="4"] .govern-idle,.creator-scene[data-creator-phase="5"] .govern-idle { display: none; }
.creator-scene[data-creator-phase="4"] .govern-working { display: inline; color: #1737C8; }
.creator-scene[data-creator-phase="5"] .govern-completed { display: inline; color: #248C70; }
.govern-complete-mark { position: absolute; bottom: -4px; right: -5px; width: 17px; height: 17px; align-items: center; justify-content: center; border: 2px solid white; border-radius: 50%; background: #DDF5ED; color: #248C70; font-size: 10px; font-weight: 700; }
.creator-scene[data-creator-phase="5"] .govern-complete-mark { display: flex; }
.creator-scene .pipeline-checks .check-mark { opacity: 0; }
.creator-scene:is([data-scan-progress="1"],[data-scan-progress="2"],[data-scan-progress="3"]) .pipeline-checks li:nth-child(1) .check-mark,
.creator-scene:is([data-scan-progress="2"],[data-scan-progress="3"]) .pipeline-checks li:nth-child(2) .check-mark,
.creator-scene[data-scan-progress="3"] .pipeline-checks li:nth-child(3) .check-mark { opacity: 1; }
.govern-exchange { display: none; position: absolute; left: -55px; top: 45%; width: 54px; height: 22px; border-top: 1.5px solid rgba(23,55,200,.3); border-bottom: 1.5px solid rgba(23,55,200,.3); }
.govern-exchange i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #1737C8; top: -3px; left: 0; animation: kit-context-exchange 1500ms ease-in-out infinite; }
.govern-exchange i:last-child { top: auto; bottom: -3px; background: #018FFF; animation-direction: reverse; animation-delay: 400ms; }
.creator-scene[data-creator-phase="4"] .govern-exchange { display: block; }
@media (max-width:767px) { .govern-exchange { display: none !important; } .coder-submission-response { width: 96%; } }
@media (prefers-reduced-motion:reduce) { .preview-tutorial::before,.submit-caret,.pipeline-govern>.pipeline-icon::after,.govern-exchange i { animation: none !important; } }

/* Point to the preview link from the right without turning it into a button. */
.coder-preview-ready { display: none; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.creator-scene[data-coder-progress="6"] .coder-preview-ready { display: flex; }
.creator-scene[data-coder-progress="6"] .coder-preview-ready p { flex-basis: 100%; margin-bottom: 0; }
.preview-tutorial { margin-top: 0; color: #C5D6F7; font-size: 10px; font-weight: 500; }
.preview-tutorial::before { content: "←"; font-size: 17px; color: #83C7FF; }
@keyframes preview-tip { 50% { transform: translateX(-4px); } }
.coder-preview-url { color: #9AD4FF; text-decoration-thickness: 1px; }
.preview-link-address { color: inherit; }
@media (max-width:767px) { .coder-preview-ready { gap: 7px; } .preview-tutorial { font-size: 9px; } }

/* Make the next action unmistakable while keeping the URL as a link. */
.coder-preview-ready { gap: 10px 16px; }
.preview-tutorial { font-size: 16px; font-weight: 600; color: #F4F8FF; }
.preview-tutorial::before { font-size: 26px; line-height: 1; color: #83C7FF; }
.preview-link-address { font-size: 13px; }
@media (max-width:767px) {
  .preview-tutorial { font-size: 14px; }
  .preview-tutorial::before { font-size: 23px; }
  .preview-link-address { font-size: 12px; }
}
#previewWorkspaceTitle:focus { outline: none; }

/* Keep conversation text at one readable size across the coder window. */
.coder-content { --coder-chat-size: 14px; }
.coder-prompt,
.coder-progress-chat p,
.coder-thinking,
.coder-working,
.coder-preview-ready p,
.coder-preview-url,
.preview-link-address,
.coder-submission-response p,
.submission-scanning { font-size: var(--coder-chat-size); line-height: 1.65; }
@media (max-width:767px) { .coder-content { --coder-chat-size: 13px; } }
@media (max-width:767px) { .coder-window { height: 660px; } }

/* The instruction itself is the link; the URL is secondary context beneath it. */
.coder-preview-ready { gap: 8px; }
.coder-preview-url { font-size: 18px; font-weight: 600; line-height: 1.4; color: #9AD4FF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.coder-preview-url:hover { color: #D0ECFF; }
.coder-preview-ready>.preview-link-address { flex-basis: 100%; font-size: 11px; line-height: 1.5; color: #8F9EBE; }

/* A bordered tutorial callout points to the original preview URL. */
.coder-preview-ready { gap: 10px 16px; }
.coder-preview-url { font-size: 14px; font-weight: 400; line-height: 1.65; }
.coder-preview-url .preview-link-address { font-size: inherit; color: inherit; }
.preview-tutorial { position: relative; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid rgba(154,212,255,.6); border-radius: 9px; background: rgba(83,134,209,.1); color: #F4F8FF; font-size: 16px; font-weight: 600; line-height: 1.4; }
.preview-tutorial::before { content: "←"; font-size: 22px; line-height: 1; color: #9AD4FF; }
@media (max-width:767px) {
  .coder-preview-url { font-size: 13px; }
  .preview-tutorial { font-size: 14px; padding: 8px 11px; }
}

/* A clean white Builder Kit card uses depth rather than a border. */
.creator-scene .pipeline-kit { border: 0; background: #FFFFFF; box-shadow: 0 8px 26px rgba(5,8,46,.065); }
.creator-scene:not([data-creator-phase="0"]) .pipeline-kit,
.creator-scene[data-creator-state="thinking"] .pipeline-kit,
.creator-scene[data-creator-phase="1"]:not([data-coder-progress="6"]) .pipeline-kit { border: 0; box-shadow: 0 8px 26px rgba(5,8,46,.065); }

/* Place the tutorial before the link and point toward it. */
.coder-preview-ready p { order: 0; }
.preview-tutorial { order: 1; }
.coder-preview-url { order: 2; }
.preview-tutorial::before { content: none; }
.preview-tutorial::after { content: "→"; color: #9AD4FF; font-size: 22px; line-height: 1; }
.creator-scene[data-creator-phase="1"][data-coder-progress="6"] .preview-tutorial::after { animation: preview-point-right 1600ms ease-in-out infinite; }
@keyframes preview-point-right { 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion:reduce) { .preview-tutorial::after { animation: none; } }

/* Float the review tutorial across the coder's left edge. */
.creator-scene[data-creator-phase="1"][data-coder-progress="6"] .coder-window { overflow: visible; }
.creator-scene[data-creator-phase="1"][data-coder-progress="6"] .coder-toolbar { border-radius: 18px 18px 0 0; }
.coder-preview-ready { position: relative; }
.preview-tutorial { z-index: 5; background: #203257; border-color: rgba(154,212,255,.75); box-shadow: 0 10px 30px rgba(5,8,30,.24); }
@media (min-width:768px) {
  .preview-tutorial { position: absolute; left: -76px; bottom: -6px; }
  .coder-preview-url { margin-left: 120px; }
}
@media (max-width:767px) {
  .preview-tutorial { position: relative; margin-left: -34px; }
}

/* The tutorial belongs to the presentation, not to the coder's conversation. */
.coder-preview-url { margin-left: 0; }
.creator-scene>.preview-tutorial { display: none; position: absolute; bottom: auto; right: auto; height: auto; margin: 0; width: max-content; padding: 12px 16px; flex-direction: row; gap: 5px; font-size: 20px; white-space: nowrap; text-align: center; pointer-events: none; background: #FFF1CF; color: #644819; border-color: #E7C47A; box-shadow: 0 8px 24px rgba(100,72,25,.14); }
.creator-scene[data-creator-phase="1"][data-coder-progress="6"]>.preview-tutorial { display: flex; }
.creator-scene>.preview-tutorial::after { content: ""; position: absolute; right: -15px; top: calc(50% - 4px); width: 22px; height: 8px; padding: 0; background: #AC7B25; clip-path: polygon(0 42%, 72% 42%, 72% 0, 100% 50%, 72% 100%, 72% 58%, 0 58%); }
.creator-scene>.preview-tutorial.tutorial-below::after { right: auto; left: 18px; top: -15px; transform: rotate(-90deg); transform-origin: center; animation: none; }
@media (max-width:767px) {
  .creator-scene>.preview-tutorial { width: max-content; max-width: none; flex-direction: row; padding: 10px 14px; font-size: 18px; }
  .creator-scene>.preview-tutorial::after { right: auto; left: 18px; top: -15px; transform: rotate(-90deg); transform-origin: center; animation: none; }
}

/* Present the review hint gently, with a persistent journey bar in the app preview. */
.creator-scene[data-creator-phase="1"][data-coder-progress="6"]>.preview-tutorial { animation: review-hint-enter 420ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes review-hint-enter { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.preview-app-footer { position: relative; min-height: 64px; padding: 12px 24px; background: #F8FAFF; border-top: 1px solid #DDE4F2; }
.preview-app-footer::before { content: ""; position: absolute; top: -1px; left: 0; width: 50%; height: 3px; background: linear-gradient(90deg,#1737C8,#008FFF); }
.preview-step-context { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #536083; }
.preview-step-context>b { color: #05082E; white-space: nowrap; padding-right: 14px; border-right: 1px solid #D8DFED; }
.preview-app-footer button { font-size: 14px; min-height: 40px; padding: 10px 22px; border-radius: 100px; white-space: nowrap; }
@media (max-width:767px) {
  .preview-app-footer { min-height: 64px; padding: 10px 12px; }
  .preview-step-context { flex-direction: column; align-items: flex-start; gap: 3px; font-size: 11px; }
  .preview-step-context>b { border: 0; padding: 0; font-size: 13px; }
  .preview-app-footer button { font-size: 13px; padding: 10px 18px; }
}
@media (prefers-reduced-motion:reduce) { .creator-scene>.preview-tutorial { animation: none !important; } }
.preview-app-footer #previewBack { background: transparent; color: #05082E; padding-left: 0; }
.preview-app-footer .preview-step-context { margin: 0 auto; }
@media (max-width:767px) { .preview-app-footer .preview-step-context { text-align: center; align-items: center; } .preview-step-context>span { display: none; } }

/* Open the app as a gentle window transition rather than an abrupt overlay. */
.workspace-preview[open] { animation: preview-window-enter 350ms cubic-bezier(.2,.8,.2,1) both; }
.workspace-preview[open]::backdrop { animation: preview-backdrop-enter 250ms ease-out both; }
.workspace-preview[open] .preview-app-footer { animation: preview-footer-enter 250ms ease-out 100ms both; }
.workspace-preview[open].preview-closing { animation: preview-window-exit 180ms ease-in both; pointer-events: none; }
.workspace-preview[open].preview-closing::backdrop { animation: preview-backdrop-exit 180ms ease-in both; }
@keyframes preview-window-enter { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes preview-window-exit { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(0) scale(1); } }
@keyframes preview-backdrop-enter { from { background: transparent; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } to { background: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } }
@keyframes preview-backdrop-exit { from { background: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } to { background: transparent; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
@keyframes preview-footer-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion:reduce) {
  .workspace-preview[open],.workspace-preview[open]::backdrop,.workspace-preview[open] .preview-app-footer { animation: none !important; }
}

/* Familiar macOS traffic lights in the preview window chrome. */
.preview-browser-dots { display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0; flex-shrink: 0; }
.preview-browser-dots i { display: block; width: 13px; height: 13px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.preview-browser-dots i:nth-child(2) { background: #FEBC2E; }
.preview-browser-dots i:nth-child(3) { background: #28C840; }

/* Submission continues the same scrollable conversation. */
.coder-chat { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #354363 transparent; padding-bottom: 12px; }
.creator-scene:is([data-creator-phase="3"],[data-creator-phase="4"],[data-creator-phase="5"]) .coder-request-copy { display: block; }
.creator-scene:is([data-creator-phase="3"],[data-creator-phase="4"],[data-creator-phase="5"]) .coder-response { display: block; }
.coder-chat>.coder-submit-request { width: 87%; margin: 20px 0 0 auto; }
.coder-submission-response { flex-shrink: 0; }
@media (max-width:767px) { .coder-chat>.coder-submit-request { width: 94%; } }
.staff-transition-avatar { display: block; margin: 0; border-radius: 50%; background: #E4EDFF; transform-origin: center; box-shadow: 0 0 0 3px rgba(255,255,255,.75),0 6px 18px rgba(23,55,200,.12); }

/* Keep chat scrolling without a visible scrollbar covering the conversation. */
.coder-chat { scrollbar-width: none; }
.coder-chat::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Keep the build, scan and store details readable during a pitch. */
.pipeline-kicker { font-size: 10px; color: #64738F; }
.pipeline-card p,.govern-status { font-size: 13px; line-height: 1.5; color: #536083; }
.pipeline-checks { gap: 7px; }
.pipeline-checks li { font-size: 13px; line-height: 1.45; color: #536083; }
.pipeline-tags>span { font-size: 10px; padding: 4px 6px; }
.pipeline-store-app b { font-size: 12px; }
.pipeline-store-app div>span { font-size: 10px; line-height: 1.4; color: #64738F; }

/* Center the staff identity within the footer, not just against its top padding. */
.coder-footer { align-items: center; padding: 10px 0; }
.coder-status-copy { display: flex; align-items: center; min-height: 38px; }
.coder-staff-label { margin: 0; line-height: 1.4; }

/* A blue completion card marks the app's arrival in the company store. */
.creator-scene[data-creator-phase="5"] .pipeline-store { position: relative; isolation: isolate; background: var(--aegis-heading-gradient); border-color: transparent; color: #F4F8FF; box-shadow: 0 8px 28px rgba(23,55,200,.2); }
.creator-scene[data-creator-phase="5"] .pipeline-store::before { content: ""; position: absolute; inset: -2px; border-radius: 15px; padding: 2px; background: conic-gradient(from var(--store-edge-angle),rgba(142,216,255,.25) 0deg,rgba(142,216,255,.25) 250deg,#9FE5FF 290deg,#FFFFFF 310deg,rgba(142,216,255,.25) 340deg); mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; pointer-events: none; animation: store-edge-shine 3200ms linear infinite; }
@property --store-edge-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes store-edge-shine { to { --store-edge-angle: 360deg; } }
.creator-scene[data-creator-phase="5"] .pipeline-store .pipeline-kicker,
.creator-scene[data-creator-phase="5"] .pipeline-store p,
.creator-scene[data-creator-phase="5"] .pipeline-store-app div>span { color: #D9E6FF; }
.creator-scene[data-creator-phase="5"] .pipeline-store .pipeline-icon { background: rgba(255,255,255,.14); color: #D9F2FF; }
.creator-scene[data-creator-phase="5"] .pipeline-store-app { background: rgba(255,255,255,.12); }
.creator-scene[data-creator-phase="5"] .pipeline-store-app>svg,
.creator-scene[data-creator-phase="5"] .store-ready { color: #A8EFFF; }
@media (prefers-reduced-motion:reduce) { .creator-scene[data-creator-phase="5"] .pipeline-store::before { animation: none; } }

/* The moving blue border follows whichever service is currently working. */
.creator-scene[data-creator-state="thinking"] .pipeline-kit,
.creator-scene[data-creator-phase="1"]:not([data-coder-progress="6"]) .pipeline-kit,
.creator-scene[data-creator-phase="4"] .pipeline-govern { position: relative; isolation: isolate; }
.creator-scene[data-creator-state="thinking"] .pipeline-kit::before,
.creator-scene[data-creator-phase="1"]:not([data-coder-progress="6"]) .pipeline-kit::before,
.creator-scene[data-creator-phase="4"] .pipeline-govern::before { content: ""; position: absolute; inset: -2px; border-radius: 15px; padding: 2px; background: conic-gradient(from var(--store-edge-angle),rgba(23,55,200,.08) 0deg,rgba(23,55,200,.08) 245deg,#008FFF 285deg,#1737C8 315deg,rgba(23,55,200,.08) 345deg); mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; pointer-events: none; animation: store-edge-shine 2400ms linear infinite; }
@media (prefers-reduced-motion:reduce) {
  .creator-scene .pipeline-kit::before,.creator-scene .pipeline-govern::before { animation: none !important; }
}

/* Keep scan feedback aligned with the faster check sequence. */
.creator-scene[data-creator-phase="4"] .pipeline-checks li { animation-duration: 250ms; }
.creator-scene[data-creator-phase="4"] .pipeline-checks li:nth-child(2) { animation-delay: 180ms; }
.creator-scene[data-creator-phase="4"] .pipeline-checks li:nth-child(3) { animation-delay: 360ms; }

/* Give each service card more breathing room inside its frame. */
.pipeline-card { padding: 24px; gap: 16px; }
.pipeline-card h3 { margin: 5px 0 8px; }
.pipeline-tags { margin-top: 12px; gap: 6px; }
.pipeline-checks { margin-top: 12px; gap: 9px; }
@media (max-width:767px) { .pipeline-card { padding: 22px; gap: 14px; } }

/* Lift the process stack gently as each service completes. */
.creator-pipeline { transform: translateY(0); transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.creator-scene[data-creator-phase="1"][data-coder-progress="6"] .creator-pipeline,
.creator-scene:is([data-creator-phase="2"],[data-creator-phase="3"],[data-creator-phase="4"]) .creator-pipeline { transform: translateY(-10px); }
.creator-scene[data-creator-phase="5"] .creator-pipeline { transform: translateY(-24px); }
@media (prefers-reduced-motion:reduce) { .creator-pipeline { transition: none; } }

/* Reveal only the current process, growing the stack from the coder's center. */
.creator-scene .creator-pipeline { justify-content: center; transform: none !important; transition: none; }
.creator-scene .pipeline-govern,.creator-scene .pipeline-store,.creator-scene .pipeline-link { display: none; }
.creator-scene:is([data-creator-phase="4"],[data-creator-phase="5"]) .pipeline-govern { display: flex; }
.creator-scene:is([data-creator-phase="4"],[data-creator-phase="5"]) .pipeline-kit+.pipeline-link { display: block; }
.creator-scene[data-creator-phase="5"] .pipeline-store { display: flex; }
.creator-scene[data-creator-phase="5"] .pipeline-govern+.pipeline-link { display: block; }
.creator-scene .pipeline-card { transform-origin: center; }
@media (max-width:767px) { .creator-scene .creator-pipeline { padding-top: 0; } }
.creator-scene .creator-pipeline { padding-top: 0; }

/* Center the active scan card against the coder while completed build sits above. */
.creator-scene .creator-pipeline { transform: translateY(var(--process-offset,0px)) !important; }

/* Growing service cards never change the coder frame's position. */
@media (min-width:768px) {
  .creator-layout { height: 520px; align-items: start; }
  .creator-pipeline { height: 520px; }
  .creator-pipeline>.pipeline-card,.creator-pipeline>.pipeline-link { flex-shrink: 0; }
}

/* A completion tick and quiet heartbeat signal that the app is now live. */
.pipeline-store>.pipeline-icon { position: relative; }
.store-complete-mark { display: none; position: absolute; right: -6px; bottom: -5px; width: 19px; height: 19px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #1737C8; background: #B9F5D9; color: #16694A; font-size: 12px; font-weight: 700; }
.store-live-status { display: none; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; font-weight: 500; color: #DCF8E9; }
.store-live-status i { position: relative; display: block; width: 7px; height: 7px; border-radius: 50%; background: #A6F2C9; flex-shrink: 0; }
.store-live-status i::after { content: ""; position: absolute; inset: -3px; border: 1px solid #A6F2C9; border-radius: 50%; animation: store-live-pulse 2200ms ease-out infinite; }
.creator-scene[data-creator-phase="5"] .store-complete-mark,.creator-scene[data-creator-phase="5"] .store-live-status { display: flex; }
@keyframes store-live-pulse { 0% { transform: scale(.65); opacity: .65; } 75%,100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion:reduce) { .store-live-status i::after { animation: none; opacity: .35; } }

/* Keep live status as a small corner indicator. */
.pipeline-store .store-live-status { position: absolute; top: 14px; right: 16px; margin: 0; gap: 7px; font-size: 11px; line-height: 1; }

/* Soft ripples radiate from the published store card. */
.creator-scene[data-creator-phase="5"] .pipeline-store::before,
.creator-scene[data-creator-phase="5"] .pipeline-store::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1.5px solid rgba(1,143,255,.45); border-radius: 13px; padding: 0; background: none; mask: none; -webkit-mask: none; pointer-events: none; animation: store-card-ripple 2800ms ease-out infinite; }
.creator-scene[data-creator-phase="5"] .pipeline-store::after { animation-delay: 1400ms; }
@keyframes store-card-ripple { 0% { transform: scale(1); opacity: .65; } 80%,100% { transform: scale(1.08,1.25); opacity: 0; } }
@media (prefers-reduced-motion:reduce) {
  .creator-scene[data-creator-phase="5"] .pipeline-store::before,.creator-scene[data-creator-phase="5"] .pipeline-store::after { animation: none; opacity: 0; }
}
.creator-scene .pipeline-store { border: 0; }

/* A brief demonstration click connects the preview instruction to the actual URL. */
.preview-demo-cursor { position: fixed; z-index: 120; pointer-events: none; width: 28px; height: 34px; transform-origin: 3px 2px; filter: drop-shadow(0 2px 3px rgba(5,8,46,.22)); }
.preview-demo-cursor[hidden] { display: none; }
.preview-demo-cursor svg { width: 100%; height: 100%; }

/* Keep the instruction to the right of the preview URL. */
.creator-scene>.preview-tutorial:not(.tutorial-below)::after { right: auto; left: -15px; transform: rotate(180deg); animation: none; }

/* A nearby hand tap creates a brief click ripple on the URL. */
.preview-demo-cursor { width: 32px; height: 38px; margin-left: -15px; margin-top: -3px; transform-origin: 15px 3px; }
.preview-demo-cursor::before { content: ""; position: absolute; left: 7px; top: -5px; width: 16px; height: 16px; border: 2px solid #83C7FF; border-radius: 50%; opacity: 0; animation: preview-click-ripple 230ms ease-out 370ms both; }
@keyframes preview-click-ripple { from { opacity: .8; transform: scale(.35); } to { opacity: 0; transform: scale(2.8); } }

/* Lower the instruction clear of the ready message; point back up to the URL. */
.creator-scene>.preview-tutorial:not(.tutorial-below)::after { top: 6px; left: -17px; right: auto; transform: rotate(215deg); transform-origin: center; animation: none !important; }

/* A speech-bubble tail connects the instruction to the URL without another arrow. */
.creator-scene>.preview-tutorial:not(.tutorial-below)::after { content: ""; left: -9px; right: auto; top: 9px; width: 16px; height: 14px; padding: 0; background: #FFF1CF; clip-path: polygon(100% 0,0 20%,100% 100%); transform: none; animation: none !important; }
.creator-scene>.preview-tutorial.tutorial-below::after { content: ""; left: 18px; right: auto; top: -10px; width: 16px; height: 12px; padding: 0; background: #FFF1CF; clip-path: polygon(0 100%,30% 0,100% 100%); transform: none; animation: none !important; }

/* Match the demonstration hand to a normal desktop cursor size. */
.preview-demo-cursor { width: 22px; height: 26px; margin-left: -10px; margin-top: -2px; transform-origin: 10px 2px; }
.preview-demo-cursor::before { left: 4px; top: -4px; width: 12px; height: 12px; border-width: 1.5px; }

/* A quiet floating motion keeps the preview tutorial noticeable. */
.creator-scene[data-creator-phase="1"][data-coder-progress="6"]>.preview-tutorial { animation: tutorial-side-enter 500ms cubic-bezier(.2,.8,.2,1) 400ms both,preview-tutorial-float 2600ms ease-in-out 900ms infinite; }
@keyframes tutorial-side-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes preview-tutorial-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion:reduce) { .creator-scene>.preview-tutorial { animation: none !important; } }

/* Keep backward and forward controls together within easy reach. */
.presentation .bottom-nav { justify-content: flex-end; gap: 8px; }
.presentation .bottom-nav .nav-status { order: 0; margin-right: auto; }
.presentation .bottom-nav #previousScene { order: 1; }
.presentation .bottom-nav #nextScene { order: 2; }
.preview-app-footer { justify-content: flex-end; gap: 8px; }
.preview-app-footer .preview-step-context { order: 0; margin: 0 auto 0 0; }
.preview-app-footer #previewBack { order: 1; padding: 10px 16px; }
.preview-app-footer #previewContinue { order: 2; }
@media (max-width:767px) {
  .presentation .bottom-nav { gap: 4px; }
  .presentation .bottom-nav .nav-status { font-size: 10px; gap: 4px; }
  .presentation .bottom-nav .step-status { margin-left: 4px; padding-left: 6px; }
  .preview-app-footer #previewBack { padding: 10px 12px; }
  .preview-app-footer .preview-step-context { align-items: flex-start; }
}

/* Highlight navigation text in blue without a hover background. */
.presentation .bottom-nav>a:hover { background: transparent; color: #1737C8; }
.preview-app-footer #previewBack:hover { background: transparent; color: #1737C8; }
.preview-app-footer #previewContinue:hover { background: #05082E; color: #83C7FF; }
.preview-app-footer #previewContinue { background: transparent; color: #05082E; }
.preview-app-footer #previewContinue:hover { background: transparent; color: #1737C8; }

/* Use the headline gradient and stronger type for navigation hover. */
.presentation .bottom-nav>a:hover,
.preview-app-footer #previewBack:hover,
.preview-app-footer #previewContinue:hover { background: var(--aegis-heading-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 700; }
.presentation .bottom-nav>a,
.preview-app-footer #previewBack,
.preview-app-footer #previewContinue { font-weight: 700; }

/* A pale cyan hover stays clear against the video's dark backdrop. */
.presentation.video-focus .bottom-nav>a:hover { background: transparent; color: #83DFFF; -webkit-text-fill-color: #83DFFF; }

/* Soft asymmetric routes suggest scattered work without tangling at one point. */
.problem-scene[data-problem-stage=intro] .work-flow path { stroke-width: 1.25; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .22; }
.problem-scene[data-problem-stage=intro] .work-flow-2 path,
.problem-scene[data-problem-stage=intro] .work-flow-6 path { stroke: #7569B4; opacity: .24; }
.problem-scene[data-problem-stage=intro] .work-flow-3 path,
.problem-scene[data-problem-stage=intro] .work-flow-5 path { stroke: #658AB5; opacity: .28; }

/* Frame the marketing story as one example before its headline. */
.problem-opening { position: relative; }
.problem-example-label { position: absolute; top: -27px; left: 0; right: 0; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #64738F; text-align: center; }
@media (max-width:767px) { .problem-example-label { position: static; margin: 0 0 10px; font-size: 10px; } }

/* Make the example framing readable without competing with the main takeaway. */
.workload-note { font-size: 13px; line-height: 1.5; color: #64738F; margin-top: 10px; }
@media (max-width:767px) { .workload-note { font-size: 12px; } }

/* A small sweat drop conveys effort without an exaggerated stressed face. */
.problem-scene.active[data-problem-stage=intro] .staff-sweat { animation: staff-sweat-fall 3200ms ease-in-out infinite; }
@keyframes staff-sweat-fall { 0%,12% { opacity: 0; transform: translateY(-3px); } 28%,55% { opacity: 1; } 78%,100% { opacity: 0; transform: translateY(9px); } }
@media (prefers-reduced-motion:reduce) { .problem-scene .staff-sweat { animation: none !important; } }
.problem-scene.active[data-problem-stage=intro] .staff-sweat-secondary { animation-delay: -1100ms; animation-duration: 3600ms; }
.problem-scene.active[data-problem-stage=intro] .staff-sweat-forehead { animation-delay: -2200ms; animation-duration: 4000ms; }

/* Preview navigation uses the same screen position as the journey navigation. */
.workspace-preview { overflow: visible; }
.preview-browser { border-radius: 20px 20px 0 0; }
.preview-app-body { overflow: hidden; border-radius: 0 0 20px 20px; }
.workspace-preview .preview-app-footer { position: absolute; left: var(--preview-nav-left,0px); top: var(--preview-nav-top,100%); width: 100vw; height: var(--preview-nav-height,48px); min-height: 0; padding: 4px 5%; border-radius: 0; background: #F8FAFF; }
.workspace-preview .preview-app-footer #previewBack,.workspace-preview .preview-app-footer #previewContinue { padding: 8px 15px; font-size: 13px; min-height: 40px; }
@media (max-width:767px) {
  .preview-browser { border-radius: 14px 14px 0 0; }
  .workspace-preview .preview-app-footer { padding: 4px 8px; gap: 4px; }
  .workspace-preview .preview-app-footer #previewBack,.workspace-preview .preview-app-footer #previewContinue { padding: 4px 9px; }
}
.workspace-preview .preview-app-footer { box-sizing: border-box; padding-left: var(--preview-nav-padding,5%); padding-right: var(--preview-nav-padding,5%); border-top: 0; }

/* Chapters 4–7: explain the employee platform around the AI coder. */
.presentation .aegis-explain { padding: 40px 70px; }
.presentation .explain-overview,.presentation .explain-closing { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 24px; align-content: center; }
.explain-heading .eyebrow { margin-bottom: 14px; }
.presentation .explain-heading h2 { font-size: 40px; margin: 0 0 14px; line-height: 1.18; }
.presentation[data-lang=th] .explain-heading h2 { font-size: 34px; }
.explain-intro { font-size: 16px; line-height: 1.6; color: #536083; margin: 0; max-width: 940px; }
.explain-system { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; }
.explain-start { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; }
.explain-start>div { width: 100%; padding: 18px; border: 1px solid #D8E1F3; border-radius: 14px; background: rgba(255,255,255,.65); }
.explain-start small { display: block; font-size: 9px; letter-spacing: .7px; color: #64738F; margin-bottom: 7px; }
.explain-start b { font-size: 18px; font-weight: 600; }
.explain-start>span { margin-left: 18px; transform: rotate(90deg); color: #7186B1; }
.explain-start p { margin: 2px 0 0 18px; font-size: 13px; line-height: 1.6; color: #64738F; }
.explain-platform { border-radius: 20px; padding: 22px; background: rgba(222,232,255,.58); border: 1px solid rgba(23,55,200,.12); }
.explain-platform-label { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.explain-platform-label img { width: 95px; height: auto; }
.explain-platform-label>span { font-size: 12px; color: #536083; }
.explain-pillars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.explain-pillars article { padding: 18px 16px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 5px 18px rgba(23,55,200,.035); }
.explain-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #EAF0FF; color: #1737C8; }
.explain-icon svg { width: 27px; height: 27px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.explain-pillars small { display: block; font-size: 9px; letter-spacing: 1px; color: #64738F; margin: 14px 0 7px; }
.explain-pillars h3 { font-size: 18px; line-height: 1.25; margin: 0 0 10px; min-height: 45px; }
.explain-pillars p { font-size: 13px; line-height: 1.65; color: #536083; margin: 0 0 16px; min-height: 108px; }
.explain-pillars b { display: block; font-size: 12px; color: #1737C8; font-weight: 600; }
.explain-takeaway { margin: 0; font-size: 18px; font-weight: 500; color: #05082E; text-align: center; }
.presentation .explain-builder,.presentation .explain-release { grid-template-columns: 370px minmax(0,1fr); gap: 38px; }
.explain-person-note { margin-top: 28px; border-left: 3px solid #B5C7F1; padding-left: 16px; font-size: 14px; line-height: 1.8; color: #64738F; }
.builder-context-window { border-radius: 20px; background: #FFFFFF; box-shadow: 0 10px 38px rgba(23,55,200,.08); overflow: hidden; }
.builder-context-top { display: flex; align-items: center; gap: 12px; padding: 22px; border-bottom: 1px solid #E3E9F5; }
.builder-context-top small { display: block; font-size: 9px; color: #64738F; letter-spacing: 1px; }
.builder-context-top b { font-size: 18px; }
.context-configured { font-size: 10px; color: #536083; margin-left: auto; background: #F0F4FC; padding: 5px 9px; border-radius: 100px; }
.builder-context-tabs { display: flex; padding: 16px 22px 0; gap: 6px; }
.builder-context-tabs button { flex: 1; padding: 9px 10px; font-size: 11px; border: 0; border-radius: 100px; background: #F1F4FB; color: #64738F; }
.builder-context-tabs button[aria-selected=true] { background: #1737C8; color: #F4F8FF; }
.builder-context-detail { padding: 26px; min-height: 365px; }
.builder-context-detail h3 { font-size: 24px; line-height: 1.3; margin: 0 0 12px; }
.builder-context-detail>p { font-size: 15px; line-height: 1.7; color: #536083; margin: 0 0 22px; }
.context-checklist { display: grid; gap: 10px; }
.context-checklist>div { display: flex; align-items: center; gap: 10px; background: #F5F7FC; padding: 11px 14px; border-radius: 8px; font-size: 13px; }
.context-checklist>div>span:first-child { color: #248C70; }
.context-handoff { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 11px; color: #536083; margin-top: 24px; }
.context-handoff i { font-style: normal; color: #8A9CC0; }
.context-handoff b { color: #1737C8; }
.presentation .explain-release .publish-panel { padding: 24px; }
.explain-release .publish-content { grid-template-columns: 1fr 1fr; }
.explain-release .publish-steps button { padding: 10px 3px; font-size: 10px; }
.explain-release .flow-detail h3 { font-size: 25px; }
.explain-release .flow-detail { min-width: 0; }
.explain-release .store-preview { align-self: stretch; background: #F4F7FD; }
.explain-release .store-awaiting { padding: 20px 16px; }
.explain-release .store-awaiting h4 { font-size: 19px; line-height: 1.35; }
.explain-release .store-awaiting p { font-size: 13px; line-height: 1.65; }
.explain-release .published-app { padding: 20px; }
.explain-release .visual-note { font-size: 11px; line-height: 1.5; }
.department-examples { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.department-examples article { padding: 26px 22px; border-radius: 16px; background: rgba(255,255,255,.85); box-shadow: 0 7px 24px rgba(23,55,200,.04); }
.department-examples small { color: #1737C8; font-size: 11px; font-weight: 600; }
.department-examples h3 { font-size: 22px; line-height: 1.35; margin: 24px 0 14px; min-height: 60px; }
.department-examples p { color: #536083; font-size: 14px; line-height: 1.6; margin: 0; }
.explain-closing-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.explain-closing-bottom>p { font-size: 20px; line-height: 1.6; margin: 0; }
.explain-closing-bottom b { font-weight: 500; }
.explain-closing-bottom .actions { flex-shrink: 0; }
.department-note { font-size: 11px; color: #64738F; margin: -10px 0 0; }
@media (max-width:767px) {
  .presentation .aegis-explain { padding: 28px 22px; display: block; }
  .presentation .explain-heading h2 { font-size: 30px; }
  .presentation[data-lang=th] .explain-heading h2 { font-size: 27px; }
  .explain-intro { font-size: 14px; }
  .explain-system { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
  .explain-start { padding: 0; }
  .explain-platform { padding: 16px; }
  .explain-platform-label { flex-wrap: wrap; gap: 10px; }
  .explain-pillars { grid-template-columns: 1fr; }
  .explain-pillars h3,.explain-pillars p { min-height: 0; }
  .explain-takeaway { margin-top: 24px; font-size: 16px; }
  .builder-context-window { margin-top: 26px; }
  .builder-context-top { padding: 16px; flex-wrap: wrap; }
  .context-configured { font-size: 9px; }
  .builder-context-tabs { padding: 12px 12px 0; flex-wrap: wrap; }
  .builder-context-tabs button { font-size: 10px; padding: 8px; }
  .builder-context-detail { padding: 20px; min-height: 0; }
  .builder-context-detail h3 { font-size: 22px; }
  .context-handoff { flex-wrap: wrap; }
  .presentation .explain-release .publish-panel { padding: 18px; margin-top: 24px; }
  .explain-release .publish-content { grid-template-columns: 1fr; }
  .department-examples { grid-template-columns: 1fr; margin-top: 26px; }
  .department-examples h3 { min-height: 0; margin-top: 16px; }
  .explain-closing-bottom { flex-direction: column; align-items: flex-start; margin-top: 26px; }
  .explain-closing-bottom>p { font-size: 18px; }
  .department-note { margin-top: 18px; }
}
@media (prefers-reduced-motion:no-preference) {
  .aegis-explain.active .explain-pillars article,.aegis-explain.active .department-examples article { animation: workload-enter 420ms ease both; }
  .aegis-explain.active .explain-pillars article:nth-child(2),.aegis-explain.active .department-examples article:nth-child(2) { animation-delay: 70ms; }
  .aegis-explain.active .explain-pillars article:nth-child(3),.aegis-explain.active .department-examples article:nth-child(3) { animation-delay: 140ms; }
  .aegis-explain.active .department-examples article:nth-child(4) { animation-delay: 210ms; }
}

/* Page 4: the employee idea becomes a company app. */
.presentation .explain-overview { gap: 30px; }
.employee-app-path { display: grid; grid-template-columns: 130px 20px 125px 20px minmax(0,1fr) 20px 125px; gap: 12px; align-items: center; }
.path-origin { text-align: center; }
.path-symbol { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 14px; background: rgba(255,255,255,.8); color: #1737C8; }
.path-symbol svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.path-origin h3 { font-size: 18px; line-height: 1.3; margin: 0 0 12px; }
.path-origin p { font-size: 13px; line-height: 1.6; color: #536083; margin: 0; }
.path-origin small { display: block; font-size: 10px; color: #64738F; margin-top: 12px; }
.path-arrow { color: #8B9CC5; font-size: 24px; }
.employee-platform { padding: 20px 16px 16px; border-radius: 20px; background: rgba(220,231,255,.68); box-shadow: 0 12px 36px rgba(23,55,200,.06); }
.employee-platform-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.employee-platform-heading img { width: 88px; height: auto; }
.employee-platform-heading>span { font-size: 12px; color: #536083; }
.employee-capabilities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.employee-capabilities article { display: flex; flex-direction: column; align-items: flex-start; padding: 16px 13px; border-radius: 14px; background: #FFFFFF; }
.employee-capabilities h3 { font-size: 18px; line-height: 1.35; margin: 18px 0 12px; }
.employee-capabilities p { font-size: 12px; color: #536083; line-height: 1.65; margin: 0 0 18px; }
.employee-capabilities small { font-size: 10px; color: #1737C8; font-weight: 500; margin-top: auto; }
.path-outcome .path-symbol { background: #1737C8; color: #F4F8FF; }
.employee-path-takeaway { text-align: center; margin: 0; font-size: 20px; line-height: 1.65; color: #536083; }
.employee-path-takeaway b { font-weight: 600; color: #05082E; }
@media (max-width:767px) {
  .employee-app-path { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
  .path-origin { padding: 8px 16px; }
  .path-arrow { text-align: center; transform: rotate(90deg); }
  .employee-platform-heading { flex-wrap: wrap; }
  .employee-capabilities { grid-template-columns: 1fr; }
  .employee-capabilities article { padding: 20px; }
  .employee-capabilities h3 { margin-top: 14px; }
  .employee-path-takeaway { margin-top: 28px; font-size: 17px; }
}
/* Reveal the route without moving any of its cards. */
.path-arrow svg { display: block; width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes employee-path-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes employee-path-draw { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@media (prefers-reduced-motion:no-preference) {
 .explain-overview.active .path-employee,.explain-overview.active .path-coder,.explain-overview.active .employee-platform,.explain-overview.active .path-outcome,.explain-overview.active .employee-path-takeaway { animation: employee-path-fade 240ms ease both; }
 .explain-overview.active .path-coder { animation-delay: 40ms; }
 .explain-overview.active .employee-platform { animation-delay: 80ms; }
 .explain-overview.active .employee-capabilities article { animation: none; }
 .explain-overview.active .path-outcome { animation-delay: 120ms; }
 .explain-overview.active .employee-path-takeaway { animation-delay: 160ms; }
 .explain-overview.active .path-arrow { --route-delay: 140ms; }
 .explain-overview.active .path-arrow-two { --route-delay: 460ms; }
 .explain-overview.active .path-arrow-three { --route-delay: 900ms; }
 .explain-overview.active .path-arrow-line { stroke-dasharray: 1; animation: employee-path-draw 260ms ease var(--route-delay) both; }
 .explain-overview.active .path-arrow-head { animation: employee-path-fade 150ms ease calc(var(--route-delay) + 170ms) both; }
}
@media (max-width:767px) { .path-arrow svg { margin: 0 auto; } }


/* More breathing room and a stronger headline on the difference slide. */
.presentation .explain-overview { gap: 44px; }
.presentation .explain-overview .explain-heading h2 { font-size: 52px; line-height: 1.16; letter-spacing: -1.3px; margin: 0; }
.presentation[data-lang=th] .explain-overview .explain-heading h2 { font-size: 44px; letter-spacing: -.7px; }
.explain-overview .explain-heading .eyebrow { margin-bottom: 20px; }
.employee-platform { padding: 24px 18px 18px; }
.employee-platform-heading { margin-bottom: 24px; }
.employee-platform-heading img { width: 98px; }
.employee-capabilities { gap: 12px; }
.employee-capabilities article { padding: 22px 16px; }
.employee-capabilities h3 { font-size: 20px; min-height: 54px; margin: 22px 0 14px; }
.employee-capabilities p { font-size: 13px; margin-bottom: 26px; }
.employee-capabilities small { font-size: 11px; }
.employee-path-takeaway { font-size: 18px; line-height: 1.6; }
@media (max-width:767px) {
 .presentation .explain-overview .explain-heading h2 { font-size: 34px; letter-spacing: -.7px; }
 .presentation[data-lang=th] .explain-overview .explain-heading h2 { font-size: 30px; }
 .employee-capabilities h3 { min-height: 0; }
 .employee-path-takeaway { font-size: 16px; }
}

/* AEGIS stands out as the company layer between code and use. */
.explain-overview .employee-platform { background: #0E152D; border: 0; box-shadow: 0 14px 36px rgba(0,16,60,.12); }
.explain-overview .employee-platform-heading img { filter: brightness(0) invert(1); }
.explain-overview .employee-capabilities article { background: #1A2544; border: 0; box-shadow: none; }
.explain-overview .employee-capabilities h3 { color: #F4F7FF; }
.explain-overview .employee-capabilities p { color: #BDC9E3; }
.explain-overview .employee-capabilities small { color: #83DFFF; }
.explain-overview .employee-capabilities .explain-icon { background: #25365B; color: #83DFFF; }

/* Align the origins and the AEGIS caption to their own columns. */
.presentation .explain-overview { grid-template-rows: auto auto; }
.explain-overview .employee-app-path { row-gap: 44px; }
.explain-overview .path-origin { height: 180px; display: flex; flex-direction: column; align-items: center; }
.explain-overview .path-origin h3 { min-height: 47px; display: flex; align-items: center; justify-content: center; }
.explain-overview .path-origin .path-symbol { flex-shrink: 0; }
.explain-overview .employee-platform-heading { justify-content: center; }
.explain-overview .employee-path-takeaway { grid-column: 5; }
@media (max-width:767px) {
 .explain-overview .employee-app-path { row-gap: 16px; }
 .explain-overview .path-origin { height: auto; }
 .explain-overview .path-origin h3 { min-height: 0; }
 .explain-overview .employee-path-takeaway { grid-column: 1; margin-top: 12px; }
}

/* Page 4 balances a lighter heading with a wider company path. */
.presentation .explain-overview { gap: 68px; }
.presentation .explain-overview .explain-heading h2 { font-size: 48px; }
.presentation[data-lang=th] .explain-overview .explain-heading h2 { font-size: 40px; }
.explain-overview .explain-heading .eyebrow { font-size: 16px; letter-spacing: 1.4px; margin-bottom: 18px; }
.explain-overview .employee-app-path { width: calc(100% + 100px); margin-left: -50px; grid-template-columns: 140px 24px 135px 24px minmax(0,1fr) 24px 135px; column-gap: 16px; row-gap: 36px; }
.explain-overview .employee-capabilities { gap: 14px; }
.explain-overview .employee-capabilities article { padding-left: 20px; padding-right: 20px; }
@media (max-width:767px) {
 .presentation .explain-overview .explain-heading h2 { font-size: 32px; }
 .presentation[data-lang=th] .explain-overview .explain-heading h2 { font-size: 28px; }
 .explain-overview .explain-heading .eyebrow { font-size: 14px; letter-spacing: 1px; }
 .explain-overview .employee-app-path { width: 100%; margin-left: 0; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
}

/* Origin subtitles sit close to their labels without moving the icons. */
.explain-overview .path-origin h3 { min-height: 0; margin-bottom: 12px; }

/* Continuous dashed connectors keep the route alive. */
.explain-overview .path-arrow { position: relative; }
.explain-overview .path-arrow svg { width: 46px; height: 24px; margin-left: -11px; overflow: visible; }
.explain-overview .path-arrow-line { stroke: #1685FA; stroke-dasharray: 4 5; }
.explain-overview .path-arrow-head { stroke: #1685FA; }
@keyframes employee-path-dashes { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion:no-preference) {
 .explain-overview.active .path-arrow-line { stroke-dasharray: 4 5; animation: employee-path-dashes 900ms linear infinite; }
 .explain-overview.active .path-arrow-head { animation: none; }
}
@media (max-width:767px) {
 .explain-overview .path-arrow { justify-self: center; }
 .explain-overview .path-arrow svg { margin-left: 0; }
}

/* Original dashed connector weight and blue. */
.explain-overview .path-arrow svg { stroke-width: 1.8; }

/* Builder Kit also guides the coder before release. */
.explain-overview .employee-platform { position: relative; }
.builder-feedback { position: absolute; left: -124px; top: -28px; width: 212px; height: 140px; pointer-events: none; }
.builder-feedback svg { display: block; width: 212px; height: 140px; overflow: visible; stroke: #1685FA; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.builder-feedback-line { stroke-dasharray: 4 5; }
.builder-feedback>span { position: absolute; top: -20px; left: 0; white-space: nowrap; font-size: 12px; font-weight: 500; color: #1737C8; }
@media (prefers-reduced-motion:no-preference) {
 .explain-overview.active .builder-feedback-line { animation: employee-path-dashes 900ms linear infinite; }
}
@media (max-width:767px) {
 .builder-feedback { position: static; width: auto; height: auto; margin-bottom: 20px; }
 .builder-feedback svg { display: none; }
 .builder-feedback>span { position: static; white-space: normal; font-size: 12px; color: #83DFFF; display: block; text-align: center; }
}

/* Page 3: a familiar light chat, with AEGIS services in navy. */
.creator-scene .coder-window { background: #FFFFFF; color: #18213B; border: 0; box-shadow: 0 16px 45px rgba(0,16,60,.09); }
.creator-scene .coder-toolbar { background: #F7F8FB; border-bottom: 1px solid #E9EDF4; }
.creator-scene .coder-window-dots { color: #9AA6BA; }
.creator-scene .coder-tools,.creator-scene .coder-toolbar #replayCreator { color: #64738F; }
.creator-scene .prompt-sender,.creator-scene .coder-response-heading,.creator-scene .coder-staff-label { color: #536083; }
.creator-scene .coder-prompt { background: #EDF1F7; color: #18213B; }
.creator-scene .coder-response,.creator-scene .coder-submission-response { background: #FAFBFD; border: 1px solid #EDF0F5; }
.creator-scene .coder-progress-chat p,.creator-scene .coder-response>p,.creator-scene .coder-preview-ready p,.creator-scene .coder-submission-response p { color: #43516C; }
.creator-scene .coder-agent-mark { background: #EAF0FF; color: #1737C8; }
.creator-scene .coder-thinking,.creator-scene .coder-working,.creator-scene .submission-scanning { color: #64738F; }
.creator-scene .thinking-dots i { background: #64738F; }
.creator-scene .typing-caret,.creator-scene .submit-caret { background: #1737C8; }
.creator-scene .coder-preview-url { color: #1769D2; }
.creator-scene .coder-footer { color: #64738F; border-top: 1px solid #E9EDF4; }
.creator-scene .coder-submission-response .submission-released,.creator-scene .check-completed { color: #248C70; }
.creator-scene .pipeline-card { background: #0E152D; color: #F4F7FF; border: 0; box-shadow: 0 10px 28px rgba(0,16,60,.1); }
.creator-scene .pipeline-kicker { color: #9EAFCD; }
.creator-scene .pipeline-card p,.creator-scene .pipeline-checks li,.creator-scene .govern-status { color: #BDC9E3; }
.creator-scene .pipeline-icon { background: #25365B; color: #83DFFF; }
.creator-scene .pipeline-tags>span { background: #25365B; color: #BDC9E3; }
.creator-scene .kit-thinking,.creator-scene[data-creator-phase="4"] .govern-working { color: #83DFFF; }
.creator-scene .kit-thinking .thinking-dots i { background: #83DFFF; }
.creator-scene .kit-completed,.creator-scene[data-creator-phase="5"] .govern-completed,.creator-scene .pipeline-checks .check-mark { color: #69CFB0; }
.creator-scene .kit-complete-mark,.creator-scene .govern-complete-mark { border-color: #0E152D; }
.creator-scene[data-creator-phase="5"] .pipeline-store { background: var(--aegis-heading-gradient); }
.creator-scene[data-creator-phase="5"] .pipeline-store p,.creator-scene[data-creator-phase="5"] .pipeline-store .pipeline-kicker { color: #D9E6FF; }

/* Route Builder Kit guidance below the diagram instead of above it. */
.builder-feedback { top: auto; bottom: -50px; height: 190px; }
.builder-feedback svg { height: 190px; }
.builder-feedback>span { top: 160px; }
@media (max-width:767px) {
 .builder-feedback { height: auto; }
 .builder-feedback>span { position: static; }
}

/* Keep the preview window inside the space above the journey bar. */
.workspace-preview { top: var(--preview-frame-top,24px); bottom: auto; margin: 0 auto; height: var(--preview-frame-height,calc(100dvh - 96px)); }
.presentation:has(#workspacePreview[open]) .bottom-nav { visibility: visible; }
.workspace-preview .preview-app-footer { border-radius: 0; }

/* Chat roles: pale blue for the employee, white for the AI. */
.creator-scene .coder-window { background: #F5F6F8; }
.creator-scene .coder-toolbar { background: #F8F9FB; }
.creator-scene .coder-prompt { background: #E3F0FF; }
.creator-scene .coder-response,.creator-scene .coder-submission-response { background: #FFFFFF; border-color: #E9EDF3; }

/* A quiet dark journey bar keeps the white app preview in focus. */
.workspace-preview .preview-app-footer { background: #0E152D; color: #BDC9E3; }
.workspace-preview .preview-step-context { color: #BDC9E3; }
.workspace-preview .preview-step-context>b { color: #F4F7FF; border-right-color: #34415D; }
.workspace-preview .preview-app-footer #previewBack,.workspace-preview .preview-app-footer #previewContinue { color: #F4F7FF; }
.workspace-preview .preview-app-footer #previewBack:hover,.workspace-preview .preview-app-footer #previewContinue:hover { background: transparent; color: #83DFFF; -webkit-text-fill-color: #83DFFF; }

/* The preview instruction aligns to the URL instead of straddling the chat. */
.creator-scene>.preview-tutorial { font-size: 18px; padding: 10px 14px; box-shadow: 0 4px 12px rgba(100,72,25,.08); }
.creator-scene>.preview-tutorial:not(.tutorial-below)::after { left: -8px; top: calc(50% - 6px); width: 9px; height: 12px; clip-path: polygon(100% 0,0 50%,100% 100%); }
@keyframes preview-tutorial-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Preview guidance shares the completed App Store gradient. */
.creator-scene>.preview-tutorial { background: var(--aegis-heading-gradient); color: #F4F8FF; border-color: transparent; box-shadow: 0 4px 14px rgba(23,55,200,.14); }
.creator-scene>.preview-tutorial:not(.tutorial-below)::after { background: #1737C8; }
.creator-scene>.preview-tutorial.tutorial-below::after { background: #1737C8; }

/* Preview navigation sits in front of the backdrop with the same outer layout. */
.workspace-preview .preview-app-footer { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.workspace-preview .preview-app-footer::before { width: 42.857143%; }
.workspace-preview .preview-app-footer .preview-journey-status { order: 0; margin-right: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #354363; }
.workspace-preview .preview-app-footer .preview-journey-status b { color: #05082E; font-weight: 500; }
.workspace-preview .preview-app-footer #previewBack,.workspace-preview .preview-app-footer #previewContinue { color: #05082E; }
.workspace-preview .preview-app-footer #previewBack:hover,.workspace-preview .preview-app-footer #previewContinue:hover { color: #83DFFF; -webkit-text-fill-color: #83DFFF; }
@media (max-width:767px) {
 .workspace-preview .preview-app-footer .preview-journey-status { font-size: 10px; gap: 4px; }
 .workspace-preview .preview-app-footer .nav-hint { display: none; }
 .workspace-preview .preview-app-footer .step-status { font-size: 10px; margin-left: 4px; padding-left: 6px; }
}

/* The preview app continues to the screen edge under floating navigation. */
.workspace-preview { border-bottom: 0; border-radius: 20px 20px 0 0; }
.workspace-preview .preview-app-body { border-radius: 0; }
.workspace-preview .preview-app-footer { z-index: 10; background: rgba(244,247,252,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.presentation .workspace-preview .preview-main { padding-bottom: calc(var(--preview-nav-height,48px) + 24px); }
.workspace-preview .preview-sidebar { padding-bottom: calc(var(--preview-nav-height,48px) + 16px); }
@media (min-width:768px) {
 .presentation:has(.creator-scene.active) #main { overflow: visible; }
}
@media (max-width:767px) {
 .workspace-preview { border-radius: 14px 14px 0 0; }
 .workspace-preview .preview-sidebar { padding-bottom: 10px; }
}

/* A longer downward shadow lets the chat window float naturally. */
.creator-scene .coder-window { box-shadow: 0 12px 28px rgba(0,16,60,.045),0 38px 76px -12px rgba(0,16,60,.14); }

/* Preview controls use the same blue text gradient as the outer navigation. */
.workspace-preview .preview-app-footer #previewBack:hover,
.workspace-preview .preview-app-footer #previewContinue:hover {
 background: var(--aegis-heading-gradient);
 background-clip: text;
 -webkit-background-clip: text;
 color: transparent;
 -webkit-text-fill-color: transparent;
 font-weight: 700;
}

/* Anchor the return path at the Builder Kit card's bottom center. */
.builder-feedback { width: calc(100% / 6 + 131.333px); }
.builder-feedback svg { width: 100%; }
.builder-feedback svg path { vector-effect: non-scaling-stroke; }
.builder-feedback>span { width: 100%; text-align: center; }
@media (max-width:767px) {
 .builder-feedback { width: auto; }
 .builder-feedback>span { width: auto; }
}

/* Leave one extra chat line before the preview URL in step 2. */
.creator-scene[data-creator-phase="1"] .coder-preview-ready .coder-preview-url { margin-top: 1.65em; }

/* Small, consistent completion badges with a clean stroked check. */
.creator-scene .kit-complete-mark,
.creator-scene .govern-complete-mark,
.creator-scene .store-complete-mark {
 width: 16px;
 height: 16px;
 right: -3px;
 bottom: -3px;
 border: 0;
 background: #BCEBD9;
 color: #236D56;
 box-shadow: 0 0 0 1.5px #0E152D;
}
.creator-scene .store-complete-mark { box-shadow: 0 0 0 1.5px #1737C8; }
.creator-scene .pipeline-icon .kit-complete-mark svg,
.creator-scene .pipeline-icon .govern-complete-mark svg,
.creator-scene .pipeline-icon .store-complete-mark svg { width: 12px; height: 12px; }

/* macOS traffic-light controls for the AI coder window. */
.creator-scene .coder-window-dots { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.creator-scene .coder-window-dots i { display: block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,16,60,.08); }
.creator-scene .coder-window-dots i:nth-child(1) { background: #FF5F57; }
.creator-scene .coder-window-dots i:nth-child(2) { background: #FEBC2E; }
.creator-scene .coder-window-dots i:nth-child(3) { background: #28C840; }
@media (max-width:767px) { .creator-scene .coder-window-dots { gap: 5px; } .creator-scene .coder-window-dots i { width: 10px; height: 10px; } }

/* Step 7: a company store populated with team-built apps. */
.presentation:has(#companyStorePreview[open]) .bottom-nav { visibility: visible; }
.internal-store-header { height: 66px; padding: 16px 28px; display: flex; align-items: center; gap: 24px; flex-shrink: 0; background: #FAFBFD; border-bottom: 1px solid #E8EBF1; }
.internal-store-header img { width: 130px; height: auto; }
.internal-store-tabs { margin-left: auto; display: flex; padding: 4px; border-radius: 999px; background: #EBEDF1; font-size: 13px; color: #838896; font-weight: 600; }
.internal-store-tabs span { padding: 6px 16px; }
.internal-store-tabs span:first-child { background: #FFFFFF; color: #242938; border-radius: 999px; box-shadow: 0 2px 5px rgba(0,16,60,.07); }
.internal-store-account { font-size: 12px; color: #667085; }
.internal-store-account small { display: block; margin-top: 3px; font-size: 9px; color: #1769D2; letter-spacing: .6px; }
.internal-store-main { flex: 1; min-height: 0; overflow: auto; background: #F5F6F8; padding: 30px 6% calc(var(--preview-nav-height,48px) + 32px); }
.internal-store-hero h2 { margin: 10px 0 12px; font-size: 38px; line-height: 1.12; letter-spacing: -1.2px; font-weight: 650; color: #202534; }
.internal-store-hero p { margin: 0; font-size: 15px; color: #7B8290; }
.internal-store-hero .internal-store-eyebrow { font-size: 11px; letter-spacing: .6px; color: #1769F5; font-weight: 600; }
.internal-store-search { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; padding: 10px 16px; background: #FFFFFF; border: 1px solid #EAEDF2; border-radius: 999px; color: #9199A9; }
.internal-store-search>span { font-size: 22px; line-height: 1; }
.internal-store-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: 13px; color: #354363; }
.internal-store-search:focus-within { outline: 2px solid #1769D2; outline-offset: 2px; }
.internal-store-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 22px; }
.internal-store-filters button { padding: 7px 13px; border: 1px solid #E8EBF1; border-radius: 999px; background: #FFFFFF; color: #747C8A; font: inherit; font-size: 11px; cursor: pointer; }
.internal-store-filters button[aria-pressed="true"] { background: #252B38; color: #F4F7FF; border-color: #252B38; }
.internal-store-filters>span { margin-left: auto; font-size: 10px; color: #9199AA; }
.internal-featured { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 24px; }
.internal-featured article { display: flex; align-items: flex-end; min-height: 94px; padding: 18px; border-radius: 14px; color: #F4F7FF; background: linear-gradient(120deg,#1737C8,#138CEA); }
.internal-featured article:nth-child(2) { background: linear-gradient(120deg,#28617B,#37978D); }
.internal-featured article:nth-child(3) { background: linear-gradient(120deg,#64479B,#9271BB); }
.internal-featured small { display: block; font-size: 9px; letter-spacing: .8px; margin-bottom: 7px; opacity: .8; }
.internal-featured b { font-size: 16px; line-height: 1.25; font-weight: 600; }
.internal-apps-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.internal-apps-heading h2 { margin: 0; font-size: 19px; font-weight: 600; color: #252B38; }
.internal-apps-heading>span { color: #939AA8; font-size: 11px; }
.internal-app-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.internal-app-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 23px 18px; min-height: 138px; border: 1px solid #E8EBF1; border-radius: 16px; background: #FFFFFF; }
.internal-app-card[hidden] { display: none; }
.internal-app-card:first-child { border-color: #CBDBF7; box-shadow: 0 4px 16px rgba(23,55,200,.06); }
.internal-app-icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: var(--app-color); color: #F4F7FF; font-size: 29px; }
.internal-app-name h3 { margin: 0 0 5px; font-size: 14px; font-weight: 600; line-height: 1.25; color: #252B38; }
.internal-app-card p { margin: 7px 0 9px; font-size: 11px; line-height: 1.5; color: #838A98; }
.internal-app-card small { color: #9AA2AF; font-size: 9px; }
.internal-new { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; font-size: 8px; color: #258766; background: #E0F3EA; border-radius: 999px; }
.internal-new::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #30AE80; }
.internal-app-star { position: absolute; top: 9px; right: 10px; color: #A0A8B5; font-size: 17px; }
.internal-empty { text-align: center; color: #7D8798; font-size: 14px; }
.internal-store-preview .preview-app-footer #storeBack,.internal-store-preview .preview-app-footer #storeContinue { color: #05082E; font-weight: 700; }
.internal-store-preview .preview-app-footer #storeBack:hover,.internal-store-preview .preview-app-footer #storeContinue:hover { background: var(--aegis-heading-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.internal-store-filters button:focus-visible,.internal-store-preview button:focus-visible { outline: 2px solid #1769D2; outline-offset: 3px; }
@media (max-width:767px) {
 .internal-store-header { padding: 12px 16px; gap: 12px; height: 62px; }
 .internal-store-header img { width: 85px; }
 .internal-store-tabs { font-size: 10px; }
 .internal-store-tabs span { padding: 5px 9px; }
 .internal-store-account { display: none; }
 .internal-store-main { padding: 24px 18px calc(var(--preview-nav-height,48px) + 24px); }
 .internal-store-hero h2 { font-size: 30px; }
 .internal-store-hero p { font-size: 12px; line-height: 1.5; }
 .internal-store-hero .internal-store-eyebrow { font-size: 9px; }
 .internal-featured { grid-template-columns: 1fr; gap: 8px; }
 .internal-featured article { min-height: 72px; padding: 14px; }
 .internal-featured article:not(:first-child) { display: none; }
 .internal-app-grid { grid-template-columns: 1fr; }
 .internal-store-filters>span { width: 100%; margin: 3px 0 0; }
 .internal-app-card { min-height: 120px; }
}
.internal-store-preview .preview-app-footer #storeBack { order: 1; }
.internal-store-preview .preview-app-footer #storeContinue { order: 2; }
.internal-store-preview .preview-app-footer #storeBack,.internal-store-preview .preview-app-footer #storeContinue { background: transparent; padding: 8px 15px; font-size: 13px; min-height: 40px; }
@media (max-width:767px) { .internal-store-preview .preview-app-footer #storeBack,.internal-store-preview .preview-app-footer #storeContinue { padding: 4px 9px; } }
.internal-app-icon svg { width: 30px; height: 30px; }

/* Keep the newly published app visible when the store opens on laptops. */
@media (min-width:768px) and (max-height:800px) {
 .internal-store-header { height: 52px; padding: 10px 24px; }
 .internal-store-main { padding-top: 18px; }
 .internal-store-hero h2 { font-size: 30px; margin: 7px 0 8px; }
 .internal-store-hero h2 .th { font-size: 28px; }
 .internal-store-hero p { font-size: 12px; }
 .internal-store-hero .internal-store-eyebrow { font-size: 10px; }
 .internal-store-search { margin: 12px 0 10px; padding: 8px 14px; }
 .internal-store-filters { margin-bottom: 14px; }
 .internal-store-filters button { padding: 5px 12px; }
 .internal-featured { margin-bottom: 16px; }
 .internal-featured article { min-height: 68px; padding: 14px 16px; }
 .internal-featured small { margin-bottom: 5px; font-size: 8px; }
 .internal-featured b { font-size: 14px; }
 .internal-apps-heading { margin-bottom: 10px; }
 .internal-app-card { min-height: 120px; padding: 16px; }
 .internal-app-card p { margin: 5px 0 7px; }
}
.internal-apps-heading h2 .th { font-size: inherit; }
.internal-store-header,.internal-featured article,.internal-app-card { box-sizing: border-box; }
@media (min-width:768px) and (max-height:800px) {
 .internal-featured article { min-height: 64px; }
 .internal-app-card { min-height: 110px; }
}
@media (min-width:768px) and (max-height:800px) {
 .internal-store-hero h2 br { display: none; }
 .internal-featured article>span { line-height: 1.25; }
 .internal-app-card>div { line-height: 1.35; }
 .internal-app-card small { display: block; line-height: 1.3; }
}
@media (min-width:768px) and (max-height:650px) {
 .internal-store-header { height: 44px; }
 .internal-store-main { padding-top: 12px; }
}
@media (min-width:768px) and (max-height:650px) {
 .internal-featured { display: none; }
}

/* A restrained product UI: soft surfaces and a consistent line-icon family. */
.internal-store-main { background: #F6F7F9; }
.internal-store-hero h2 { font-weight: 600; letter-spacing: -1px; color: #202735; }
.internal-store-search { border-color: #E6E9EF; box-shadow: 0 2px 4px rgba(0,16,60,.015); }
.internal-store-filters button { color: #687283; border-color: #E6E9EF; font-weight: 500; }
.internal-store-filters button[aria-pressed="true"] { background: #252D3C; border-color: #252D3C; }
.internal-featured article,.internal-featured article:nth-child(2),.internal-featured article:nth-child(3) {
 --feature-ink: #3555D9;
 --feature-surface: #E3EAFE;
 background: #EBF0FD;
 color: #25314B;
 align-items: center;
 gap: 12px;
 border: 1px solid rgba(53,85,217,.05);
 border-radius: 14px;
}
.internal-featured article:nth-child(2) { --feature-ink: #238B91; --feature-surface: #D9EFEC; background: #EAF5F2; color: #25413E; }
.internal-featured article:nth-child(3) { --feature-ink: #AF7933; --feature-surface: #F1E6D2; background: #F8F2E8; color: #4A3C2A; }
.store-feature-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--feature-surface); color: var(--feature-ink); }
.store-feature-icon svg { width: 26px; height: 26px; }
.internal-featured small { color: var(--feature-ink); opacity: .85; font-weight: 600; letter-spacing: .9px; }
.internal-featured b { font-weight: 600; font-size: 14px; }
.internal-featured article>div { line-height: 1.3; }
.store-feature-arrow { margin-left: auto; align-self: flex-start; color: var(--feature-ink); opacity: .5; font-size: 15px; }
.internal-app-card { border-color: #E7EAF0; border-radius: 16px; box-shadow: 0 2px 5px rgba(0,16,60,.015); }
.internal-app-card:first-child { border-color: #C8D5F8; box-shadow: 0 3px 12px rgba(53,85,217,.045); }
.internal-app-icon { width: 48px; height: 48px; border-radius: 14px; color: var(--app-color); background: color-mix(in srgb,var(--app-color) 10%,#FFFFFF); }
.internal-app-icon svg { width: 27px; height: 27px; stroke-width: 1.65; }
.internal-app-name h3 { font-weight: 600; letter-spacing: -.15px; color: #28313F; }
.internal-app-card p { color: #788292; }
.internal-app-card small { color: #99A2AF; }
.internal-new { background: #E9F5EF; color: #3B8D69; font-weight: 500; }
.internal-app-star { font-size: 16px; color: #A9B1BE; }
@media (min-width:768px) and (max-height:800px) {
 .internal-featured article { padding: 12px 14px; gap: 10px; }
 .store-feature-icon { width: 34px; height: 34px; border-radius: 10px; }
 .store-feature-icon svg { width: 23px; height: 23px; }
 .internal-featured b { font-size: 12px; }
 .internal-featured small { font-size: 7px; letter-spacing: .6px; }
}

/* The AI coder recommends opening the store after successful release. */
.coder-store-ready { display: none; margin-top: 22px; align-items: center; flex-wrap: wrap; gap: 16px; }
.creator-scene[data-creator-phase="5"] .coder-store-ready { display: flex; }
.coder-store-ready a { color: #1769D2; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.coder-store-ready a:hover { color: #1737C8; }
.store-open-hint { position: relative; padding: 8px 12px; border-radius: 8px; background: var(--aegis-heading-gradient); color: #F4F8FF; font-size: 15px; white-space: nowrap; font-weight: 600; box-shadow: 0 4px 14px rgba(23,55,200,.12); }
.creator-scene[data-creator-phase="5"] .store-open-hint { animation: tutorial-side-enter 500ms cubic-bezier(.2,.8,.2,1) 400ms both,preview-tutorial-float 2600ms ease-in-out 900ms infinite; }
.store-open-hint::before { content: ''; position: absolute; left: -6px; top: calc(50% - 5px); width: 7px; height: 10px; background: #1737C8; clip-path: polygon(100% 0,0 50%,100% 100%); }
.coder-store-ready a:focus-visible { outline: 2px solid #1769D2; outline-offset: 5px; border-radius: 3px; }
@media (prefers-reduced-motion:reduce) { .creator-scene .store-open-hint { animation: none !important; } }

/* Company identity and a brighter featured-app shelf. */
.internal-store-header { height: 64px; padding: 12px 24px; gap: 20px; }
.internal-store-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.company-store-brand-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: #E7EDFF; color: #3555D9; }
.company-store-brand-icon svg { width: 23px; height: 23px; }
.internal-store-brand b { font-size: 17px; letter-spacing: -.35px; font-weight: 600; color: #273246; line-height: 1.2; }
.internal-store-tabs { font-size: 12px; padding: 3px; }
.internal-store-tabs span { padding: 6px 14px; }
.internal-store-account { font-size: 11px; }
.internal-store-account small { font-size: 8px; letter-spacing: .6px; }
.internal-featured article { --feature-ink: #F1F5FF; --feature-surface: rgba(255,255,255,.16); background: linear-gradient(115deg,#3555D9,#268BEA); color: #F4F8FF; border: 0; }
.internal-featured article:nth-child(2) { --feature-ink: #E5FFF7; --feature-surface: rgba(255,255,255,.16); background: linear-gradient(115deg,#148A84,#27AC94); color: #F0FFF9; }
.internal-featured article:nth-child(3) { --feature-ink: #FFF1E5; --feature-surface: rgba(255,255,255,.16); background: linear-gradient(115deg,#CD7439,#E4A14C); color: #FFF9F2; }
.internal-featured small { opacity: .8; }
.store-feature-arrow { opacity: .65; }
@media (min-width:768px) and (max-height:800px) {
 .internal-store-header { height: 52px; padding: 9px 22px; }
 .internal-store-brand b { font-size: 16px; }
 .company-store-brand-icon { width: 30px; height: 30px; border-radius: 9px; }
 .company-store-brand-icon svg { width: 21px; height: 21px; }
}
@media (min-width:768px) and (max-height:650px) { .internal-store-header { height: 44px; padding-top: 6px; padding-bottom: 6px; } }
@media (max-width:767px) {
 .internal-store-header { height: 60px; padding: 10px 14px; gap: 10px; }
 .internal-store-brand { gap: 7px; }
 .internal-store-brand b { font-size: 12px; letter-spacing: -.2px; max-width: 140px; }
 .company-store-brand-icon { width: 29px; height: 29px; border-radius: 9px; }
 .company-store-brand-icon svg { width: 20px; height: 20px; }
 .internal-store-tabs { font-size: 10px; padding: 3px; }
 .internal-store-tabs span { padding: 5px 8px; }
}

/* A lighter company title and quieter store/console switch. */
.internal-store-brand b { font-weight: 400; }
.internal-store-tabs { font-size: 10px; padding: 2px; }
.internal-store-tabs span { padding: 5px 11px; }
@media (max-width:767px) {
 .internal-store-tabs { font-size: 9px; }
 .internal-store-tabs span { padding: 4px 7px; }
}

/* The store opens directly onto its content, with the employee signed in. */
.internal-store-main { position: relative; }
.internal-store-profile { position: absolute; right: 6%; top: 28px; display: flex; align-items: center; gap: 9px; }
.internal-store-profile .preview-profile { width: 34px; height: 34px; flex-shrink: 0; }
.internal-store-profile b { display: block; color: #354363; font-size: 12px; font-weight: 500; }
.internal-store-profile small { display: block; margin-top: 3px; color: #8B96A8; font-size: 10px; }
@media (min-width:768px) and (max-height:800px) {
 .internal-store-profile { top: 18px; }
 .internal-store-profile b { font-size: 11px; }
 .internal-store-profile small { font-size: 9px; }
 .internal-store-profile .preview-profile { width: 30px; height: 30px; }
 .internal-store-hero h2 { max-width: calc(100% - 185px); }
}
@media (max-width:767px) {
 .internal-store-profile { position: static; justify-content: flex-end; margin-bottom: 18px; }
 .internal-store-profile b { font-size: 11px; }
 .internal-store-profile small { font-size: 9px; }
 .internal-store-profile .preview-profile { width: 30px; height: 30px; }
}

/* A relaxed signed-in profile with compact, deliberate text spacing. */
.internal-store-profile .staff-stress { display: none; }
.internal-store-profile .staff-smile { opacity: 1; }
.internal-store-profile .staff-happy { opacity: .5; }
.internal-store-profile>span { display: flex; flex-direction: column; gap: 4px; line-height: 1.25; }
.internal-store-profile b,.internal-store-profile small { margin: 0; line-height: 1.25; }

/* Taller featured cards with layered, blended color fields. */
.internal-featured article,.internal-featured article:nth-child(2),.internal-featured article:nth-child(3) {
 min-height: 138px;
 padding: 22px;
 border: 0;
 background: radial-gradient(ellipse at 96% 0%,rgba(112,229,255,.72),transparent 65%),radial-gradient(ellipse at 8% 105%,rgba(145,93,245,.75),transparent 70%),linear-gradient(125deg,#3654D9,#168BCF);
}
.internal-featured article:nth-child(2) {
 background: radial-gradient(ellipse at 100% 0%,rgba(123,232,185,.78),transparent 65%),radial-gradient(ellipse at 0% 105%,rgba(51,120,215,.65),transparent 72%),linear-gradient(125deg,#147E90,#21A89A);
}
.internal-featured article:nth-child(3) {
 background: radial-gradient(ellipse at 100% 0%,rgba(255,215,126,.82),transparent 65%),radial-gradient(ellipse at 0% 105%,rgba(207,92,159,.7),transparent 72%),linear-gradient(125deg,#BF647C,#D89043);
}
.internal-featured b { font-size: 16px; }
.store-feature-icon { width: 44px; height: 44px; background: rgba(255,255,255,.17); }
.store-feature-icon svg { width: 28px; height: 28px; }
@media (min-width:768px) and (max-height:800px) {
 .internal-featured article,.internal-featured article:nth-child(2),.internal-featured article:nth-child(3) { min-height: 98px; padding: 16px; }
 .internal-featured b { font-size: 13px; }
 .store-feature-icon { width: 36px; height: 36px; }
 .store-feature-icon svg { width: 24px; height: 24px; }
}
@media (max-width:767px) {
 .internal-featured article,.internal-featured article:nth-child(2),.internal-featured article:nth-child(3) { min-height: 120px; padding: 18px; }
 .internal-featured b { font-size: 14px; }
}

/* Featured apps read like short typographic posters. */
.internal-featured article,.internal-featured article:nth-child(2),.internal-featured article:nth-child(3) { position: relative; align-items: flex-end; padding: 22px 24px; }
.internal-featured article>div { line-height: 1.1; }
.internal-featured small { font-size: 8px; letter-spacing: 1.3px; margin-bottom: 10px; font-weight: 500; }
.internal-featured b { display: block; font-size: 25px; line-height: 1.08; letter-spacing: -.7px; font-weight: 600; }
.internal-featured .th b { font-size: 22px; line-height: 1.2; letter-spacing: -.3px; }
.store-feature-arrow { position: absolute; top: 18px; right: 20px; font-size: 18px; }
@media (min-width:768px) and (max-height:800px) {
 .internal-featured article,.internal-featured article:nth-child(2),.internal-featured article:nth-child(3) { padding: 15px 18px; }
 .internal-featured b { font-size: 21px; }
 .internal-featured .th b { font-size: 19px; }
 .internal-featured small { font-size: 7px; margin-bottom: 7px; letter-spacing: 1px; }
 .store-feature-arrow { top: 12px; right: 15px; font-size: 15px; }
}
@media (max-width:767px) {
 .internal-featured b { font-size: 24px; }
 .internal-featured .th b { font-size: 21px; }
}

/* App icons use vivid gradient tiles with crisp white line artwork. */
.internal-app-card { --icon-start: #7256E8; --icon-end: #2479F1; --icon-light: #75BBFF; }
.internal-app-card:nth-child(2) { --icon-start: #167BAC; --icon-end: #24B5A6; --icon-light: #77E3CF; }
.internal-app-card:nth-child(3) { --icon-start: #6D4DCF; --icon-end: #AB6BDC; --icon-light: #D3A2F3; }
.internal-app-card:nth-child(4) { --icon-start: #2452D9; --icon-end: #168CCD; --icon-light: #71D4F2; }
.internal-app-card:nth-child(5) { --icon-start: #D06D64; --icon-end: #E39E3D; --icon-light: #FFD488; }
.internal-app-card:nth-child(6) { --icon-start: #277E9A; --icon-end: #43AA82; --icon-light: #92DBC3; }
.internal-app-icon {
 color: #F4F8FF;
 background: radial-gradient(ellipse at 100% 0%,var(--icon-light),transparent 75%),linear-gradient(135deg,var(--icon-start),var(--icon-end));
 border-radius: 14px;
 box-shadow: 0 3px 8px rgba(0,16,60,.1);
}
.internal-app-icon svg { width: 28px; height: 28px; stroke-width: 1.8; }

/* Four typographic features, each with its own color direction. */
.internal-featured { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.internal-featured article {
 background: radial-gradient(ellipse at 0% 100%,rgba(159,105,250,.9),transparent 75%),radial-gradient(ellipse at 90% 10%,rgba(101,216,250,.8),transparent 65%),linear-gradient(35deg,#4254D7,#217BCE);
}
.internal-featured article:nth-child(2) {
 background: radial-gradient(ellipse at 12% 0%,rgba(138,236,195,.85),transparent 70%),radial-gradient(ellipse at 100% 95%,rgba(39,117,187,.8),transparent 75%),linear-gradient(155deg,#168F89,#239C9D);
}
.internal-featured article:nth-child(3) {
 background: radial-gradient(ellipse at 100% 100%,rgba(255,201,101,.92),transparent 75%),radial-gradient(ellipse at 0% 20%,rgba(205,101,157,.88),transparent 70%),linear-gradient(65deg,#D38258,#D99864);
}
.internal-featured article:nth-child(4) {
 --feature-ink: #F0EFFF;
 background: radial-gradient(ellipse at 55% 0%,rgba(178,135,242,.95),transparent 70%),radial-gradient(ellipse at 0% 100%,rgba(78,138,233,.85),transparent 72%),linear-gradient(225deg,#925EC7,#535DCC);
}
.internal-featured article,.internal-featured article:nth-child(2),.internal-featured article:nth-child(3),.internal-featured article:nth-child(4) { padding: 20px; }
.internal-featured b { font-size: 22px; }
.internal-featured .th b { font-size: 20px; }
@media (min-width:768px) and (max-height:800px) {
 .internal-featured article,.internal-featured article:nth-child(2),.internal-featured article:nth-child(3),.internal-featured article:nth-child(4) { padding: 14px 16px; }
 .internal-featured b { font-size: 19px; }
 .internal-featured .th b { font-size: 17px; }
}
@media (max-width:767px) {
 .internal-featured { grid-template-columns: 1fr; }
 .internal-featured article:nth-child(4) { display: none; }
 .internal-featured b { font-size: 24px; }
 .internal-featured .th b { font-size: 21px; }
}

/* Slightly deeper, more saturated colors against the gray store surface. */
.internal-featured article {
 background: radial-gradient(ellipse at 0% 100%,rgba(126,64,231,.9),transparent 75%),radial-gradient(ellipse at 90% 10%,rgba(42,174,236,.8),transparent 65%),linear-gradient(35deg,#3041C8,#1767C3);
}
.internal-featured article:nth-child(2) {
 background: radial-gradient(ellipse at 12% 0%,rgba(47,194,146,.85),transparent 70%),radial-gradient(ellipse at 100% 95%,rgba(22,89,167,.8),transparent 75%),linear-gradient(155deg,#087D79,#168A93);
}
.internal-featured article:nth-child(3) {
 background: radial-gradient(ellipse at 100% 100%,rgba(243,163,52,.92),transparent 75%),radial-gradient(ellipse at 0% 20%,rgba(184,63,128,.88),transparent 70%),linear-gradient(65deg,#C36940,#CA8146);
}
.internal-featured article:nth-child(4) {
 background: radial-gradient(ellipse at 55% 0%,rgba(147,92,224,.95),transparent 70%),radial-gradient(ellipse at 0% 100%,rgba(47,103,212,.85),transparent 72%),linear-gradient(225deg,#7A40B7,#3F49BB);
}
.internal-app-card { --icon-start: #603AD5; --icon-end: #1764E8; --icon-light: #4896F7; }
.internal-app-card:nth-child(2) { --icon-start: #096995; --icon-end: #0A9B8E; --icon-light: #38C7AC; }
.internal-app-card:nth-child(3) { --icon-start: #5734BA; --icon-end: #944BCB; --icon-light: #B078DF; }
.internal-app-card:nth-child(4) { --icon-start: #173CC2; --icon-end: #067BB9; --icon-light: #2FB3DD; }
.internal-app-card:nth-child(5) { --icon-start: #BE4F48; --icon-end: #D8821F; --icon-light: #F1AF4D; }
.internal-app-card:nth-child(6) { --icon-start: #136783; --icon-end: #269567; --icon-light: #52BC98; }

/* Integration and build updates form one consecutive block of chat text. */
.creator-scene .coder-progress-chat p { margin: 0; }
.creator-scene .coder-progress-chat p:first-child { margin-top: 12px; }

/* Release confirmation follows the submission message without a blank line. */
.creator-scene .coder-submission-response .submission-released { margin-top: 0; }

/* Close the store onto the completed creation scene before changing chapters. */
.internal-store-preview[open].preview-closing { animation-duration: 260ms; }
.internal-store-preview[open].preview-closing::backdrop { animation-duration: 260ms; }
.presentation.store-returning .bottom-nav,.presentation.store-returning #main { pointer-events: none; }

/* Keep the collaboration path visible once the build is complete. */
.creator-scene[data-creator-phase="1"][data-coder-progress="6"] .kit-exchange { display: block; }
.creator-scene[data-creator-phase="1"][data-coder-progress="6"] .kit-exchange i { display: none; animation: none; }

/* Preserve each stage's transform while the two chapters crossfade. */
.presentation .scene.chapter-outgoing { display: grid; z-index: 3; pointer-events: none; }
.presentation.chapter-crossfading #main { overflow: visible; pointer-events: none; }
.presentation.chapter-crossfading .bottom-nav { pointer-events: none; }
@media (max-width:767px) {
 .presentation .scene.chapter-outgoing { position: absolute; top: 0; left: 0; width: 100%; transform: none; }
}

/* A completed build settles into one quiet connection with endpoint dots. */
.kit-exchange { transition: border-color 300ms ease; }
.kit-exchange::before { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: #8DA2D5; opacity: 0; transition: opacity 300ms ease 120ms; }
.kit-exchange::after { content: ''; position: absolute; left: -2px; top: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: #6F89CD; box-shadow: 26px 0 0 #6F89CD; opacity: 0; transition: opacity 300ms ease 120ms; }
.creator-scene[data-creator-phase="1"][data-coder-progress="6"] .kit-exchange { border-color: transparent; }
.creator-scene[data-creator-phase="1"][data-coder-progress="6"] .kit-exchange::before,
.creator-scene[data-creator-phase="1"][data-coder-progress="6"] .kit-exchange::after { opacity: 1; }
@media (min-width:768px) { .kit-exchange::after { box-shadow: 54px 0 0 #6F89CD; } }
@media (prefers-reduced-motion:reduce) { .kit-exchange,.kit-exchange::before,.kit-exchange::after { transition: none; } }

/* Tutorial hints gently nudge sideways toward their links. */
@keyframes preview-tutorial-float { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* Directional chapter handoff: old components left, new components from right. */
.presentation.chapter-crossfading .explain-overview .path-origin,
.presentation.chapter-crossfading .explain-overview .employee-platform,
.presentation.chapter-crossfading .explain-overview .employee-path-takeaway { animation: none; }
.presentation .explain-overview.chapter-entered .path-origin,
.presentation .explain-overview.chapter-entered .employee-platform,
.presentation .explain-overview.chapter-entered .employee-path-takeaway { animation: none; }

/* Once the store has opened, its tutorial does not reappear during the exit. */
.creator-scene[data-creator-step="6"] .store-open-hint { display: none; }

/* Temporary, inert snapshots carry the demo objects into the architecture. */
.presentation .scene.morph-flight-scope { display: block; position: fixed; inset: 0; z-index: 80; width: 100vw; height: 100dvh; padding: 0; margin: 0; transform: none; pointer-events: none; overflow: visible; }
.morph-flight { position: absolute; transform-origin: top left; overflow: hidden; pointer-events: none; }
.morph-flight>.pipeline-card { opacity: 1; }
.morph-flight .pipeline-icon::after,.morph-flight .kit-exchange,.morph-flight .govern-exchange,.morph-flight .store-open-hint { display: none !important; }

/* The same employee portrait remains in the architecture after the handoff. */
.path-symbol.employee-avatar-symbol { background: transparent; }
.path-symbol .architecture-employee-profile { width: 48px; height: 48px; stroke: none; }
.architecture-employee-profile .staff-stress { display: none; }
.architecture-employee-profile .staff-eyes,.architecture-employee-profile .staff-smile { opacity: 1; }
.architecture-employee-profile .staff-happy { opacity: .5; }

/* Match the traveling avatar exactly; no face fade on insertion or handoff. */
.path-symbol .architecture-employee-profile { border-radius: 50%; background: #E4EDFF; }
.architecture-employee-profile .staff-eyes,
.architecture-employee-profile .staff-smile,
.architecture-employee-profile .staff-happy,
.morph-flight .staff-eyes,
.morph-flight .staff-smile,
.morph-flight .staff-happy { transition: none; }

/* Returning from Why AEGIS restores the finished release without replaying motion. */
.creator-scene.restored-complete,
.creator-scene.restored-complete *,
.creator-scene.restored-complete *::before,
.creator-scene.restored-complete *::after { animation: none !important; transition: none !important; }

/* Give the feedback return line more breathing room below the cards. */
@media (min-width:768px) {
 .builder-feedback { bottom: -62px; height: 202px; }
 .builder-feedback svg { height: 202px; }
 .builder-feedback>span { top: 172px; }
}

/* Concrete app UI examples explain each part of the company path. */
.explain-overview .employee-capabilities article { padding: 18px 16px; }
.explain-overview .employee-capabilities h3 { font-size: 18px; line-height: 1.3; min-height: 70px; margin: 0 0 12px; }
.explain-overview .employee-capabilities p { font-size: 12px; line-height: 1.5; margin: 12px 0 18px; }
.capability-ui { width: 100%; height: 100px; box-sizing: border-box; border-radius: 10px; background: #101B34; padding: 10px; color: #E4E9FF; }
.connection-ui,.checks-ui { display: flex; flex-direction: column; justify-content: space-between; }
.connection-ui>div,.checks-ui>div { display: flex; align-items: center; gap: 7px; font-size: 10px; min-height: 23px; }
.capability-ui i { font-style: normal; color: #78DEBC; }
.connection-ui i { margin-left: auto; }
.mini-app-symbol { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: #83DFFF; background: #25365B; font-size: 14px; }
.checks-ui b { font-size: 8px; font-weight: 500; color: #78DEBC; margin-left: auto; }
.store-ui { display: grid; grid-template-columns: 28px 1fr; align-content: center; gap: 7px; }
.mini-store-icon { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg,#1737C8,#018FFF); display: grid; place-items: center; }
.mini-store-icon svg { width: 21px; height: 21px; stroke: #E4E9FF; stroke-width: 1.6; }
.store-ui>b { font-size: 10px; line-height: 1.3; align-self: center; }
.mini-store-access { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; font-size: 8px; color: #BDC9E3; }
.mini-store-access i { width: 4px; height: 4px; border-radius: 50%; background: #78DEBC; }
.mini-store-open { grid-column: 1 / -1; font-size: 9px; color: #83DFFF; margin-top: 2px; }
@media(max-width:767px) { .explain-overview .employee-capabilities h3 { min-height: 0; } }

/* Enlarge the full AEGIS panel on hover without changing the diagram layout. */
@media (min-width:768px) and (hover:hover) and (pointer:fine) {
 .explain-overview .employee-platform {
  transform-origin: center;
  scale: 1;
  transition: scale 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms ease;
 }
 .explain-overview .employee-platform:hover {
  scale: 1.2;
  z-index: 5;
  box-shadow: 0 20px 56px rgba(0,16,60,.2);
 }
}
@media (prefers-reduced-motion:reduce) {
 .explain-overview .employee-platform { transition: none; }
}

/* Completed checks stay settled when the creation scene is shown for the handoff. */
.creator-scene[data-creator-phase="5"] .pipeline-checks li {
 animation: none;
 opacity: 1;
 transform: none;
}

/* Zoom only the AEGIS surface; its feedback route remains at diagram scale. */
.explain-overview .employee-platform,
.explain-overview .employee-platform:hover {
 padding: 0; background: transparent; box-shadow: none; scale: 1;
}
.platform-zoom-surface {
 padding: 24px 18px 18px; border-radius: 20px; background: #0E152D;
 box-shadow: 0 14px 36px rgba(0,16,60,.12); transform-origin: center;
}
@media (min-width:768px) and (hover:hover) and (pointer:fine) {
 .platform-zoom-surface { translate: 0 0; transition: scale 280ms cubic-bezier(.2,.7,.2,1),translate 280ms cubic-bezier(.2,.7,.2,1),box-shadow 280ms ease; }
 .explain-overview .employee-platform:hover .platform-zoom-surface { scale: 1.35; translate: -72px -32px; box-shadow: 0 20px 56px rgba(0,16,60,.2); }
 .explain-overview .explain-heading,
 .explain-overview .path-origin,
 .explain-overview .path-arrow,
 .explain-overview .builder-feedback,
 .explain-overview .employee-path-takeaway { transition: filter 280ms ease,opacity 280ms ease; }
 .explain-overview:has(.platform-zoom-surface:hover) .explain-heading,
 .explain-overview:has(.platform-zoom-surface:hover) .path-origin,
 .explain-overview:has(.platform-zoom-surface:hover) .path-arrow,
 .explain-overview:has(.platform-zoom-surface:hover) .builder-feedback,
 .explain-overview:has(.platform-zoom-surface:hover) .employee-path-takeaway { filter: blur(12px); opacity: .3; }
}
@media (prefers-reduced-motion:reduce) {
 .platform-zoom-surface,.explain-overview .explain-heading,.explain-overview .path-origin,
 .explain-overview .path-arrow,.explain-overview .builder-feedback,.explain-overview .employee-path-takeaway { transition: none; }
}

/* Explain the hover affordance without adding a separate action. */
.platform-zoom-surface { position: relative; }
.platform-zoom-hint { display: none; }
@media (min-width:768px) and (hover:hover) and (pointer:fine) {
 .platform-zoom-hint { position: absolute; top: 24px; right: 18px; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; line-height: 1.4; color: #83DFFF; pointer-events: none; opacity: .85; transition: opacity 160ms ease; }
 .platform-zoom-hint svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
 .employee-platform:hover .platform-zoom-hint { opacity: 0; }
}
@media (prefers-reduced-motion:reduce) { .platform-zoom-hint { transition: none; } }

/* Let the page 4 shadow and blur continue through the gap above navigation. */
@media (min-width:768px) {
 .presentation:has(.explain-overview.active) #main { overflow: visible; }
}

/* Builder Kit infographic: a work idea meets the company's catalog. */
.presentation .explain-builder { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 28px; align-content: center; }
.presentation .builder-graphic-heading h2 { font-size: 42px; line-height: 1.18; margin: 0; }
.presentation[data-lang=th] .builder-graphic-heading h2 { font-size: 36px; }
.builder-graphic-heading .eyebrow { font-size: 13px; margin-bottom: 16px; color: #1737C8; }
.builder-graphic { display: grid; grid-template-columns: 235px 60px 310px 60px minmax(0,1fr); align-items: center; gap: 14px; }
.builder-stage-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; color: #64738F; }
.builder-idea { text-align: center; }
.builder-person.creator-staff { width: 92px; height: 92px; margin: 20px auto 12px; }
.builder-employee-avatar { display: block; width: 100%; height: 100%; border-radius: 50%; background: #E4EDFF; }
.builder-idea-card { padding: 18px 15px; border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 8px 26px rgba(0,16,60,.06); }
.builder-idea-symbol { display: block; font-size: 23px; color: #1737C8; margin-bottom: 7px; }
.builder-idea-card b { font-size: 17px; }
.builder-idea-card p { font-size: 12px; line-height: 1.6; margin: 9px 0 0; color: #536083; }
.builder-idea-route svg,.builder-catalog-route svg { width: 60px; height: 24px; overflow: visible; stroke: #1685FA; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.builder-idea-route svg path:first-child,.builder-catalog-route svg path:first-child { stroke-dasharray: 4 5; }
.builder-kit-focus>.builder-stage-label { text-align: center; margin-bottom: 14px; }
.builder-kit-shell { padding: 20px; border-radius: 20px; background: #0E152D; color: #E4E9FF; box-shadow: 0 14px 36px rgba(0,16,60,.12); }
.builder-kit-identity { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.builder-kit-identity b { font-size: 19px; }
.builder-kit-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #25365B; color: #83DFFF; }
.builder-kit-mark svg,.catalog-icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.builder-kit-status { margin-left: auto; font-size: 9px; color: #78DEBC; opacity: 0; transition: opacity 250ms ease; }
.builder-kit-empty { color: #BDC9E3; font-size: 12px; margin: 0 0 14px; }
.builder-context-slots { display: flex; flex-direction: column; gap: 8px; }
.kit-context-slot { height: 35px; padding: 6px 10px; border-radius: 8px; background: #1A2544; display: flex; align-items: center; gap: 9px; font-size: 11px; color: #E4E9FF; opacity: .18; transition: opacity 260ms ease; }
.kit-context-slot>.catalog-icon { width: 24px; height: 24px; background: none; }
.kit-context-slot>.catalog-icon svg { width: 19px; height: 19px; }
.kit-context-slot i { margin-left: auto; font-style: normal; color: #78DEBC; }
.builder-ai-handoff { opacity: .16; transition: opacity 350ms ease,transform 350ms ease; transform: translateY(4px); }
.builder-handoff-line { display: block; color: #1685FA; text-align: center; font-size: 22px; line-height: 30px; }
.builder-ai-card { display: flex; align-items: center; gap: 10px; border-radius: 13px; background: rgba(255,255,255,.95); padding: 13px; box-shadow: 0 6px 20px rgba(0,16,60,.05); }
.builder-ai-mark { font-size: 18px; color: #1737C8; font-weight: 600; }
.builder-ai-card b { display: block; font-size: 14px; }
.builder-ai-card small { display: block; font-size: 10px; line-height: 1.45; color: #64738F; margin-top: 3px; }
.builder-ready-mark { margin-left: auto; color: #159878; font-size: 15px; }
.builder-catalog-header { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.builder-catalog-header small { font-size: 10px; color: #64738F; }
.builder-catalog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.catalog-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; min-height: 88px; padding: 13px; border-radius: 14px; background: rgba(255,255,255,.75); border: 1px solid rgba(137,160,208,.16); transition: opacity 300ms ease,background 300ms ease,border-color 300ms ease,box-shadow 300ms ease; }
.catalog-tile b { font-size: 11px; line-height: 1.4; font-weight: 500; color: #536083; }
.catalog-icon { width: 30px; height: 30px; display: grid; place-items: center; background: #E4EDFF; color: #1737C8; border-radius: 8px; flex-shrink: 0; }
.catalog-picked { position: absolute; top: 10px; right: 11px; color: #159878; opacity: 0; font-size: 12px; transition: opacity 250ms ease; }
.builder-catalog-note { font-size: 10px; color: #64738F; line-height: 1.5; margin: 12px 0 0; }
.builder-graphic-caption { text-align: center; }
.builder-graphic-caption p { display: none; font-size: 19px; line-height: 1.4; font-weight: 500; margin: 0 0 8px; }
.builder-graphic-caption small { font-size: 10px; color: #64738F; }
.explain-builder[data-builder-step="0"] [data-builder-caption="0"],.explain-builder[data-builder-step="1"] [data-builder-caption="1"],.explain-builder[data-builder-step="2"] [data-builder-caption="2"] { display: block; }
.explain-builder:not([data-builder-step="0"]) .catalog-match { background: #F4F8FF; border-color: #74A9FA; box-shadow: 0 3px 14px rgba(23,55,200,.08); }
.explain-builder:not([data-builder-step="0"]) .catalog-match .catalog-picked,.explain-builder:not([data-builder-step="0"]) .builder-kit-status { opacity: 1; }
.explain-builder:not([data-builder-step="0"]) .catalog-unused { opacity: .3; }
.explain-builder:not([data-builder-step="0"]) .kit-context-slot { opacity: 1; }
.explain-builder[data-builder-step="1"] .kit-context-slot:nth-child(1) { transition-delay: 500ms; }
.explain-builder[data-builder-step="1"] .kit-context-slot:nth-child(2) { transition-delay: 620ms; }
.explain-builder[data-builder-step="1"] .kit-context-slot:nth-child(3) { transition-delay: 740ms; }
.explain-builder[data-builder-step="1"] .kit-context-slot:nth-child(4) { transition-delay: 860ms; }
.explain-builder[data-builder-step="2"] .builder-ai-handoff { opacity: 1; transform: none; }
.builder-catalog-flight { position: fixed; z-index: 90; pointer-events: none; display: grid; place-items: center; background: #E4EDFF; border-radius: 8px; color: #1737C8; transform-origin: top left; }
.builder-catalog-flight svg { width: 75%; height: 75%; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion:no-preference) {
 .explain-builder.active[data-builder-step="1"] .builder-catalog-route svg path:first-child,.explain-builder.active[data-builder-step="2"] .builder-idea-route svg path:first-child { animation: employee-path-dashes 900ms linear infinite; }
}
@media (max-width:767px) {
 .presentation .explain-builder { display: none; }
 .presentation .explain-builder.active { display: flex; flex-direction: column; gap: 22px; }
 .presentation .builder-graphic-heading h2 { font-size: 30px; }
 .presentation[data-lang=th] .builder-graphic-heading h2 { font-size: 26px; }
 .builder-graphic { display: flex; flex-direction: column; gap: 18px; width: 100%; }
 .builder-idea,.builder-kit-focus,.builder-company-catalog { width: 100%; }
 .builder-person.creator-staff { width: 66px; height: 66px; }
 .builder-idea-route,.builder-catalog-route { transform: rotate(90deg); }
 .builder-catalog-route { order: 3; transform: rotate(-90deg); }
 .builder-company-catalog { order: 2; }
 .builder-kit-focus { order: 4; }
 .builder-graphic-caption p { font-size: 16px; }
}
@media (prefers-reduced-motion:reduce) {
 .explain-builder * { transition: none !important; }
}
.builder-kit-shell .kit-context-slot>.catalog-icon { color: #83DFFF; }

/* A quiet chapter break before the Builder Kit and release details. */
.presentation .how-it-works-divider { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.how-divider-copy { width: 100%; }
.presentation .how-it-works-divider .eyebrow { justify-content: center; font-size: 12px; color: #64738F; letter-spacing: 1.8px; margin-bottom: 25px; }
.presentation .how-it-works-divider h2 { font-size: 88px; line-height: 1.1; letter-spacing: -2.8px; margin: 0 0 26px; }
.presentation[data-lang=th] .how-it-works-divider h2 { font-size: 64px; letter-spacing: -1px; }
.how-divider-subtitle { font-size: 23px; color: #536083; margin: 0; line-height: 1.5; }
.how-divider-route { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 64px; font-size: 14px; color: #536083; }
.how-divider-route i { font-style: normal; color: #1685FA; }
@media (prefers-reduced-motion:no-preference) {
 .how-it-works-divider.active .how-divider-copy { animation: employee-path-fade 300ms ease both; }
}
@media (max-width:767px) {
 .presentation .how-it-works-divider h2 { font-size: 52px; letter-spacing: -1.5px; }
 .presentation[data-lang=th] .how-it-works-divider h2 { font-size: 36px; }
 .how-divider-subtitle { font-size: 18px; }
 .how-divider-route { flex-direction: column; gap: 12px; margin-top: 40px; font-size: 13px; }
 .how-divider-route i { transform: rotate(90deg); }
}

/* Shared baselines: idea → Builder Kit → coder, with the catalog feeding upward. */
@media (min-width:768px) {
 .presentation .explain-builder { gap: 30px; }
 .builder-graphic { grid-template-columns: 260px 60px 310px 60px 260px; grid-template-rows: 22px 200px 30px auto; gap: 10px 20px; justify-content: center; align-items: center; }
 .builder-idea { grid-column: 1; grid-row: 2; position: relative; height: 200px; }
 .builder-idea>.builder-stage-label,.builder-kit-focus>.builder-stage-label,.builder-ai-handoff>.builder-stage-label { position: absolute; top: -32px; left: 0; right: 0; margin: 0; text-align: center; line-height: 22px; }
 .builder-person.creator-staff { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; margin: 0; }
 .builder-idea-card { height: 200px; padding: 91px 15px 16px; }
 .builder-idea-symbol { display: none; }
 .builder-idea-card b { font-size: 18px; }
 .builder-idea-card p { margin-top: 10px; }
 .builder-idea-route { grid-column: 2; grid-row: 2; }
 .builder-kit-focus { grid-column: 3; grid-row: 2; position: relative; height: 200px; }
 .builder-kit-shell { height: 200px; padding: 18px; }
 .builder-kit-identity { margin-bottom: 12px; }
 .builder-kit-empty { font-size: 11px; margin-bottom: 12px; }
 .builder-context-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 .kit-context-slot { height: 37px; padding: 6px 7px; gap: 5px; font-size: 9px; }
 .kit-context-slot>.catalog-icon { width: 19px; height: 19px; }
 .kit-context-slot>.catalog-icon svg { width: 17px; height: 17px; }
 .builder-ai-handoff { grid-column: 5; grid-row: 2; position: relative; height: 200px; transform: none; }
 .builder-output-route { grid-column: 4; grid-row: 2; opacity: .2; transition: opacity 300ms ease; }
 .builder-ai-card { height: 200px; padding: 20px; flex-direction: column; justify-content: center; text-align: center; gap: 14px; }
 .builder-ai-mark { font-size: 30px; }
 .builder-ai-card b { font-size: 21px; }
 .builder-ai-card small { font-size: 12px; line-height: 1.6; margin-top: 8px; }
 .builder-ready-mark { position: absolute; top: 15px; right: 17px; margin: 0; }
 .builder-catalog-route { grid-column: 3; grid-row: 3; justify-self: center; transform: none; }
 .builder-catalog-route svg { width: 24px; height: 30px; }
 .builder-company-catalog { grid-column: 1 / -1; grid-row: 4; width: 940px; max-width: 100%; justify-self: center; }
 .builder-catalog-header { flex-direction: row; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
 .builder-catalog-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
 .catalog-tile { min-height: 74px; padding: 10px 12px; gap: 7px; }
 .catalog-tile b { font-size: 10px; }
 .catalog-icon { width: 27px; height: 27px; }
 .builder-catalog-note { display: none; }
 .builder-graphic-caption p { font-size: 18px; }
 .explain-builder[data-builder-step="2"] .builder-output-route { opacity: 1; }
}
.builder-output-route svg { width: 60px; height: 24px; stroke: #1685FA; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.builder-output-route svg path:first-child { stroke-dasharray: 4 5; }
@media(prefers-reduced-motion:no-preference) { .explain-builder.active[data-builder-step="2"] .builder-output-route svg path:first-child { animation: employee-path-dashes 900ms linear infinite; } }
@media(max-width:767px) {
 .builder-ai-handoff { order: 6; width: 100%; }
 .builder-output-route { order: 5; transform: rotate(90deg); }
 .builder-ai-handoff>.builder-stage-label { text-align: center; margin-bottom: 12px; }
 .builder-catalog-route { transform: none; }
 .builder-catalog-route svg { width: 24px; height: 36px; }
}

/* The employee talks to the AI coder; the coder works with Builder Kit. */
.builder-ai-handoff { opacity: 1; transform: none; }
.builder-ready-mark { opacity: 0; transition: opacity 250ms ease; }
.explain-builder[data-builder-step="2"] .builder-ready-mark { opacity: 1; }
.builder-output-route { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.builder-output-route svg { height: 40px; overflow: visible; }
.builder-output-route .kit-context-line { stroke-dasharray: 4 5; }
.builder-output-route small { font-size: 9px; line-height: 1.4; color: #64738F; text-align: center; white-space: nowrap; }
.explain-builder:not([data-builder-step="0"]) .builder-output-route { opacity: 1; }
@media(min-width:768px) {
 .builder-graphic { grid-template-columns: 260px 60px 260px 90px 310px; }
 .builder-ai-handoff { grid-column: 3; }
 .builder-kit-focus { grid-column: 5; }
 .builder-catalog-route { grid-column: 5; }
}
@media(prefers-reduced-motion:no-preference) {
 .explain-builder.active:not([data-builder-step="0"]) .builder-output-route .kit-request-line { animation: employee-path-dashes 1100ms linear infinite; }
 .explain-builder.active:not([data-builder-step="0"]) .builder-output-route .kit-context-line { animation: employee-path-dashes 1100ms linear infinite; }
}
@media(max-width:767px) {
 .builder-idea { order: 0; }
 .builder-idea-route { order: 1; }
 .builder-ai-handoff { order: 2; }
 .builder-output-route { order: 3; height: 65px; justify-content: center; transform: none; }
 .builder-output-route svg { transform: rotate(90deg); width: 55px; height: 32px; }
 .builder-output-route small { margin-top: 12px; }
 .builder-kit-focus { order: 4; }
 .builder-catalog-route { order: 5; }
 .builder-company-catalog { order: 6; }
}

/* Keep company catalog directly beneath Builder Kit, in two rows. */
@media(min-width:768px) {
 .builder-company-catalog { grid-column: 5; width: 100%; }
 .builder-catalog-header { flex-direction: column; gap: 5px; margin-bottom: 12px; }
 .builder-catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
 .builder-company-catalog .catalog-tile { min-height: 68px; padding: 9px; gap: 6px; }
 .builder-company-catalog .catalog-tile b { font-size: 9px; }
 .builder-company-catalog .catalog-icon { width: 24px; height: 24px; }
 .builder-company-catalog .catalog-icon svg { width: 19px; height: 19px; }
}
@media(max-width:767px) {
 .builder-catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
 .builder-company-catalog .catalog-tile { min-height: 76px; padding: 10px; }
}

/* Company catalog feeds Builder Kit from above. */
@media(min-width:768px) {
 .builder-graphic { grid-template-rows: auto 28px 22px 200px; }
 .builder-company-catalog { grid-column: 5; grid-row: 1; }
 .builder-catalog-route { grid-column: 5; grid-row: 2; transform: rotate(180deg); }
 .builder-idea,.builder-ai-handoff,.builder-kit-focus,.builder-idea-route,.builder-output-route { grid-row: 4; }
}
@media(max-width:767px) {
 .builder-company-catalog { order: 4; }
 .builder-catalog-route { order: 5; transform: rotate(180deg); }
 .builder-kit-focus { order: 6; }
}

/* Share the upper row between the heading and catalog; align the main flow below. */
@media(min-width:768px) {
 .presentation .explain-builder { grid-template-rows: auto auto; gap: 30px; }
 .builder-graphic { grid-template-rows: auto 28px 22px 200px; }
 .builder-graphic-heading { grid-column: 1 / 5; grid-row: 1; align-self: center; padding-right: 30px; }
 .builder-graphic-heading .eyebrow { margin-bottom: 18px; }
 .builder-company-catalog { align-self: center; }
 .builder-idea>.builder-stage-label,.builder-ai-handoff>.builder-stage-label,.builder-kit-focus>.builder-stage-label { top: -30px; }
}
@media(max-width:767px) {
 .builder-graphic-heading { order: -1; width: 100%; margin-bottom: 8px; }
}

/* Two-way conversation starts with the employee's idea in step 1. */
.builder-idea-route svg { height: 40px; }
.builder-idea-route .employee-coder-message { stroke-dasharray: 4 5; }
@media(prefers-reduced-motion:no-preference) {
 .explain-builder.active .builder-idea-route .employee-coder-message { animation: employee-path-dashes 1100ms linear infinite; }
}

/* Reveal the explanation beneath its own block, in narrative order. */
.builder-block-caption { margin: 20px 0 0; font-size: 14px; line-height: 1.55; text-align: center; font-weight: 500; opacity: 0; transform: translateY(6px); transition: opacity 300ms ease,transform 300ms ease; }
.explain-builder [data-builder-caption="0"] { opacity: 1; transform: none; }
.explain-builder:not([data-builder-step="0"]) [data-builder-caption="1"],.explain-builder[data-builder-step="2"] [data-builder-caption="2"] { opacity: 1; transform: none; }
.explain-builder[data-builder-step="1"] .catalog-match { background: rgba(255,255,255,.75); border-color: rgba(137,160,208,.16); box-shadow: none; }
.explain-builder[data-builder-step="1"] .catalog-match .catalog-picked,.explain-builder[data-builder-step="1"] .builder-kit-status { opacity: 0; }
.explain-builder[data-builder-step="1"] .catalog-unused { opacity: 1; }
.explain-builder[data-builder-step="1"] .kit-context-slot { opacity: .18; transition-delay: 0ms; }
.explain-builder[data-builder-step="2"] .kit-context-slot { transition-delay: 600ms; }
.builder-ai-context { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; opacity: 0; transition: opacity 250ms ease; }
.builder-ai-context>span { background: #E4EDFF; color: #1737C8; border-radius: 5px; font-size: 8px; padding: 4px 5px; }
.explain-builder[data-builder-step="2"] .builder-ai-context { opacity: 1; transition-delay: 1550ms; }
.explain-builder[data-builder-step="2"] .builder-ready-mark { transition-delay: 1550ms; }
@media(min-width:768px) {
 .builder-graphic { grid-template-rows: auto 28px 22px 200px 90px; }
 .builder-block-caption { position: absolute; top: 100%; left: 0; right: 0; }
 .builder-ai-card { gap: 10px; }
}
@media(max-width:767px) { .builder-block-caption { margin: 14px 0 0; font-size: 14px; } }

/* Kit starts as a simple peer of the coder, then reveals its matched context. */
.builder-kit-shell { position: relative; overflow: hidden; }
.builder-kit-identity { position: absolute; inset: 0; margin: 0; display: block; }
.builder-kit-mark { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); width: 38px; height: 38px; transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.builder-kit-identity>b { position: absolute; left: 50%; top: 89px; transform: translateX(-50%); font-size: 21px; white-space: nowrap; transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.builder-kit-status { position: absolute; right: 18px; top: 30px; }
.builder-kit-empty { position: absolute; left: 18px; right: 18px; top: 137px; margin: 0; text-align: center; font-size: 12px; transition: transform 400ms cubic-bezier(.2,.8,.2,1),opacity 250ms ease; }
.builder-context-slots { position: absolute; left: 18px; right: 18px; top: 93px; opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity 300ms ease,transform 300ms ease,visibility 0s 300ms; }
.explain-builder[data-builder-step="2"] .builder-kit-mark { transform: translateX(calc(-50% - 118px)) translateY(-12px); }
.explain-builder[data-builder-step="2"] .builder-kit-identity>b { transform: translateX(calc(-50% + 15px)) translateY(-63px); }
.explain-builder[data-builder-step="2"] .builder-kit-empty { transform: translateY(-65px); text-align: left; font-size: 11px; }
.explain-builder[data-builder-step="2"] .builder-context-slots { opacity: 1; transform: none; visibility: visible; transition-delay: 350ms; }
@media(max-width:767px) {
 .builder-kit-shell { min-height: 220px; }
 .builder-context-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 .kit-context-slot { font-size: 10px; padding: 6px; gap: 5px; }
 .explain-builder[data-builder-step="2"] .builder-kit-mark { transform: translateX(calc(-50% - 90px)) translateY(-12px); }
 .explain-builder[data-builder-step="2"] .builder-kit-identity>b { transform: translateX(calc(-50% + 16px)) translateY(-63px); }
}
.explain-builder[data-builder-step="2"] .builder-kit-identity>b { transform: translateX(calc(-50% - 40px)) translateY(-63px); }
@media(max-width:767px) {
 .builder-kit-status { display: none; }
 .explain-builder[data-builder-step="2"] .builder-kit-identity>b { font-size: 18px; transform: translateX(calc(-50% - 15px)) translateY(-63px); }
}

/* Ask the Kit first; show its response only when context returns in step 3. */
.builder-output-route .kit-context-line,.builder-output-route svg path:last-child { opacity: 0; transition: opacity 250ms ease; }
.explain-builder[data-builder-step="2"] .builder-output-route .kit-context-line,.explain-builder[data-builder-step="2"] .builder-output-route svg path:last-child { opacity: 1; transition-delay: 1000ms; }
.explain-builder[data-builder-step="0"] .builder-output-route { opacity: 0; }
@media(prefers-reduced-motion:reduce) {
 .builder-output-route .kit-context-line,.builder-output-route svg path:last-child { transition: none !important; }
}

/* Match the coder and unopened Kit typography on the same baselines. */
.builder-ai-card { position: relative; }
.builder-ai-card>.builder-ai-mark { position: absolute; top: 34px; left: 0; right: 0; height: 38px; line-height: 38px; text-align: center; }
.builder-ai-card>div:not(.builder-ai-context) { position: absolute; inset: 0; }
.builder-ai-card>div:not(.builder-ai-context)>b { position: absolute; top: 89px; left: 0; right: 0; font-size: 21px; line-height: 1.3; }
.builder-ai-card>div:not(.builder-ai-context)>small { position: absolute; top: 137px; left: 18px; right: 18px; margin: 0; font-size: 12px; line-height: 1.5; }
.builder-kit-identity>b { line-height: 1.3; }
.builder-kit-empty { line-height: 1.5; }
.builder-ai-card>.builder-ai-context { position: absolute; left: 14px; right: 14px; bottom: 14px; }
@media(max-width:767px) { .builder-ai-card { min-height: 220px; } }

/* Step 2 asks only. Step 3 retrieves catalog context, then sends it back. */
.builder-catalog-route { opacity: 0; transition: opacity 150ms ease; }
.explain-builder[data-builder-step="2"] .builder-catalog-route { opacity: 1; }
.builder-context-slots { transform: none; }
.explain-builder[data-builder-step="2"] .builder-context-slots { transition-delay: 600ms; }
.explain-builder[data-builder-step="2"] .kit-context-slot { transition-delay: 600ms; }
.explain-builder[data-builder-step="2"] .kit-context-slot:nth-child(2) { transition-delay: 720ms; }
.explain-builder[data-builder-step="2"] .kit-context-slot:nth-child(3) { transition-delay: 840ms; }
.explain-builder[data-builder-step="2"] .kit-context-slot:nth-child(4) { transition-delay: 960ms; }
.explain-builder[data-builder-step="2"] .builder-kit-status { transition-delay: 1100ms; }
.explain-builder[data-builder-step="2"] .builder-output-route .kit-context-line,.explain-builder[data-builder-step="2"] .builder-output-route svg path:last-child { transition-delay: 1250ms; }
.explain-builder[data-builder-step="2"] .builder-ai-context,.explain-builder[data-builder-step="2"] .builder-ready-mark { transition-delay: 2100ms; }
@keyframes kit-catalog-line-down { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media(prefers-reduced-motion:no-preference) {
 .explain-builder.active .builder-catalog-route svg path:first-child,.explain-builder.active .builder-output-route .kit-context-line { animation: none; }
 .explain-builder.active[data-builder-step="2"] .builder-catalog-route svg { animation: kit-catalog-line-down 300ms ease-out both; }
 .explain-builder.active[data-builder-step="2"] .builder-catalog-route svg path:first-child { animation: employee-path-dashes 900ms linear infinite; }
 .explain-builder.active[data-builder-step="2"] .builder-output-route .kit-request-line { animation: none; }
 .explain-builder.active[data-builder-step="2"] .builder-output-route .kit-context-line { animation: employee-path-dashes 1100ms linear 1250ms infinite; }
}

/* Return recognizable catalog icons to the coder; keep labels inside the Kit. */
.builder-ai-context>span { display: grid; place-items: center; width: 34px; height: 34px; padding: 6px; border-radius: 8px; }
.builder-ai-context svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.builder-ai-context .ai-context-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.builder-ai-card>.builder-ai-context { bottom: 8px; gap: 7px; }

/* Each traveling icon settles directly into its own coder slot without blinking. */
.explain-builder[data-builder-step="2"] .builder-ai-context { opacity: 1; transition: none; }
.builder-ai-context>[data-ai-context] { opacity: 0; transition: none; }
.explain-builder[data-builder-step="2"] .builder-ai-context>.context-arrived { opacity: 1; }
.builder-coder-flight { border-radius: 8px; background: #E4EDFF; }
.builder-coder-flight svg { width: 22px; height: 22px; }
@media(prefers-reduced-motion:reduce) {
 .explain-builder[data-builder-step="2"] .builder-ai-context>[data-ai-context] { opacity: 1; }
}

/* Keep peer subtitles close to their titles before the Kit opens. */
.builder-ai-card>div:not(.builder-ai-context)>small { top: 124px; }
.explain-builder:not([data-builder-step="2"]) .builder-kit-empty { top: 124px; }

/* Give the three block explanations more breathing room below their cards. */
@media(min-width:768px) {
 .builder-block-caption { margin-top: 34px; }
}
@media(max-width:767px) {
 .builder-block-caption { margin-top: 24px; }
}

/* Keep catalog retrieval close to the coder's request. */
.explain-builder[data-builder-step="2"] .builder-output-route .kit-context-line,.explain-builder[data-builder-step="2"] .builder-output-route svg path:last-child { transition-delay: 1100ms; }
.explain-builder[data-builder-step="2"] .builder-ready-mark { transition-delay: 1950ms; }
@media(prefers-reduced-motion:no-preference) {
 .explain-builder.active[data-builder-step="2"] .builder-output-route .kit-context-line { animation-delay: 1100ms; }
}

/* Release follows the same company-context diagram language as Builder Kit. */
.presentation .explain-release { grid-template-columns: 1fr; grid-template-rows: auto; align-content: center; }
.release-graphic { display: grid; grid-template-columns: 260px 50px 340px 50px 260px; grid-template-rows: auto 38px 200px 90px; gap: 14px 16px; justify-content: center; align-items: center; }
.release-heading { grid-column: 1 / 3; grid-row: 1; align-self: center; }
.release-heading .eyebrow { color: #1737C8; font-size: 13px; margin-bottom: 18px; }
.presentation .release-heading h2 { font-size: 32px; line-height: 1.2; margin: 0; letter-spacing: -.8px; }
.presentation[data-lang=th] .release-heading h2 { font-size: 30px; }
.release-policy-catalog { grid-column: 3; grid-row: 1; text-align: center; }
.release-policy-catalog>p { margin: 0 0 6px; }
.release-policy-catalog>small { font-size: 10px; color: #64738F; }
.release-policy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.release-policy { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px; min-height: 65px; border-radius: 14px; background: rgba(255,255,255,.8); }
.release-policy>span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #E4EDFF; color: #1737C8; font-size: 16px; }
.release-policy>b { font-size: 9px; font-weight: 500; color: #536083; }
.release-policy-route { grid-column: 3; grid-row: 2; justify-self: center; opacity: 0; }
.release-policy-route svg { width: 24px; height: 32px; stroke: #1685FA; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.release-policy-route svg path:first-child { stroke-dasharray: 4 5; }
.release-source,.release-agent,.release-store { position: relative; grid-row: 3; height: 200px; }
.release-source { grid-column: 1; }.release-agent { grid-column: 3; }.release-store { grid-column: 5; }
.release-source>.builder-stage-label,.release-agent>.builder-stage-label,.release-store>.builder-stage-label { position: absolute; top: -26px; left: 0; right: 0; margin: 0; text-align: center; font-size: 9px; }
.release-source-card,.release-agent-card,.release-store-card { height: 200px; border-radius: 20px; padding: 18px; box-shadow: 0 12px 34px rgba(0,16,60,.08); position: relative; }
.release-source-card { background: #FFFFFF; text-align: center; }
.release-coder-mark { font-size: 30px; line-height: 38px; color: #1737C8; display: block; margin-bottom: 9px; }
.release-source-card>b { font-size: 21px; }
.release-app-file { display: flex; gap: 8px; align-items: center; text-align: left; padding: 10px; border-radius: 10px; background: #F2F6FD; margin-top: 15px; font-size: 10px; font-weight: 500; }
.release-app-file small,.release-published-app small { display: block; font-size: 9px; color: #64738F; margin-top: 5px; font-weight: 400; }
.release-app-file svg,.release-published-app svg { width: 28px; height: 28px; flex-shrink: 0; color: #1737C8; stroke: currentColor; stroke-width: 1.6; }
.release-agent-card { background: #0E152D; color: #E4E9FF; }
.release-agent-mark { position: absolute; top: 34px; left: calc(50% - 19px); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #25365B; color: #83DFFF; transition: transform 400ms ease; }
.release-agent-mark svg,.release-store-mark svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.release-agent-card>b { position: absolute; top: 89px; left: 0; right: 0; text-align: center; font-size: 20px; transition: transform 400ms ease; }
.release-agent-subtitle { position: absolute; top: 124px; left: 18px; right: 18px; margin: 0; text-align: center; color: #BDC9E3; font-size: 11px; transition: opacity 200ms ease; }
.release-checklist { position: absolute; top: 76px; left: 18px; right: 18px; opacity: 0; }
.release-check { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #1A2544; border-radius: 8px; padding: 8px 10px; font-size: 11px; margin-bottom: 7px; }
.release-check i { font-style: normal; color: #78DEBC; font-size: 10px; opacity: 0; }
.release-store-card { background: #FFFFFF; text-align: center; }
.release-store-mark { display: grid; place-items: center; margin: 6px auto 12px; width: 38px; height: 38px; border-radius: 10px; background: #E4EDFF; color: #1737C8; }
.release-store-card>b { font-size: 19px; }
.release-store-card>p { font-size: 11px; color: #64738F; margin: 10px 0; }
.release-published-app { display: flex; align-items: center; gap: 9px; text-align: left; padding: 10px; border-radius: 10px; background: var(--aegis-heading-gradient); color: #F4F8FF; font-size: 10px; font-weight: 600; opacity: 0; }
.release-published-app svg { color: #F4F8FF; width: 24px; height: 24px; }
.release-published-app small { color: #D8F5FF; }
.release-arrow { grid-column: 2; grid-row: 3; }
.release-store-route { grid-column: 4; opacity: .2; }
.release-arrow svg { width: 50px; height: 24px; stroke: #1685FA; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.release-arrow svg path:first-child { stroke-dasharray: 4 5; }
.release-block-caption { position: absolute; top: 100%; left: 0; right: 0; margin: 34px 0 0; font-size: 14px; line-height: 1.5; text-align: center; font-weight: 500; }
.release-agent .release-block-caption,.release-store .release-block-caption { opacity: 0; }
.explain-release[data-release-step="1"] .release-agent-mark { transform: translate(-128px,-12px); }
.explain-release[data-release-step="1"] .release-agent-card>b { transform: translate(12px,-62px); }
.explain-release[data-release-step="1"] .release-agent-subtitle { opacity: 0; }
.explain-release[data-release-step="1"] .release-policy-route,.explain-release[data-release-step="1"] .release-checklist,.explain-release[data-release-step="1"] .release-check i,.explain-release[data-release-step="1"] .release-published-app,.explain-release[data-release-step="1"] .release-store-route,.explain-release[data-release-step="1"] .release-block-caption { opacity: 1; }
@keyframes release-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media(prefers-reduced-motion:no-preference) {
 .explain-release.active .release-source+.release-arrow svg path:first-child { animation: employee-path-dashes 1000ms linear infinite; }
 .explain-release.active[data-release-step="1"] .release-policy-route { animation: release-reveal 250ms ease both; }
 .explain-release.active[data-release-step="1"] .release-policy-route svg path:first-child { animation: employee-path-dashes 900ms linear infinite; }
 .explain-release.active[data-release-step="1"] .release-checklist { animation: release-reveal 300ms ease 350ms both; }
 .explain-release.active[data-release-step="1"] .release-check:nth-child(1) i { animation: release-reveal 250ms ease 650ms both; }
 .explain-release.active[data-release-step="1"] .release-check:nth-child(2) i { animation: release-reveal 250ms ease 1050ms both; }
 .explain-release.active[data-release-step="1"] .release-check:nth-child(3) i { animation: release-reveal 250ms ease 1450ms both; }
 .explain-release.active[data-release-step="1"] .release-store-route { animation: release-reveal 250ms ease 1750ms both; }
 .explain-release.active[data-release-step="1"] .release-store-route svg path:first-child { animation: employee-path-dashes 900ms linear 1750ms infinite; }
 .explain-release.active[data-release-step="1"] .release-published-app { animation: release-reveal 400ms ease 1900ms both; }
 .explain-release.active[data-release-step="1"] .release-agent .release-block-caption { animation: release-reveal 300ms ease both; }
 .explain-release.active[data-release-step="1"] .release-store .release-block-caption { animation: release-reveal 300ms ease 1900ms both; }
}
@media(max-width:767px) {
 .presentation .explain-release.active { display: flex; flex-direction: column; }
 .release-graphic { display: flex; flex-direction: column; gap: 28px; width: 100%; }
 .release-heading { width: 100%; order: 0; }
 .release-source { order: 1; }.release-source+.release-arrow { order: 2; }
 .release-policy-catalog { width: 100%; order: 3; }.release-policy-route { order: 4; }.release-agent { order: 5; }.release-store-route { order: 6; }.release-store { order: 7; }
 .release-source,.release-agent,.release-store { height: auto; width: 100%; margin-top: 18px; }
 .release-block-caption { position: static; margin-top: 24px; }
 .release-arrow { transform: rotate(90deg); }
 .release-policy-route { margin-bottom: 5px; }
 .explain-release[data-release-step="1"] .release-agent-mark { transform: translate(-96px,-12px); }
 .explain-release[data-release-step="1"] .release-agent-card>b { font-size: 17px; transform: translate(18px,-62px); }
}
@media(prefers-reduced-motion:reduce) {
 .release-graphic * { animation: none !important; transition: none !important; }
}
.release-store-card>p { margin: 6px 0; }
.release-store-mark { margin-top: 4px; }
.release-checklist { top: 72px; }

/* Two clear entry paths: watch the overview or explore the demo. */
.cover-play { width: auto; height: 56px; padding: 0 24px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border-radius: 100px; }
.cover-play svg { width: 23px; height: 23px; margin: 0; flex-shrink: 0; }
.cover-play-label { font-size: 17px; font-weight: 500; white-space: nowrap; }
#nextScene [hidden] { display: none; }
@media(max-width:767px) { .cover-play { height: 44px; padding: 0 18px; gap: 8px; } .cover-play-label { font-size: 13px; } .cover-play svg { width: 19px; height: 19px; margin: 0; } }

/* Keep the coder fixed while its context icons arrive. */
.builder-ai-card>.builder-ai-context { bottom: 14px; gap: 12px; }

/* Release: centered story, company rules beneath the pipeline, AEGIS store. */
@media(min-width:768px) {
 .release-graphic { grid-template-rows: 100px 26px 200px 36px 154px; gap: 14px 16px; }
 .release-heading { grid-column: 1 / 6; grid-row: 1; text-align: center; }
 .release-heading .eyebrow { margin-bottom: 12px; }
 .presentation .release-heading h2 { font-size: 38px; }
 .release-policy-catalog { grid-column: 3; grid-row: 5; }
 .release-policy-route { grid-column: 3; grid-row: 4; }
 .release-agent .release-block-caption { display: none; }
 .release-policy-grid { margin-top: 8px; }
 .release-policy { min-height: 52px; padding: 8px; gap: 4px; }
}
.release-policy-route svg { transform: rotate(180deg); }
.release-store-card { background: var(--aegis-heading-gradient); color: #F4F8FF; }
.release-store-mark { background: rgba(244,248,255,.18); color: #F4F8FF; }
.release-store-card>.release-store-provider { color: #D8F5FF; }
.release-published-app { background: rgba(244,248,255,.16); }
.release-coder-traveler .builder-ai-card { margin: 0; box-sizing: border-box; }
@media(max-width:767px) {
 .release-heading { text-align: center; }
 .release-agent { order: 3; }
 .release-policy-route { order: 4; }
 .release-policy-catalog { order: 5; }
}
.release-heading .eyebrow { display: block; text-align: center; }

/* The same coder card carries its received context into the release chapter. */
.release-source-card.builder-ai-card { display: block; padding: 20px; }
.release-source-card .builder-ai-context,
.release-source-card .builder-ai-context>span { opacity: 1; transition: none; }
.release-source-card .builder-ready-mark { opacity: 1; }

/* Spread the release path across the stage and separate its three levels. */
@media(min-width:768px) {
 .release-graphic { grid-template-columns: 260px 100px 340px 100px 260px; grid-template-rows: 100px 44px 200px 48px 154px; gap: 16px 20px; }
 .release-arrow { justify-self: center; }
 .release-arrow svg { width: 82px; }
 .release-policy-route svg { height: 42px; }
 .release-policy-grid { gap: 10px; }
 .release-block-caption { margin-top: 28px; }
}

/* Governance is a separate input to the pipeline, outside its process card. */
.release-policy-catalog { padding: 14px 16px; border-radius: 18px; background: rgba(246,249,255,.58); border: 1px solid rgba(105,137,191,.2); }
.release-policy-catalog>.builder-stage-label { font-size: 10px; color: #536083; letter-spacing: 1.1px; }
.release-policy-catalog .release-policy-grid { margin-top: 10px; }
.release-policy-catalog .release-policy { background: rgba(246,249,255,.9); min-height: 46px; padding: 7px 9px; }
.release-policy-route { opacity: .5; }
@media(min-width:768px) {
 .release-graphic { grid-template-rows: 100px 36px 200px 48px 174px; }
 .release-policy-catalog { width: 420px; justify-self: center; }
 .release-policy-route { align-self: stretch; display: grid; place-items: center; }
 .release-policy-route svg { height: 46px; }
}
@media(max-width:767px) {
 .release-policy-catalog { box-sizing: border-box; }
}

/* Independent governance cards, scanned one at a time by the release agent. */
.release-policy-catalog { padding: 0; border: 0; background: transparent; border-radius: 0; }
.release-policy-catalog .release-policy { position: relative; background: rgba(246,249,255,.9); transition: background 180ms ease,box-shadow 180ms ease; }
.release-policy.is-scanning { background: #E4EDFF; box-shadow: 0 0 0 2px #1685FA,0 5px 18px rgba(22,133,250,.12); }
.release-policy.is-passed::after { content: '✓'; position: absolute; right: 9px; top: 8px; color: #159878; font-size: 12px; }
.explain-release .release-policy-route { opacity: 0 !important; animation: none !important; }
.release-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; top: 72px; }
.release-check { padding: 7px 8px; margin: 0; gap: 4px; font-size: 9px; opacity: .35; transition: opacity 180ms ease,background 180ms ease; }
.release-check i { font-size: 8px; white-space: nowrap; }
.explain-release[data-release-step="1"] .release-check i { opacity: 0; animation: none; }
.explain-release[data-release-step="1"] .release-check.is-passed { opacity: 1; background: #20374A; }
.explain-release[data-release-step="1"] .release-check.is-passed i { opacity: 1; }
.explain-release[data-release-step="1"] .release-published-app,
.explain-release[data-release-step="1"] .release-store-route,
.explain-release[data-release-step="1"] .release-store .release-block-caption { opacity: 0; animation: none; }
.explain-release.governance-complete .release-published-app,
.explain-release.governance-complete .release-store-route,
.explain-release.governance-complete .release-store .release-block-caption { opacity: 1; }
.governance-scan-overlay { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; }
@media(prefers-reduced-motion:no-preference) {
 .explain-release.governance-complete .release-published-app { animation: release-reveal 300ms ease both; }
 .explain-release.governance-complete .release-store-route svg path:first-child { animation: employee-path-dashes 900ms linear infinite; }
}
.explain-release[data-release-step="1"] .release-check i { animation: none !important; }
.release-check { font-size: 10px; }

/* Stronger release headline, with governance kept close to its agent. */
@media(min-width:768px) {
 .release-graphic { grid-template-rows: 116px 44px 200px 24px 154px; gap: 14px 20px; }
 .presentation .release-heading h2 { font-size: 42px; line-height: 1.16; }
 .presentation .release-heading h2 em { display: inline-block; font-size: 52px; line-height: 1.15; }
 .presentation[data-lang=th] .release-heading h2 { font-size: 34px; }
 .presentation[data-lang=th] .release-heading h2 em { font-size: 42px; }
 .release-policy-route svg { height: 24px; }
}
@media(max-width:767px) {
 .presentation .release-heading h2 { font-size: 32px; }
 .presentation .release-heading h2 em { font-size: 37px; }
 .presentation[data-lang=th] .release-heading h2 { font-size: 28px; }
 .presentation[data-lang=th] .release-heading h2 em { font-size: 32px; }
}

/* Lift the release heading as one group. */
.release-heading { position: relative; top: -10px; }

/* Match the Builder Kit headline to the release chapter. */
@media(min-width:768px) {
 .presentation .builder-graphic-heading h2 { font-size: 42px; line-height: 1.16; }
 .presentation .builder-graphic-heading h2 em { display: inline-block; font-size: 52px; line-height: 1.15; }
 .presentation[data-lang=th] .builder-graphic-heading h2 { font-size: 34px; }
 .presentation[data-lang=th] .builder-graphic-heading h2 em { font-size: 42px; }
}
@media(max-width:767px) {
 .presentation .builder-graphic-heading h2 { font-size: 32px; }
 .presentation .builder-graphic-heading h2 em { font-size: 37px; }
 .presentation[data-lang=th] .builder-graphic-heading h2 { font-size: 28px; }
 .presentation[data-lang=th] .builder-graphic-heading h2 em { font-size: 32px; }
}

/* Returning from release shows the completed context without replaying it. */
.explain-builder.builder-restored-complete * { animation: none !important; transition: none !important; }

/* Reveal the store only after every governance result has returned. */
.explain-release .release-store { visibility: hidden; opacity: 0; transform: translateX(14px); transition: opacity 300ms ease,transform 300ms ease,visibility 0s 300ms; }
.explain-release.governance-complete .release-store { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

/* No store connector until all concurrent scan results are back. */
.explain-release .release-store-route { opacity: 0; }
.explain-release.active[data-release-step="1"] .release-store-route { animation: none; }
@media(prefers-reduced-motion:no-preference) {
 .explain-release.active.governance-complete[data-release-step="1"] .release-store-route { animation: release-reveal 220ms ease both; }
 .explain-release.active.governance-complete[data-release-step="1"] .release-store-route svg path:first-child { animation: employee-path-dashes 900ms linear infinite; }
}

/* The scan owns this space once the governance group has been introduced. */
.release-policy-catalog>.builder-stage-label { transition: opacity 180ms ease; }
.explain-release[data-release-step="1"] .release-policy-catalog>.builder-stage-label { opacity: 0; }

/* A quiet activity ring becomes a check when each governance scan finishes. */
.release-policy.is-scanning::after { content: ''; position: absolute; top: 9px; right: 9px; width: 12px; height: 12px; border: 1.5px solid rgba(22,133,250,.2); border-top-color: #1685FA; border-right-color: #1685FA; border-radius: 50%; box-sizing: border-box; animation: governance-card-spin 700ms linear infinite; }
@keyframes governance-card-spin { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce) {
 .release-policy.is-scanning::after { animation: none; }
}

/* Pause on passed checks, then move through deployment at a readable pace. */
@media(prefers-reduced-motion:no-preference) {
 .explain-release.active.governance-complete .release-store { transition: opacity 550ms ease 450ms,transform 550ms ease 450ms,visibility 0s 450ms; }
 .explain-release.active.governance-complete[data-release-step="1"] .release-store-route { animation: release-reveal 550ms ease both; }
 .explain-release.active.governance-complete .release-published-app { animation: release-reveal 450ms ease 900ms both; }
 .explain-release.active.governance-complete .release-store .release-block-caption { animation: release-reveal 400ms ease 1000ms both; }
}

/* Start with the employee and coder; bring company context into focus in step 2. */
.builder-kit-focus,.builder-company-catalog { transition: opacity 300ms ease; }
.explain-builder[data-builder-step="0"] .builder-kit-focus,
.explain-builder[data-builder-step="0"] .builder-company-catalog { opacity: .3; }
.explain-builder:not([data-builder-step="0"]) .builder-kit-focus,
.explain-builder:not([data-builder-step="0"]) .builder-company-catalog { opacity: 1; }
@media(prefers-reduced-motion:reduce) {
 .builder-kit-focus,.builder-company-catalog { transition: none; }
}

/* Both collaboration captions appear as soon as step 2 starts. */
.explain-builder:not([data-builder-step="0"]) [data-builder-caption="1"],
.explain-builder:not([data-builder-step="0"]) [data-builder-caption="2"] { opacity: 1; transform: none; transition-delay: 0ms; }

/* Close the employee story, then offer a dedicated product film chapter. */
.presentation .finale-video-scene { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.finale-video-content { width: 1080px; max-width: 100%; }
.presentation .finale-video-scene h2 { color: #F4F8FF; margin: 0 0 24px; font-size: 42px; }
.finale-video-content video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; background: #0E152D; box-shadow: 0 24px 60px rgba(0,16,60,.4); }
@media(max-width:767px) {
 .presentation .finale-video-scene.active { justify-content: center; }
 .presentation .finale-video-scene h2 { font-size: 30px; }
 .presentation[data-lang=th] .finale-video-scene h2 { font-size: 26px; }
}

/* Give the closing story distinct headline, examples and takeaway levels. */
@media(min-width:768px) {
 .presentation .explain-closing { padding: 40px 48px; gap: 40px; }
 .explain-closing .department-examples { gap: 28px; }
 .explain-closing .department-examples article { padding: 28px 24px; }
 .presentation .explain-closing .explain-heading h2 { margin-bottom: 22px; }
 .explain-closing .explain-heading .eyebrow { margin-bottom: 20px; }
 .explain-closing .explain-closing-bottom { gap: 40px; align-items: center; }
 .explain-closing .department-note { margin-top: -24px; }
}
@media(max-width:767px) {
 .explain-closing .department-examples { gap: 22px; }
 .explain-closing .department-examples article { padding: 28px 24px; }
}

/* Let the closing promise carry more visual weight. */
@media(min-width:768px) {
 .presentation .explain-closing .explain-heading h2 { font-size: 48px; line-height: 1.16; letter-spacing: -1.3px; }
 .presentation .explain-closing .explain-heading h2 em { display: inline-block; font-size: 58px; line-height: 1.15; }
 .presentation[data-lang=th] .explain-closing .explain-heading h2 { font-size: 39px; }
 .presentation[data-lang=th] .explain-closing .explain-heading h2 em { font-size: 47px; }
}
@media(max-width:767px) {
 .presentation .explain-closing .explain-heading h2 { font-size: 34px; }
 .presentation .explain-closing .explain-heading h2 em { font-size: 38px; }
 .presentation[data-lang=th] .explain-closing .explain-heading h2 { font-size: 29px; }
 .presentation[data-lang=th] .explain-closing .explain-heading h2 em { font-size: 33px; }
}

/* The closing headline reads as one clear progression. */
.closing-title-arrow { color: #8190AA; font-weight: 400; }
@media(min-width:768px) {
 .presentation .explain-closing .explain-heading h2 { font-size: 48px; white-space: nowrap; }
 .presentation .explain-closing .explain-heading h2 em { font-size: 58px; }
 .presentation[data-lang=th] .explain-closing .explain-heading h2 { font-size: 34px; }
 .presentation[data-lang=th] .explain-closing .explain-heading h2 em { font-size: 40px; }
}
@media(max-width:767px) {
 .presentation .explain-closing .explain-heading h2 { line-height: 1.45; }
}

/* An legible closing eyebrow that speaks to every team. */
.explain-closing .explain-heading .eyebrow { font-size: 14px; line-height: 1.4; letter-spacing: .8px; }

/* Back from the closing chapter restores the released app without replay. */
.explain-release.release-restored-complete * { animation: none !important; transition: none !important; }

/* A real result, connected to the app that delivered it. */
.store-result { display: none; position: absolute; z-index: 3; padding: 24px 32px 28px; border-radius: 20px; background: #F6F7F9; color: #05082E; box-sizing: border-box; }
.result-focus .store-result { display: block; animation: store-result-in 450ms ease both; }
.store-result-label { margin: 0 0 14px; color: #2452DA; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; }
.store-result h2 { margin: 0; font-size: clamp(36px,4.5vw,68px); line-height: 1.15; letter-spacing: -2px; outline: none; }
.store-result h2>span { align-items: center; gap: 20px; }
.store-result h2>.en { display: flex; }
html[lang="th"] .store-result h2>.en { display: none; }
html[lang="th"] .store-result h2>.th { display: flex; font-size: .8em; }
.store-result-before { font-weight: 400; color: #63718B; }
.store-result-arrow { font-size: .6em; color: #8A9CB9; }
.store-result strong { background: var(--aegis-heading-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; white-space: nowrap; }
.store-result-description { margin: 18px 0 0; font-size: 18px; line-height: 1.5; color: #566481; }
.store-result-connector { position: absolute; top: 70px; right: 100%; width: 42px; height: 2px; background: #2872EF; }
.store-result-connector::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #2872EF; }
.internal-store-main>*, .internal-app-card { transition: opacity 350ms ease, filter 350ms ease, box-shadow 350ms ease; }
.result-focus .internal-store-profile, .result-focus .internal-store-hero, .result-focus .internal-store-search, .result-focus .internal-store-filters, .result-focus .internal-featured, .result-focus .internal-apps-heading, .result-focus .internal-app-card:not([data-store-name="marketing workspace"]) { opacity: .16; pointer-events: none; }
.result-focus [data-store-name="marketing workspace"] { box-shadow: 0 0 0 2px #3676F0, 0 18px 38px rgba(30,74,160,.14); position: relative; z-index: 4; }
@keyframes store-result-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@media(max-width:767px) { .store-result { padding: 20px 16px; } .store-result h2 { font-size: 38px; } .store-result h2>span { gap: 14px; } .store-result-description { font-size: 16px; } .store-result-connector { right: auto; left: 35px; top: -28px; width: 2px; height: 28px; } .store-result-connector::before { left: -3px; top: -4px; } }
@media(prefers-reduced-motion:reduce) { .result-focus .store-result { animation: none; } }

/* Keep the store still, with the surrounding UI softly out of focus. */
.result-focus .internal-store-main { overflow: hidden; }
.result-focus .internal-store-main::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--store-dim-height,100%); z-index: 2; background: rgba(246,247,249,.35); pointer-events: none; animation: store-focus-in 350ms ease both; }
.result-focus .internal-store-profile, .result-focus .internal-store-hero, .result-focus .internal-store-search, .result-focus .internal-store-filters, .result-focus .internal-featured, .result-focus .internal-apps-heading, .result-focus .internal-app-card:not([data-store-name="marketing workspace"]) { filter: blur(4px); opacity: .42; }
.result-focus .store-result { background: transparent; box-shadow: none; color: #05082E; }
.result-focus .store-result-connector { top: var(--result-connector-top,70px); }
@keyframes store-focus-in { from { opacity: 0; } to { opacity: 1; } }
@media(max-width:767px) { .result-focus .store-result-connector { top: -28px; } }
@media(prefers-reduced-motion:reduce) { .result-focus .internal-store-main::after { animation: none; } }

/* Draw the connection first, then reveal the outcome at its end. */
.store-result-before { color: #05082E; }
.result-focus .store-result { animation: none; }
.result-focus .store-result-connector { right: calc(100% - 12px); width: 54px; transform-origin: left center; animation: store-result-line 650ms cubic-bezier(.22,1,.36,1) 120ms both; }
.result-focus .store-result-label, .result-focus .store-result h2, .result-focus .store-result-description { animation: store-result-in 450ms ease 580ms both; }
.result-focus .store-result-description { animation-delay: 700ms; }
@keyframes store-result-line { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes store-result-line-vertical { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@media(max-width:767px) { .result-focus .store-result-connector { right: auto; width: 2px; transform-origin: center top; animation-name: store-result-line-vertical; } }
@media(prefers-reduced-motion:reduce) { .result-focus .store-result-connector, .result-focus .store-result-label, .result-focus .store-result h2, .result-focus .store-result-description { animation: none; } }

/* Department examples show the tools, not just their descriptions. */
.explain-closing .department-examples { gap: 22px; }
.explain-closing .department-examples>article { padding: 20px 18px; }
.explain-closing .department-examples h3 { font-size: 19px; min-height: 52px; margin: 18px 0 8px; line-height: 1.3; }
.explain-closing .department-examples>article>p { font-size: 12px; line-height: 1.5; }
.department-app { height: 166px; margin-top: 16px; padding: 12px; border: 1px solid #E6EBF5; border-radius: 10px; background: #F7F9FD; box-sizing: border-box; color: #28364F; overflow: hidden; }
.department-app * { box-sizing: border-box; }
.mini-app-top { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.mini-app-top b { font-size: 10px; font-weight: 600; }
.mini-app-mark { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: #E0E9FF; color: #335BD8; font-size: 10px; font-weight: 700; }
.app-onboarding .mini-app-mark { background: #EAE4FC; color: #7854CD; }
.app-approvals .mini-app-mark { background: #DDF1EF; color: #298779; }
.mini-app-avatar, .mini-add, .mini-date { margin-left: auto; font-size: 8px; color: #687A96; }
.mini-app-avatar { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #E9E4F7; }
.mini-add { color: #3771EA; font-size: 16px; }
.mini-progress-heading { display: flex; justify-content: space-between; font-size: 9px; color: #79849A; }
.mini-progress-heading b { color: #7854CD; }
.mini-progress { height: 4px; margin: 7px 0 12px; background: #E9E5F5; border-radius: 4px; }
.mini-progress i { display: block; width: 67%; height: 100%; background: #9375DE; border-radius: inherit; }
.mini-check-row { display: flex; align-items: center; gap: 7px; margin: 9px 0; font-size: 9px; }
.mini-check-row i { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 4px; background: #E3F3EF; color: #399D84; font-style: normal; font-size: 9px; }
.mini-check-row.pending i { background: transparent; border: 1px solid #CBD4E3; }
.mini-request { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid #E7ECF4; gap: 4px; }
.mini-request b { display: block; font-size: 9px; font-weight: 500; }
.department-app .mini-request small { display: block; margin-top: 3px; font-size: 7px; color: #8491A6; font-weight: 400; }
.mini-request em { font-size: 7px; font-style: normal; padding: 4px 5px; border-radius: 4px; white-space: nowrap; }
.mini-approved { color: #298779; background: #E3F3EE; }
.mini-review { color: #8361C0; background: #EDE7F8; }
.mini-pipeline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.department-app .mini-pipeline small { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 8px; color: #75849B; }
.mini-pipeline small i { font-style: normal; color: #97A3B6; }
.mini-deal { background: #FFFFFF; border: 1px solid #E7ECF5; border-radius: 5px; padding: 7px; margin-bottom: 5px; }
.mini-deal b { display: block; font-size: 9px; font-weight: 500; }
.mini-deal>span { display: block; margin-top: 3px; font-size: 8px; color: #7C89A0; }
.mini-deal em { display: block; margin-top: 6px; font-size: 6px; font-style: normal; color: #4772CA; }
.mini-marketing-performance { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.department-app .mini-marketing-performance small { font-size: 8px; color: #8491A6; }
.mini-marketing-performance b { display: block; font-size: 20px; color: #3558D5; line-height: 1.3; }
.mini-marketing-performance em { font-size: 7px; font-style: normal; color: #349B82; }
.mini-marketing-performance svg { width: 85px; height: 35px; margin-left: auto; }
.mini-week { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid #E4EAF4; padding-top: 7px; }
.mini-week>span { font-size: 6px; color: #8B98AB; text-align: center; }
.mini-week b { display: block; font-size: 11px; color: #34415A; margin: 3px 0; }
.mini-week i { display: block; width: 14px; height: 3px; margin: auto; border-radius: 3px; }
.social-pink { background: #DC72A5; } .social-blue { background: #5985E8; } .social-purple { background: #9375DE; }
.mini-calendar-event { font-size: 8px; margin-top: 9px; color: #77869E; display: flex; gap: 5px; align-items: center; }
.mini-calendar-event i { width: 4px; height: 4px; border-radius: 50%; background: #DC72A5; }
@media(min-width:768px) { .presentation .explain-closing { gap: 26px; padding-top: 32px; padding-bottom: 32px; } .explain-closing .department-note { margin-top: -14px; } }
.department-app .mini-app-top { margin-bottom: 10px; }
.mini-request { padding: 6px 0; }
.mini-deal { padding: 5px 7px; }
.mini-marketing-performance { margin-bottom: 8px; }
.mini-calendar-event { margin-top: 6px; }
.department-app { height: 200px; }
/* Department labels remain readable above the app previews. */
.explain-closing .department-examples>article>small { font-size: 15px; line-height: 1.4; font-weight: 600; }
/* Keep each app description close to its title. */
.explain-closing .department-examples h3 { min-height: 0; margin-bottom: 8px; }

/* Let the four examples breathe without competing with the closing promise. */
.explain-closing .department-examples { gap: 30px; }
.explain-closing .department-app { height: 192px; }
.explain-closing .department-examples>article { padding: 22px 18px; }
.explain-closing .department-examples h3 { margin-bottom: 0; }
.explain-closing .explain-closing-bottom>p { font-size: 20px; line-height: 1.5; }
@media(min-width:768px) { .presentation .explain-closing { gap: 36px; } .explain-closing .department-note { margin-top: -22px; } }

/* The final chapter closes the story before offering the video. */
.presentation .finale-video-scene .finale-intro { gap: 24px; }
.finale-eyebrow { margin: 0; font-size: 13px; letter-spacing: 4px; color: #88A5D0; font-weight: 600; }
.presentation .finale-video-scene h2 { margin: 0; font-size: 62px; line-height: 1.15; letter-spacing: -1.8px; font-weight: 400; }
.presentation .finale-video-scene h2 em { background: linear-gradient(90deg,#00C2FF,#48DAFF); background-clip: text; -webkit-background-clip: text; color: transparent; font-style: normal; }
.finale-summary { margin: 0 0 8px; font-size: 18px; line-height: 1.6; color: #A9B8D1; }
.presentation[data-lang=th] .finale-video-scene h2 { font-size: 48px; line-height: 1.35; }
@media(max-width:767px) { .presentation .finale-video-scene .finale-intro { gap: 12px; } .finale-eyebrow { font-size: 10px; } .presentation .finale-video-scene h2 { font-size: 26px; letter-spacing: -.5px; } .presentation[data-lang=th] .finale-video-scene h2 { font-size: 23px; } .finale-summary { font-size: 12px; margin-bottom: 4px; } }

/* A full dark closing scene, with the summary integrated into the page. */
.presentation.finale-theme .finale-video-content[data-started=false] { transform: none; box-shadow: none; background: transparent; }
.presentation.finale-theme .finale-intro { background: transparent; }
.presentation.finale-theme .fullscreen-toggle:hover { background: transparent; color: #83DFFF; }
.presentation.finale-theme .progress-track { display: block; background: rgba(246,249,255,.12); }
.presentation.finale-theme .progress-track>span { background: linear-gradient(90deg,#00C2FF,#48DAFF); }
/* The closing summary has no video frame showing through behind it. */
.presentation.finale-theme .finale-video-content[data-started=false] { border: 0; outline: none; border-radius: 0; }
.presentation.finale-theme .finale-video-content[data-started=false] video { visibility: hidden; box-shadow: none; border: 0; outline: none; }
/* Give the final statement and its invitation more breathing room. */
@media(min-width:768px) {
 .presentation .finale-video-scene .finale-intro { gap: 36px; }
 .presentation .finale-video-scene h2 { line-height: 1.22; }
 .presentation .finale-video-scene .finale-summary { margin-top: 6px; margin-bottom: 16px; }
}
@media(min-width:768px) {
 .presentation .finale-video-scene .finale-video-content[data-started=false] .finale-intro { translate: 0 -16px; }
}
/* The deployment connector extends toward the store, along its own path. */
@keyframes release-route-right { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@media(prefers-reduced-motion:no-preference) {
 .explain-release.active.governance-complete[data-release-step="1"] .release-store-route { transform-origin: left center; animation: release-route-right 550ms cubic-bezier(.2,.8,.2,1) both; }
}

/* Why AEGIS: code first, then the company path that makes it usable. */
.explain-overview[data-overview-step="0"] .overview-after,
.explain-overview[data-overview-step="0"] .platform-zoom-surface,
.explain-overview[data-overview-step="0"] .builder-feedback,
.explain-overview[data-overview-step="1"] .overview-before { display: none; }
/* Each manual handoff is a separate node, with queues and a review loop. */
.manual-company-path { padding: 0; background: transparent; border: 0; box-shadow: none; }
.manual-path-label { margin: 0 0 20px; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; color: #64738F; text-align: center; }
.manual-process { position: relative; height: 330px; }
.manual-process-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke: #7896C5; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.manual-forward-routes { stroke-dasharray: 4 4; }
.manual-process-routes marker path { stroke: #7896C5; fill: none; }
.manual-return-route { stroke: #CB8C7B; stroke-dasharray: 3 4; }
.manual-process-node { position: absolute; box-sizing: border-box; left: calc(var(--process-column) * 35.5%); top: calc(30px + var(--process-row) * 105px); width: 29%; height: 76px; padding: 10px 11px; border: 1px solid #CDD8EC; border-radius: 10px; background: #F7F9FD; box-shadow: 0 5px 12px rgba(35,53,89,.04); }
.manual-process-number { display: block; margin-bottom: 5px; font-size: 8px; font-weight: 600; letter-spacing: 1px; color: #7184A8; }
.manual-process-node b { display: block; font-size: 11px; line-height: 1.3; font-weight: 600; color: #263554; }
.manual-process-node p { margin: 5px 0 0; font-size: 8px; line-height: 1.4; color: #64738F; }
.manual-node-queue,.manual-node-review { background: #FFF6E8; border-color: #E9CAA3; }
.manual-wait { position: absolute; top: 8px; right: 10px; color: #B88645; font-size: 16px; }
.manual-node-deploy { background: #EDF5FA; border-color: #ADCBDC; }
.manual-rework-label { position: absolute; top: 337px; left: 10%; padding: 2px 6px; background: #EDF1FB; font-size: 9px; color: #A66655; }
.explain-overview[data-overview-step="0"] .path-arrow-two,
.explain-overview[data-overview-step="0"] .path-arrow-three { visibility: hidden; }
.explain-overview[data-overview-step="0"] .path-outcome .path-symbol { color: #8998B5; background: #E7EDF8; }
.explain-overview[data-overview-step="0"] .employee-platform:hover { z-index: auto; }
.explain-overview[data-overview-step="0"] .employee-app-path { row-gap: 48px; }
@media (prefers-reduced-motion:no-preference) {
 .explain-overview.active[data-overview-step="0"] .manual-forward-routes { animation: employee-path-dashes 2s linear infinite; }
}

/* Reserve the same diagram tracks in both Why AEGIS steps. */
@media (min-width:768px) {
 .explain-overview .employee-app-path,
 .explain-overview[data-overview-step="0"] .employee-app-path {
  grid-template-rows: 390px 58px;
  row-gap: 36px;
 }
 .explain-overview .employee-platform { height: 390px; align-self: start; }
 .explain-overview .employee-path-takeaway { margin: 0; align-self: start; }
}

/* Highlight the manual path without moving the shared diagram. */
.manual-path-label { display: flex; justify-content: center; align-items: center; gap: 12px; height: 16px; line-height: 16px; }
.manual-warning-title { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid #E9CAA3; border-radius: 8px; background: #FFF4DD; color: #92601E; font-size: 13px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
.manual-warning-mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #D99526; color: #FFF; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.manual-path-description { font-size: 9px; letter-spacing: 1.2px; }
@keyframes manual-warning-nudge {
 0%,35%,65%,100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(217,149,38,0); }
 45%,55% { transform: translateY(-2px) scale(1.08); box-shadow: 0 0 0 5px rgba(217,149,38,.12); }
 50% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion:no-preference) {
 .explain-overview.active[data-overview-step="0"] .manual-warning-mark { animation: manual-warning-nudge 2.8s ease-in-out infinite; }
}

/* Compare the time to a usable company app in the same caption space. */
.employee-path-takeaway .company-path-time { display: block; font-size: 28px; line-height: 1.15; letter-spacing: -.5px; color: #92601E; }
.employee-path-takeaway .overview-after .company-path-time { color: #1066EE; }
.explain-overview[data-overview-step="1"] .employee-path-takeaway .overview-after { opacity: 1; transition: opacity 270ms ease; }
.explain-overview.aegis-process-pending .employee-path-takeaway .overview-after { opacity: 0; transition: none; }
@media(prefers-reduced-motion:reduce) { .explain-overview[data-overview-step="1"] .employee-path-takeaway .overview-after { transition: none; } }
.company-path-time-caption { display: block; margin-top: 5px; font-size: 12px; line-height: 1.4; color: #536083; }
.company-path-time-condition { display: block; margin-top: 4px; font-size: 9px; line-height: 1.4; font-weight: 400; color: #71809D; }

/* Scan and review use parallel down/up routes for the rework loop. */
.manual-return-route { stroke: #CB963E; }
.manual-rework-label { top: 337px; left: 0; padding: 2px 0; color: #9B722D; }

.manual-process-routes #manual-return-arrow path { stroke: #CB963E; }

/* Center the rework caption beneath the IT review node. */
.manual-rework-label { left: 0; width: 29%; box-sizing: border-box; text-align: center; }

/* Indicative waiting time belongs to the two IT queue/review nodes. */
.manual-node-queue,.manual-node-review { padding-top: 7px; }
.manual-node-queue .manual-process-number,.manual-node-review .manual-process-number { margin-bottom: 3px; }
.manual-node-queue p,.manual-node-review p { margin-top: 3px; }
.manual-wait-duration { display: block; margin-top: 4px; font-size: 9px; line-height: 1.2; font-weight: 600; color: #92601E; }

/* A temporary overlay keeps the manual process visible during its outline morph. */
.overview-morph-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.explain-overview.overview-morphing .platform-zoom-surface { scale: 1 !important; translate: 0 0 !important; }
.explain-overview.overview-morphing .explain-heading,
.explain-overview.overview-morphing .path-origin,
.explain-overview.overview-morphing .path-arrow,
.explain-overview.overview-morphing .builder-feedback,
.explain-overview.overview-morphing .employee-path-takeaway { filter: none !important; }

/* Crossfade only the changing second headline; its first line stays settled. */
.explain-overview .explain-heading h2 { position: relative; }
.explain-overview .explain-heading h2 em { position: relative; }
.explain-overview .explain-heading .overview-before em,
.explain-overview .explain-heading .overview-title-flight em { background: none; color: #92601E; -webkit-text-fill-color: #92601E; }
.overview-title-flight { position: absolute; inset: 0; display: block; visibility: hidden; pointer-events: none; }
.overview-title-flight em { visibility: visible; }

/* Draw one boundary around the manual path, resize it, then reveal AEGIS. */
.overview-manual-snapshot { position: absolute; inset: 0 auto auto 0; width: 100%; }
.overview-process-outline { position: absolute; border-radius: 18px; pointer-events: none; }
.overview-process-outline svg { width: 100%; height: 100%; overflow: visible; }
.overview-process-outline rect { fill: none; stroke: #0E152D; stroke-width: 1; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; }

.explain-overview.overview-morphing .explain-heading,
.explain-overview.overview-morphing .path-origin,
.explain-overview.overview-morphing .employee-path-takeaway { opacity: 1 !important; }

/* Decorative progress travels independently of navigation through the manual path. */
.explain-overview.active[data-overview-step="0"] .manual-forward-routes { animation: none; }
.manual-process-dot { fill: #1685FA; stroke: #EAF4FF; stroke-width: 1; filter: drop-shadow(0 0 3px rgba(22,133,250,.35)); pointer-events: none; }
.explain-overview[data-overview-step="0"].manual-process-delivered .path-outcome .path-symbol { box-shadow: 0 0 0 2px #1685FA,0 0 0 5px rgba(22,133,250,.1); transition: box-shadow 300ms ease; }

/* AEGIS completes the same path in a quick, decorative sequence. */
.employee-capabilities article { position: relative; }
.capability-result { position: absolute; top: -9px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid rgba(120,222,188,.5); border-radius: 7px; background: #101B34; color: #78DEBC; font-size: 8px; line-height: 1.3; }
.capability-result i { font-style: normal; }
.aegis-process-pending .capability-result,
.aegis-process-pending .connection-ui i,
.aegis-process-pending .checks-ui i,
.aegis-process-pending .checks-ui b,
.aegis-process-pending .mini-store-access,
.aegis-process-pending .mini-store-open,
.aegis-process-running .employee-capabilities article:not(.aegis-capability-passed) .capability-result,
.aegis-process-running .employee-capabilities article:not(.aegis-capability-passed) .connection-ui i,
.aegis-process-running .employee-capabilities article:not(.aegis-capability-passed) .checks-ui i,
.aegis-process-running .employee-capabilities article:not(.aegis-capability-passed) .checks-ui b,
.aegis-process-running .employee-capabilities article:not(.aegis-capability-passed) .mini-store-access,
.aegis-process-running .employee-capabilities article:not(.aegis-capability-passed) .mini-store-open { opacity: 0; }
.aegis-capability-passed .capability-result,
.aegis-capability-passed .connection-ui i,
.aegis-capability-passed .checks-ui i,
.aegis-capability-passed .checks-ui b,
.aegis-capability-passed .mini-store-access,
.aegis-capability-passed .mini-store-open { transition: opacity 156ms ease; }
.aegis-process-pending .checks-ui i,
.aegis-process-pending .checks-ui b,
.aegis-process-running article:not(.aegis-capability-passed) .checks-ui i,
.aegis-process-running article:not(.aegis-capability-passed) .checks-ui b { transform: translateY(-4px); }
.aegis-capability-passed .checks-ui i,
.aegis-capability-passed .checks-ui b { transform: translateY(0); transition: opacity 180ms ease, transform 180ms ease; }
.aegis-capability-passed .checks-ui > div:nth-child(2) i,
.aegis-capability-passed .checks-ui > div:nth-child(2) b,
.aegis-capability-passed .connection-ui > div:nth-child(2) i { transition-delay: 144ms; }
.aegis-capability-passed .checks-ui > div:nth-child(3) i,
.aegis-capability-passed .checks-ui > div:nth-child(3) b,
.aegis-capability-passed .connection-ui > div:nth-child(3) i { transition-delay: 288ms; }
.aegis-process-dot { fill: #1685FA; stroke: #EAF4FF; stroke-width: 1; filter: drop-shadow(0 0 3px rgba(22,133,250,.35)); pointer-events: none; }
.aegis-process-pending :is(.path-arrow-two,.path-arrow-three) svg,
.aegis-process-running :is(.path-arrow-two,.path-arrow-three):not(.aegis-route-drawing) svg { opacity: 0; }
.aegis-process-running .aegis-route-drawing:not(.aegis-route-ready) .path-arrow-head { opacity: 0; }
.explain-overview[data-overview-step="1"] .path-outcome .path-symbol { transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease; }
.explain-overview.aegis-process-pending .path-outcome .path-symbol,
.explain-overview.aegis-process-running:not(.aegis-process-delivered) .path-outcome .path-symbol { background: #E7EDF8; color: #8998B5; box-shadow: none; }
.aegis-process-delivered .path-outcome .path-symbol { box-shadow: 0 0 16px rgba(22,133,250,.22); }
@media(prefers-reduced-motion:reduce) { .aegis-capability-passed * { transition: none !important; } }

/* Keep the return connector visible from the inner Builder Kit card. */
.explain-overview .builder-feedback { z-index: 2; }
.explain-overview.overview-morphing:not(.overview-feedback-drawing) .builder-feedback svg { visibility: hidden; }

/* A soft ring radiates from the app after the process arrives. */
.path-outcome .path-symbol { position: relative; }
.path-outcome .path-symbol::after { content: ''; position: absolute; inset: -5px; border: 2px solid #42CAFF; border-radius: 50%; opacity: 0; pointer-events: none; }
@keyframes company-app-pulse { 0% { transform: scale(.85); opacity: 0; } 15% { opacity: .6; } 85%,100% { transform: scale(1.55); opacity: 0; } }
@media(prefers-reduced-motion:no-preference) {
 .aegis-process-delivered .path-outcome .path-symbol::after { animation: company-app-pulse 2.4s ease-out infinite; }
}

/* Reserve stable control slots across Explore, Next, and Watch labels. */
.presentation .bottom-nav #previousScene,
.workspace-preview .preview-app-footer #previewBack,
.workspace-preview .preview-app-footer #storeBack { box-sizing: border-box; flex: 0 0 100px; width: 100px; justify-content: flex-end; white-space: nowrap; }
.presentation .bottom-nav #nextScene,
.workspace-preview .preview-app-footer #previewContinue,
.workspace-preview .preview-app-footer #storeContinue { box-sizing: border-box; flex: 0 0 170px; width: 170px; justify-content: flex-start; white-space: nowrap; }

/* Leave a viewport gutter for the chapter numbers before fitting the slide.
   Symmetric gutters preserve centering; wide screens remain height-limited. */
.presentation:not(.scaled-stage-content) #main { left: 64px; right: 64px; }

/* Dialog buttons share the flex alignment used by the journey links. */
.workspace-preview .preview-app-footer #previewBack,
.workspace-preview .preview-app-footer #previewContinue,
.workspace-preview .preview-app-footer #storeBack,
.workspace-preview .preview-app-footer #storeContinue { display: flex; align-items: center; gap: 6px; border: 0; font-family: inherit; }

/* Keep the navigation still during the dialog-to-page handoff. */
.workspace-preview[open] .preview-app-footer { animation: none; }