/* Sujay's motion pass: chapter colour, purposeful state changes, true media ratios.
   Local application choices only; canonical tokens and parked content stay intact. */
#guard-story { --chapter-ground: var(--surface-inverse-alt); --chapter-light: var(--on-surface-inverse); }
#detective-story { --chapter-ground: var(--surface-inverse); --chapter-light: var(--on-surface-inverse); }
.story { border: 0; background: linear-gradient(180deg, var(--surface-inverse), var(--chapter-ground) 220px, var(--chapter-ground) calc(100% - 180px), var(--surface-inverse)); }
.story .act, .story .stage { background: transparent; }
.story .story-nav { background: var(--surface-inverse); border: 0; }
.story-nav strong { color: var(--chapter-light); font-size: clamp(18px, 1.4vw, 20px); }
.story-nav a[aria-current="step"] { color: var(--chapter-light); border-color: var(--chapter-light); }
.story-nav a { transition: color 180ms ease-out, border-color 180ms ease-out; min-height: 44px; display: flex; align-items: center; }
.story .eyebrow { color: var(--chapter-light); }
.story .duo, .story .lift > .duo { min-height: 0; padding-block: clamp(44px, 5.5vw, 80px); }
.story .head { text-wrap: balance; }
.story .body { max-width: 60ch; }
.story .act + .act { border-top: 0; }
.story .frm { background: var(--ink-950); }
.story .frm__band { border-top: 0; }
/* Deployment is a new chapter within the same type and surface system. */
#act-8 { background: linear-gradient(180deg, var(--surface-inverse), var(--surface-inverse-alt) 140px, var(--surface-inverse-alt) calc(100% - 140px), var(--surface-inverse)); --act-min: 76svh; border-top: 0; }
#act-8 .stage { background: transparent; }
#act-8 .duo { padding-block: clamp(48px, 6vw, 88px); }
/* Images and boxes share exactly the same fitted media coordinate system. */
.story-media__screen { height: auto; aspect-ratio: 16 / 9; overflow: hidden; }
.story-media--memory .story-media__screen { aspect-ratio: 4 / 5; }
.story-media__screen > img, .story-media__screen > video { object-fit: contain; }
.story-media button { min-height: 44px; transition: background 180ms, color 180ms, transform 180ms; }
.story-media button:hover { background: var(--paper-100); color: var(--ink-950); }
.story-media button:active { transform: scale(.98); }
/* The instruction is prominent; status remains compact. */
#watch-state, #moment-state { margin: 0 16px 12px; padding: 8px 0; border: 0; background: transparent; }
#watch-state .state__t, #moment-state .state__t { font: var(--mono-sm); font-weight: 400; color: var(--on-surface-inverse); }
#watch-state .dot { background: var(--signal-blue); }
#moment-state { margin-top: 8px; }
#act-3 .card__title { font-size: clamp(24px, 2vw, 28px); color: var(--on-surface-inverse); }
.frm__watch { display: grid; gap: 8px; padding: 18px 20px; background: var(--surface-inverse-alt); }
.frm__watch-key { display: block; padding: 0; background: transparent; color: var(--paper-200); font: var(--mono-xs); }
.frm__watch-line { font-family: var(--font-body); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; letter-spacing: 0; }
.story .cmp__line { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; }
#hero-state { font: var(--mono-sm); }
.card__explanation { padding-block: 12px; border-block: 1px solid var(--outline-inverse); display: grid; gap: 8px; }
.card__explanation .card__why { margin: 0; font: var(--body-md); color: var(--on-surface-inverse); }
.card__reason { margin: 0; font: var(--body-sm); color: var(--paper-200); }
.hero-detected .obj--hero .frm__box { opacity: 1; transform: none; }
.hero-detected .frm__state-b { color: var(--primary); }
.story .cmp.is-typing { border-color: var(--signal-blue); }
.story .cmp.is-armed { border-color: var(--chapter-light); }
#act-5 .reply__search { color: var(--signal-blue); }
.story .reply .chips { gap: 8px; }
/* Two bounded scan passes; no endless decorative flashing or whole-page fades. */
.wall-context { display: grid; gap: 6px; }
.wall-context strong { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--paper-100); }
.wall-context span { font-size: 14px; }
#ask-state { align-items: center; gap: 9px; }
#ask-state .state__t { font-size: 14px; line-height: 1.55; }
.search-activity { display: inline-flex; flex: 0 0 15px; height: 14px; gap: 3px; align-items: center; visibility: hidden; }
.search-activity > span { width: 3px; height: 12px; background: currentColor; transform: scaleY(.35); }
.is-searching .search-activity { visibility: visible; }
.is-searching .search-activity > span { animation: search-pulse 900ms ease-in-out infinite; }
.is-searching .search-activity > span:nth-child(2) { animation-delay: 150ms; }
.is-searching .search-activity > span:nth-child(3) { animation-delay: 300ms; }
@keyframes search-pulse { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
#watch-state.is-on .dot, #hero-state:not(.is-b) .dot { animation: watch-dot 1400ms ease-in-out 3; }
@keyframes watch-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.story-media--memory .memory__tag { left: 12px; right: auto; top: auto; bottom: 14px; max-width: calc(100% - 24px); padding: 8px; font-size: 12px; }
.story-media--memory .memory__tag-a { color: var(--signal-green); }
/* Tablet gets a readable, bounded document, not an oversized mobile plate. */
@media (min-width: 701px) and (max-width: 1100px) {
  .story .duo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .story .rail { max-width: 660px; width: 100%; }
  .story .stagecol { width: 100%; justify-content: flex-start; }
  .story .obj { width: min(100%, 640px); }
  .story .obj--plate { width: min(100%, 400px); }
  .story .results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story .res { display: block; }
  .story .res > * + * { margin-top: 8px; }
  .story .res img { width: 100%; }
}
@media (max-width: 700px) {
  .story-nav { gap: 0; }
  .story-nav strong { font-size: 18px; }
  .story-nav ol { gap: 12px; }
  .story-nav a { font-size: 12px; }
  .story .duo, .story .lift > .duo { padding-block: 34px 42px; gap: 24px; }
  .story .head { font-size: clamp(24px, 6.3vw, 32px); line-height: 1.18; }
  .story .obj--plate { width: min(100%, 360px); }
  .story .results { display: grid; grid-template-columns: 1fr; }
  .story .res { display: grid; grid-template-columns: minmax(94px, 35%) minmax(0, 1fr); padding: 10px; gap: 5px 10px; }
  .story .res img { width: 100%; height: auto; align-self: start; aspect-ratio: 4 / 3; object-fit: cover; }
  .story .res__why { font-size: 14px; }
  .story-media__controls { flex-wrap: wrap; gap: 8px; }
  .story-media__controls > span { flex: 1 1 130px; }
  .story .frm__band { gap: 6px 10px; padding: 12px; }
  .story .frm__time { margin-left: 0; }

  #act-8 .duo { padding-block: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .search-activity > span { animation: none !important; transform: none; }
  #watch-state .dot, #hero-state .dot { animation: none !important; opacity: 1; }
  .story a, .story button { transition: none !important; }
  .hero-detected .obj--hero .frm__box { transform: none !important; }
}

/* Taste pass: a night-shift control room, not a stack of bordered slides.
   Local surface refinements; existing fonts, brand colours and story stay intact. */
:root {
  --bar-h: 76px;
  --home-radius: 12px;
  --home-control-radius: 6px;
  --home-ease: cubic-bezier(.22, 1, .36, 1);
}
.bar { gap: 24px; border-bottom-color: transparent; transition: border-color 240ms var(--home-ease); }
.bar.is-scrolled, .bar.is-menu-open { border-bottom-color: var(--outline-inverse); }
.bar__mark { width: 36px; }
.bar__word { font-size: 18px; }
.bar__nav { align-items: center; gap: clamp(16px, 1.6vw, 24px); }
.bar__nav a { position: relative; display: flex; align-items: center; min-height: 44px; color: var(--paper-200); font-size: 14px; }
.bar__nav a::after { content: ''; position: absolute; inset: auto 0 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--home-ease); }
.bar__nav a:hover::after, .bar__nav a:focus-visible::after { transform: scaleX(1); }
.cta--bar { min-height: 44px; padding: 10px 18px; border-radius: var(--home-control-radius); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.bar__toggle { display: none; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; flex: 0 0 44px; border: 1px solid var(--outline-inverse); border-radius: var(--home-control-radius); background: var(--surface-inverse); color: var(--on-surface-inverse); cursor: pointer; }
.bar__toggle:hover { background: var(--surface-inverse-alt); }
.story .story-nav { min-height: 72px; padding-block: 12px; }
.story-nav ol { position: relative; gap: 8px; }
.story-nav a { position: relative; padding: 8px 14px; border: 0; border-radius: var(--home-control-radius); color: var(--paper-200); transition: background-color 240ms var(--home-ease), color 180ms; }
.story-nav a:hover { background: var(--surface-inverse-alt); }
.story-nav a[aria-current="step"] { background: var(--ink-800); color: var(--on-surface-inverse); }
.story-nav ol::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 1px; height: 2px; background: var(--on-surface-inverse); transform-origin: left; transform: translateX(var(--step-x, 0px)) scaleX(var(--step-w, 0)); transition: transform 380ms var(--home-ease); pointer-events: none; }
.story .act { scroll-margin-top: calc(var(--bar-h) + 88px); }
.story .duo, .story .lift > .duo { padding-block: clamp(56px, 6vw, 88px); }
.story .rail { gap: 22px; }
.head { text-wrap: balance; }
.body { text-wrap: pretty; }
.story .body { max-width: 54ch; }
.stagecol { position: relative; isolation: isolate; }
.story .stagecol::before { content: ''; position: absolute; inset: -32px -3%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 48% 48% at 50% 50%, color-mix(in oklab, var(--paper-100) 7%, transparent), transparent 100%); }
.frm, .story .frm { border-color: var(--outline-inverse); border-radius: var(--home-radius); overflow: hidden; }
.frm__band { padding-block: 16px; border-bottom-color: var(--outline-inverse); }
.story .frm__foot, .story .frm__foot--phone { border-color: var(--outline-inverse); }
.story-media button, .cmp__send, .card__acts .btn, .pack__acts .btn { border-radius: var(--home-control-radius); }
.story-media button { background: transparent; }
.story .cmp, .story .cmp__field { border-radius: var(--home-control-radius); }
.story .cmp__field { padding: 18px; }
.story .res { border-color: var(--outline-inverse); padding: 14px; }
.story .res img, .pack__thumbs img { border-radius: 4px; }
.story .res__why { font-size: 14px; }
.story .card__in { padding: 20px; gap: 12px; }
.story .card__explanation { padding-block: 16px; }
.story-media--memory .memory__tag { border-color: var(--outline-inverse); border-radius: var(--home-control-radius); }
.scene::after { content: ''; position: absolute; inset: auto 0 0; height: 24%; background: linear-gradient(transparent, var(--surface-inverse)); pointer-events: none; }
@media (max-width: 1100px) {
  :root { --bar-h: 68px; }
  .bar { gap: 10px; }
  .bar__word { font-size: 16px; }
  .bar__mark { width: 30px; }
  .bar__nav { display: none; position: absolute; top: 100%; inset-inline: 0; padding: 16px var(--gutter) 24px; background: var(--surface-inverse); border-bottom: 1px solid var(--outline-inverse); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
  .bar.is-menu-open .bar__nav { display: grid; }
  .bar__toggle:not([hidden]) { display: inline-flex; }
  .cta--bar { margin-left: auto; font-size: 13px; padding-inline: 14px; }
  .story .story-nav { gap: 10px; }
}
@media (max-width: 700px) {
  .story .story-nav { min-height: 0; padding-block: 12px; gap: 8px; }
  .story-nav strong { font-size: 16px; }
  .story-nav ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 4px; }
  .story-nav a { justify-content: center; padding: 6px 5px; min-height: 44px; font-size: 12px; line-height: 1.4; }
  .story .act { scroll-margin-top: calc(var(--bar-h) + 110px); }
  .story .duo, .story .lift > .duo { padding-block: 44px 52px; gap: 28px; }
  .story .rail { gap: 18px; }
  .story .frm__band { padding: 14px 12px; }
  .story .card__in { padding: 16px; }
  .story .cmp__field { padding: 14px; }
  .story .res { padding: 12px; }
  .story-media__controls { padding-block: 10px; }
}
@media (max-width: 360px) { .bar__word { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bar, .bar__nav a::after, .story-nav ol::after { transition: none !important; }
}