/* Conntour-informed hero → Guard proof. Existing brand fonts, palette and assets.
   Cinematic atmosphere is image-derived depth, not newly generated footage.
   Later chapters remain outside this proof. Static document is the baseline. */
:root { --cinema-ease: cubic-bezier(.22, 1, .36, 1); }
#hero, .guard-panel--watch, #act-3 {
  --night-ground: var(--surface-inverse);
  --night-ink: var(--on-surface-inverse);
  --night-muted: var(--paper-200);
  --night-rule: var(--outline-inverse);
  --night-panel: var(--surface-inverse-alt);
}
#hero .cta, #hero .quiet, .bar .cta, .guard-panel--watch .frm, #act-3 .frm,
.guard-panel--watch .cmp, .guard-panel--watch .cmp__field, .guard-panel--watch .cmp__send, .guard-panel--watch .chipx,
#act-3 .btn { border-radius: 2px; }
#hero .hero, #hero .lift { min-height: calc(100svh - var(--header-h)); }
#hero .duo { grid-template-columns: 1fr; min-height: calc(100svh - var(--header-h)); padding-block: clamp(48px, 8vh, 100px); align-items: center; }
#hero .rail { max-width: 800px; gap: 28px; }
#hero .hero__title { max-width: 17ch; font-size: clamp(46px, 5.6vw, 82px); line-height: 1.06; letter-spacing: -.045em; }
#hero .hero__sub { max-width: 55ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; }
#hero .stagecol { display: none; }
#hero .scene { display: block; position: absolute; inset: -4%; translate: none; width: auto; height: auto; min-height: 0; aspect-ratio: auto; transform: translateY(calc(var(--cinema-scroll, 0) * 36px)); }
#hero .plane { will-change: auto; }
#hero .plane--sky { transform: none; animation: cinema-sky 24s ease-in-out infinite alternate paused; }
#hero .plane--sky img { height: 42%; object-fit: cover; }
#hero .plane--ground { transform: none; animation: cinema-ground 22s ease-in-out infinite alternate paused; }
#hero .plane--ground img { object-fit: cover; object-position: 50% 62%; mask-image: linear-gradient(transparent, #000 14%); }
#hero .plane--near { transform: none; animation: cinema-near 22s ease-in-out infinite alternate paused; }
#hero .bldg { left: auto; right: -2%; top: 8%; width: auto; height: 94%; max-width: 38%; object-fit: contain; object-position: bottom right; }
#hero .plane--floor { background: linear-gradient(0deg, var(--surface-inverse), transparent 40%); }
#hero .scrim--sky { height: 55%; background: linear-gradient(180deg, rgba(5,12,16,.50), transparent); }
#hero .scrim--rail { background: linear-gradient(90deg, rgba(5,12,16,.88), rgba(5,12,16,.68) 38%, rgba(5,12,16,.12) 80%); }
.cinema-hero-note { margin-top: 16px; font-size: 14px; }
.cinema-hero-note a { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; text-decoration: none; color: var(--paper-100); }
.cinema-hero-note a:hover { color: var(--acid-500); }
.cinema-visible .plane--sky, .cinema-visible .plane--ground, .cinema-visible .plane--near { animation-play-state: running !important; }
@keyframes cinema-ground { from { transform: scale(1.015) translate3d(-.35%, .4%, 0); } to { transform: scale(1.07) translate3d(.35%, -.4%, 0); } }
@keyframes cinema-near { from { transform: scale(1.015) translate3d(.25%, .4%, 0); } to { transform: scale(1.08) translate3d(-.35%, -.4%, 0); } }
@keyframes cinema-sky { from { transform: translate3d(-1%, 0, 0); } to { transform: translate3d(1%, -.5%, 0); } }

/* One continuous dark place, not a hard white cut into a dry product panel. */
#act-1 .duo { padding-block: clamp(56px, 7vw, 104px); }
#guard-story { position: relative; isolation: isolate; overflow: clip; background: var(--surface-inverse); --night-ground: var(--surface-inverse); --night-ink: var(--on-surface-inverse); --night-muted: var(--paper-200); --night-rule: var(--outline-inverse); --night-panel: var(--surface-inverse-alt); }
#guard-story > .guard-particles { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
#guard-story > .guard-stage { z-index: 1; }
#guard-story > .guard-chapters { position: relative; z-index: 1; }
.guard-panel--watch, #act-3, .guard-panel--watch .stage, #act-3 .stage { background: transparent; }
.guard-panel--watch .duo, #act-3 .duo { padding-block: clamp(64px, 7vw, 112px); }
.guard-panel--watch .rail, #act-3 .rail { max-width: 510px; }
.guard-panel--watch .frm, #act-3 .frm { overflow: visible; background: rgba(13,24,29,.97); box-shadow: 0 24px 80px rgba(0,0,0,.24); }
.guard-panel--watch .frm__band, #act-3 .frm__band { border-bottom: 1px solid var(--night-rule); background: rgba(8,16,21,.96); }
.guard-panel--watch .conv { padding: clamp(18px, 2.4vw, 32px); gap: 22px; }
.guard-panel--watch .cmp__field { position: relative; background: rgba(4,12,16,.65); border-color: rgba(181,199,201,.40); padding: 22px; }
.guard-panel--watch .cmp__line { min-height: 112px; font-size: 22px; line-height: 1.5; }
.guard-panel--watch .cmp__ph { font-size: 13px; color: var(--paper-200); margin-bottom: 14px; }
.guard-panel--watch .ink { min-height: 3em; }
.guard-panel--watch .ink__full { font: inherit; clip-path: none; white-space: normal; }
.cinema-ready .guard-panel--watch .ink__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cinema-type { display: inline; color: var(--on-surface-inverse); white-space: normal; }
#watch-cmp[data-cinema-state="idle"] .cmp__ph { visibility: visible; }
#watch-cmp[data-cinema-state="typing"] .cinema-type::after { content: ''; display: inline-block; height: 1em; width: 2px; background: var(--primary); vertical-align: -.1em; margin-left: 3px; animation: cinema-caret 700ms steps(1, end) infinite; }
@keyframes cinema-caret { 0%,45% { opacity: 1; } 46%,100% { opacity: .18; } }
.guard-panel--watch .cmp__send { background: var(--acid-500); color: var(--ink-950); border-color: var(--acid-500); min-width: 132px; padding: 12px 18px; transition: transform 180ms var(--cinema-ease), background 180ms; }
.guard-panel--watch .cmp__send:hover { background: var(--paper-100); }
#watch-cmp[data-cinema-state="submitted"] .cmp__send { transform: scale(.96); background: var(--paper-100); }
#watch-cmp[data-cinema-state="question"] .cmp__send, #watch-cmp[data-cinema-state^="camera-"] .cmp__send, #watch-cmp[data-cinema-state="watching"] .cmp__send { background: var(--paper-100); }
.guard-panel--watch .conv { position: relative; }
.cinema-cursor { position: absolute; z-index: 5; left: 0; top: 0; width: 26px; height: 30px; pointer-events: none; opacity: 0; color: var(--on-surface-inverse); filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--surface-inverse) 80%, transparent)); transition: transform 620ms var(--cinema-ease), opacity 180ms; }
.cinema-cursor svg { width: 100%; height: 100%; }
.cinema-cursor[data-visible="true"] { opacity: 1; }
.guard-panel--watch .reply, .guard-panel--watch .state { transition: opacity 420ms var(--cinema-ease), transform 420ms var(--cinema-ease); }
.cinema-ready .guard-panel--watch .reply.cinema-pending, .cinema-ready .guard-panel--watch .state.cinema-pending { opacity: 0; transform: translateY(6px); visibility: hidden; }
#watch-state .dot { animation: cinema-watch 1.8s ease-in-out infinite paused; }
#watch-state .state__t { animation: guard-status-pulse 1.8s ease-in-out infinite paused; }
#guard-story.cinema-visible .guard-panel--watch.is-active #watch-state:not(.cinema-pending) :is(.dot, .state__t) { animation-play-state: running; }
@keyframes cinema-watch { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
#moment-state .dot { animation: cinema-match 1.1s ease-in-out infinite; }
#moment-state .state__t { animation: guard-status-pulse 1.1s ease-in-out infinite; }
@keyframes cinema-match { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal-orange) 50%, transparent); } 50% { opacity: .32; box-shadow: 0 0 0 5px transparent; } }
@keyframes guard-status-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.guard-panel--watch .chipx { color: var(--paper-100); border-color: var(--outline-inverse); background: var(--surface-inverse); }
.guard-panel--watch #watch-cmp[data-cinema-state="watching"] ~ .reply .chipx { border-color: var(--acid-500); }

/* The instruction, footage and consequence share a single stable frame. */
#act-3 .rail { align-self: start; padding-top: 12px; }
.cinema-instruction { margin: 0; padding: 18px 22px; color: var(--paper-100); font: 400 17px/1.55 var(--font-body); border-bottom: 1px solid var(--night-rule); }
.cinema-instruction > span { display: block; font-size: 12px; color: var(--paper-200); margin-bottom: 6px; }
#act-3 .story-media__screen { height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; overflow: hidden; }
#act-3 .story-media__screen > img, #act-3 .story-media__screen > video { width: 100%; height: 100%; object-fit: contain; transform: none; max-height: none; }
#act-3 .story-media__screen > video { visibility: visible; opacity: 0; transition: opacity 400ms var(--cinema-ease); }
#act-3 .story-media.is-playing .story-media__screen > video { opacity: 1; }
#act-3 .story-media__controls { flex-wrap: wrap; gap: 8px 12px; color: var(--paper-200); background: var(--surface-inverse); }
#act-3 .story-media button { border-radius: 2px; }
#act-3 .card__in { padding: 18px 22px 22px; gap: 10px; transform: none; }
#act-3 .card__explanation { background: transparent; border: 0; padding: 0; }
#act-3 .card__title { font-size: 25px; color: var(--paper-100); }
#act-3 .card__watch { display: none; } /* The full instruction is directly above the footage. */
#act-3 .card__why, #act-3 .card__reason { color: var(--paper-200); font-size: 15px; line-height: 1.55; }
#act-3 .card__acts { visibility: visible; }
#act-3 .frm__foot--phone { transform: none; background: var(--surface-inverse); }
#act-3 .card__in, #act-3 #moment-state, #act-3 .frm__foot--phone { transition: opacity 500ms var(--cinema-ease); }
.cinema-ready #act-3[data-cinema-result="pending"] :is(.card__in, #moment-state, .frm__foot--phone) { opacity: 0; visibility: hidden; }
#guard-story { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); gap: clamp(44px, 6vw, 96px); padding: 0 max(24px, calc((100vw - var(--container)) / 2)); background: linear-gradient(120deg, var(--surface-inverse) 0%, var(--surface-inverse-alt) 52%, var(--surface-inverse) 100%); color: var(--on-surface-inverse); }
/* Sized off the WATCH/MEMORY panels (≈560/545px natural height, comfortable
   here); the ALERT panel needs meaningfully more (image + instruction +
   verdict + 3 actions + phone footer) and was clipping silently — .frm's
   `max-height: 100%` never actually resolved (its ancestor .obj is
   auto-height under `align-items: center`, so a percentage height had
   nothing definite to resolve against) and nothing else clipped the
   overflow, so the excess just rendered past the sticky box's own bottom
   edge, off the bottom of the viewport, unreachable by scrolling because
   scroll here advances chapters, not this box. Ceiling raised and Alert's
   own padding tightened below to close the gap instead of relying on a
   visitor zooming out to shrink everything until it happens to fit. */
.guard-stage { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--header-h) + 8px); align-self: start; height: calc(100svh - var(--header-h) - 16px); min-height: 700px; display: grid; align-items: center; z-index: 1; }
/* Measured natural panel heights: watch 667, alert 158, memory 371,
   ask 596, answer 624, case 330. A 700-840px shell was taller than five
   of six, which is where the awkward voids came from. 620 fits the
   busiest panels and lets the media-bearing ones expand into it. */
.guard-stage__shell { position: relative; width: 100%; height: min(620px, calc(100svh - var(--header-h) - 40px)); min-height: 540px; }
/* One frame, six chapters. The shell is fixed above; the frame must fill it
   exactly, or each panel renders a different-sized box at a different vertical
   position and the product appears to morph as you scroll. `align-items:
   stretch` + `height: 100%` down the chain gives every panel one identical
   outer box; the media area flexes and the interior scrolls nothing. */
.guard-panel { position: absolute; inset: 0; display: grid; align-items: stretch; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 500ms var(--cinema-ease), transform 500ms var(--cinema-ease), visibility 500ms; }
.guard-panel.is-active { opacity: 1; visibility: visible; transform: none; z-index: 2; }
.guard-panel .obj { width: 100%; max-width: none; margin: 0; height: 100%; min-height: 0; }
.guard-panel .frm { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: rgba(13,24,29,.97); box-shadow: 0 24px 80px rgba(0,0,0,.24); border-radius: 2px; }
.guard-panel .frm > * { flex: 0 0 auto; }
.guard-panel .frm__band { flex: 0 0 auto; }
.guard-panel .frm__foot, .guard-panel .frm__foot--phone { margin-top: auto; }
.guard-panel .frm__band { border-bottom: 1px solid var(--night-rule); background: rgba(8,16,21,.96); }
.guard-panel .story-media__screen { width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; overflow: hidden; }
.guard-panel .story-media__screen > img, .guard-panel .story-media__screen > video { width: 100%; height: 100%; object-fit: cover; transform: none; max-height: none; }
.guard-panel .story-media__screen > video { visibility: visible; opacity: 0; transition: opacity 400ms var(--cinema-ease); }
.guard-panel .story-media.is-playing .story-media__screen > video { opacity: 1; }
.guard-panel--memory .story-media__screen > img, .guard-panel--memory .story-media__screen > video { object-position: center 42%; }
.guard-panel--memory .memory__tag { bottom: 14px; }
.guard-panel .story-media__controls { flex-wrap: wrap; gap: 8px 12px; color: var(--paper-200); background: var(--surface-inverse); }
.guard-panel .cinema-instruction { margin: 0; padding: 18px 22px; color: var(--paper-100); font: 400 17px/1.55 var(--font-body); border-bottom: 1px solid var(--night-rule); }
.guard-panel .cinema-instruction > span { display: block; font-size: 12px; color: var(--paper-200); margin-bottom: 6px; }
.guard-panel .card__in { padding: 18px 22px 22px; gap: 10px; transform: none; }
.guard-panel--alert #moment-state { min-height: 0; margin: 0; padding: 10px 22px 0; }
.guard-panel--alert .card__in { padding-top: 6px; gap: 8px; }
.guard-panel .card__explanation { background: transparent; border: 0; padding: 0; }
.guard-panel .card__title { font-size: 25px; color: var(--paper-100); }
.guard-panel .card__watch { display: none; }
.guard-panel .card__why, .guard-panel .card__reason { color: var(--paper-200); font-size: 15px; line-height: 1.55; }
.guard-panel .frm__foot--phone { transform: none; background: var(--surface-inverse); }
/* guard-fit.js used to scale this panel down because the alert stacked BELOW
   the footage made it taller than its siblings. The HUD overlay removed that
   height entirely (measured: 0px overflow at 1512x950, 1920x1080, 1440x760 and
   1280x700), so the scale is gone — it was the last thing making the Alert
   frame 637px wide against its siblings' 644px, i.e. the visible morph. */
/* Alert-only: every element above still present and in the required order
   (G05/G06) — just less padding around each, so the whole card is shorter
   without anything reading as cramped. Scoped to #act-3's panel only; Watch
   and Memory already fit their budget and are untouched. Left the footage
   itself alone — the subject-box SVG overlay is aligned to the video's
   native 16:9 crop, and re-deriving that alignment for a shorter aspect
   ratio isn't worth the risk of a silently misaligned evidence box. */
.guard-panel--alert .frm__band { padding-block: 10px; }
.guard-panel--alert .cinema-instruction { padding-block: 12px; }
.guard-panel--alert .cinema-instruction > span { margin-bottom: 2px; }
.guard-panel--alert #moment-state { padding-top: 8px; }
.guard-panel--alert .card__in { padding: 10px 22px 18px; gap: 10px; }
.guard-panel--alert .card__explanation { gap: 6px; }
.guard-panel--alert .card__title { font-size: 22px; }
.guard-panel--alert .card__why, .guard-panel--alert .card__reason { line-height: 1.45; }
.guard-panel--alert .frm__foot--phone { padding-block: 8px; }
#guard-story .guard-panel--alert .card__acts { gap: 10px; margin-top: 4px; }
#guard-story .guard-panel--alert .card__acts .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; border-style: solid; border-width: 1px; font-weight: 600; }
#guard-story .guard-panel--alert .btn--dismiss { color: var(--signal-green); border-color: var(--signal-green); background: var(--surface-inverse); }
#guard-story .guard-panel--alert .btn--investigate { color: var(--on-surface); border-color: var(--surface); background: var(--surface); }
#guard-story .guard-panel--alert .btn--escalate { color: var(--signal-orange); border-color: var(--signal-orange); background: var(--surface-inverse); }
#guard-story :is(#watch-state, #moment-state) { display: flex; align-items: center; gap: 10px; min-height: 44px; }
#guard-story :is(#watch-state, #moment-state) .dot { width: 10px; height: 10px; }
#guard-story :is(#watch-state, #moment-state) .state__t { font: var(--mono-sm); letter-spacing: var(--tracking-mono-sm); color: var(--on-surface-inverse); }
#guard-story .guard-panel--alert #moment-state { margin: 0; padding: 12px 22px; border-bottom: 1px solid var(--outline-inverse); }
#guard-story .guard-panel--alert #moment-state .dot { background: var(--signal-orange); }
#guard-story .guard-panel--memory .memory__tag { position: relative; inset: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; max-width: none; margin: 0; padding: 12px 18px; border: 0; border-top: 1px solid var(--outline-inverse); border-radius: 0; background: var(--surface-inverse); transform: none; }
#guard-story .guard-panel--memory .memory__tag .dot { width: 10px; height: 10px; background: var(--signal-green); }
#guard-story .guard-panel--memory :is(.memory__tag-a, .memory__tag-b) { font: var(--mono-sm); letter-spacing: var(--tracking-mono-sm); text-transform: none; color: var(--on-surface-inverse); }
#guard-story .guard-panel--memory .memory__tag-b::before { content: '·'; margin-right: 10px; color: var(--on-surface-inverse); }
/* MapNova rhythm (measured from references/mapnova/recording.mp4): ~400-545px
   between chapter blocks — roughly half a viewport — with each block small and
   top-anchored, so ONE idea occupies the screen at a time. The previous
   112-160px gap put two or three chapters on screen at once, which is what made
   this read as a wall of text. Air between blocks, not inside them. */
.guard-chapters { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: clamp(300px, 46svh, 520px); padding-block: clamp(30svh, 34svh, 380px); }
#guard-story .guard-chapter { min-height: 0; display: block; background: transparent; color: var(--on-surface-inverse); }
/* Inside a block: tighter, with the headline given room to breathe. Air belongs
   BETWEEN chapters (gap above), not between a heading and its own body. */
#guard-story .guard-chapter .rail { position: relative; max-width: 470px; padding: 0; background: transparent; color: var(--on-surface-inverse); }
#guard-story .guard-chapter .eyebrow { margin: 0 0 10px; }
#guard-story .guard-chapter .head { margin: 0 0 16px; line-height: 1.2; }
#guard-story .guard-chapter .body { margin: 0 0 12px; line-height: 1.62; }
#guard-story .guard-chapter .body:last-child { margin-bottom: 0; }
#guard-story .guard-chapter .head, #guard-story .guard-chapter .lede { color: var(--on-surface-inverse); }
#guard-story .guard-chapter .body { color: var(--paper-200); }
#guard-story .guard-chapter .eyebrow { color: var(--paper-200); }
/* The sticky product pill that lived here read as an orphaned status light
   (Sujay, 2026-09-11). Replaced by .product-intro sections + a ground colour
   change per product — see "Two products, two rooms" at the end of this file. */

.guard-chapter__marker { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border: 1px solid var(--outline-inverse); border-radius: 2px; color: var(--acid-500); transition: border-color 400ms var(--cinema-ease), background 400ms var(--cinema-ease); }
.guard-chapter__marker svg { width: 21px; height: 21px; }
.guard-chapter.is-active .guard-chapter__marker { border-color: var(--acid-500); background: rgba(201,255,90,.08); }
.guard-panel--watch .chipx.is-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }

.cinema-paused :is(#hero,#guard-story) *, .cinema-static :is(#hero,#guard-story) * { animation-play-state: paused !important; }
.cinema-static #hero .scene { transform: none; }
.cinema-static :is(#hero,#guard-story) * { transition: none !important; }
@media (max-width: 860px) {
  #hero .duo { padding-block: 48px 56px; }
  #hero .rail { gap: 24px; }
  #hero .hero__title { font-size: clamp(42px, 7.4vw, 64px); max-width: 17ch; }
  #hero .hero__sub { font-size: 17px; max-width: 48ch; }
  #hero .scene { display: block; }
  #hero .plane--near { display: none; }
  #hero .plane--ground img { object-position: 55% 50%; }
  #hero .scrim--rail { background: linear-gradient(90deg, rgba(5,12,16,.82), rgba(5,12,16,.52)); }
  #hero .scrim--sky { height: 65%; }
  .guard-panel--watch .duo, #act-3 .duo { grid-template-columns: minmax(0,1fr); gap: 32px; padding-block: 56px; }
  .guard-panel--watch .rail, #act-3 .rail { max-width: 650px; }
  .guard-panel--watch .cmp__line { font-size: 20px; }
  .guard-panel--watch .cmp__field { padding: 18px; }
  .guard-panel--watch .conv { padding: 18px; }
  #act-3 .cinema-instruction, #act-3 .card__in { padding-inline: 16px; }
  #act-3 .frm__foot--phone { flex-wrap: wrap; }
  #guard-story { display: block; padding: 0 24px; }
  #guard-story .guard-chapters { gap: 0; padding-block: 0; }
  .guard-stage { display: none; }
  .guard-chapter { min-height: 0; display: flex; flex-direction: column; padding-block: 56px; }
  .guard-chapter .rail { order: 2; padding: 32px 0 0; max-width: 650px; }
  .guard-chapter::before { content: ''; order: 1; display: block; width: 100%; }
  .guard-chapter .guard-mobile-panel { order: 1; width: 100%; }
  .guard-mobile-panel .guard-panel { position: relative; inset: auto; display: grid; opacity: 1; visibility: visible; transform: none; }
  .guard-mobile-panel .guard-panel .frm { max-height: none; }
  .guard-panel .frm__foot--phone { flex-wrap: wrap; }
  #detective-story { display: block; padding: 0 24px; }
  .detective-stage { display: none; }
  .detective-chapter { min-height: 0px; }
  .detective-chapter { min-height: 0; display: flex; flex-direction: column; padding-block: 56px; }
  .detective-chapter .rail { order: 2; padding: 32px 0 0; max-width: 650px; }
  .detective-chapter::before { content: ''; order: 1; display: block; width: 100%; }
  .detective-chapter .detective-mobile-panel { order: 1; width: 100%; }
  .detective-mobile-panel .detective-panel { position: relative; inset: auto; display: grid; opacity: 1; visibility: visible; transform: none; }
  .detective-mobile-panel .detective-panel .frm { max-height: none; }
  .detective-panel .frm__foot--phone { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  #hero .hero__title { font-size: 44px; }
  #hero .duo { padding-block: 38px 44px; }
  #hero .hero__sub { font-size: 16px; line-height: 1.6; }
  .guard-panel--watch .cmp__line { font-size: 18px; }
  .guard-panel--watch .cmp__field { padding: 15px; }
  .guard-panel--watch .conv { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #hero .scene { transform: none !important; }
  :is(#hero,#guard-story) *, .cinema-atmosphere::before, .cinema-atmosphere::after { animation: none !important; transition: none !important; }
}

/* Detective is Guard's mirrored counterpart: the page side and backdrop change,
   while frame dimensions, control anatomy and chapter rhythm deliberately do not. */
#detective-story { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr); gap: clamp(44px, 6vw, 96px); padding: 0 max(24px, calc((100vw - var(--container)) / 2)); background: linear-gradient(240deg, var(--surface-inverse) 0%, var(--surface-inverse-alt) 54%, var(--surface-inverse) 100%); color: var(--on-surface-inverse); --night-ground: var(--surface-inverse); --night-ink: var(--on-surface-inverse); --night-muted: var(--paper-200); --night-rule: var(--outline-inverse); --night-panel: var(--surface-inverse-alt); }
#detective-story > .detective-stage { z-index: 1; }
#detective-story > .detective-chapters { position: relative; z-index: 1; }
.detective-stage { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 8px); align-self: start; height: calc(100svh - var(--header-h) - 16px); min-height: 700px; display: grid; align-items: center; }
/* Measured natural panel heights: watch 667, alert 158, memory 371,
   ask 596, answer 624, case 330. A 700-840px shell was taller than five
   of six, which is where the awkward voids came from. 620 fits the
   busiest panels and lets the media-bearing ones expand into it. */
.detective-stage__shell { position: relative; width: 100%; height: min(620px, calc(100svh - var(--header-h) - 40px)); min-height: 540px; }
.detective-panel { position: absolute; inset: 0; display: grid; align-items: stretch; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 500ms var(--cinema-ease), transform 500ms var(--cinema-ease), visibility 500ms; }
.detective-panel.is-active { opacity: 1; visibility: visible; transform: none; z-index: 2; }
.detective-panel .obj { width: 100%; max-width: none; margin: 0; height: 100%; min-height: 0; }
.detective-panel .frm { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: rgba(13,24,29,.97); box-shadow: 0 24px 80px rgba(0,0,0,.24); border-radius: 2px; }
.detective-panel .frm > * { flex: 0 0 auto; }
.detective-panel .frm__foot { margin-top: auto; }
.detective-panel .frm__band { border-bottom: 1px solid var(--outline-inverse); background: rgba(8,16,21,.96); }
.detective-panel .story-media__screen { width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; overflow: hidden; }
.detective-panel .story-media__screen > img, .detective-panel .story-media__screen > video { width: 100%; height: 100%; object-fit: cover; transform: none; max-height: none; }
.detective-panel .story-media__screen > video { visibility: visible; opacity: 0; transition: opacity 400ms var(--cinema-ease); }
.detective-panel.is-active .story-media__screen > video { visibility: visible; }
.detective-panel .story-media.is-playing .story-media__screen > video { opacity: 1; }
.detective-panel .story-media__screen > img { transition: opacity 300ms var(--cinema-ease); }
.detective-panel .story-media.is-playing .story-media__screen > img { opacity: 0; }

/* The ask uses the same generous composer and restrained status treatment as Watch. */
.detective-panel--ask .conv { position: relative; padding: clamp(18px, 2.4vw, 32px); gap: 22px; }
.detective-panel--ask .cmp__field { position: relative; background: rgba(4,12,16,.65); border-color: rgba(181,199,201,.40); padding: 22px; }
.detective-panel--ask .cmp__line { min-height: 112px; font-size: 22px; line-height: 1.5; }
.detective-panel--ask .cmp__ph { font-size: 13px; color: var(--paper-200); margin-bottom: 14px; }
.detective-panel--ask .ink { min-height: 3em; }
.detective-panel--ask .ink__full { font: inherit; clip-path: none; white-space: normal; }
.detective-ready .detective-panel--ask .ink__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.detective-type { display: inline; color: var(--on-surface-inverse); white-space: normal; }
.detective-panel--ask .cmp.is-typing .detective-type::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.1em; background: var(--primary); animation: cinema-caret 700ms steps(1, end) infinite; }
.detective-panel--ask .cmp__send { min-width: 132px; padding: 12px 18px; color: var(--on-primary); background: var(--primary); border-color: var(--primary); transition: transform 180ms var(--cinema-ease), background 180ms; }
.detective-panel--ask .cmp__send:hover { background: var(--paper-100); color: var(--ink-950); }
.detective-panel--ask .cmp.is-armed .cmp__send { transform: scale(.96); background: var(--paper-100); color: var(--ink-950); }
.detective-panel--ask .reply, .detective-panel--ask .state { transition: opacity 420ms var(--cinema-ease), transform 420ms var(--cinema-ease); }
.detective-panel--ask #ask-state { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font: var(--mono-sm); letter-spacing: var(--tracking-mono-sm); }
.detective-panel--ask #ask-state .state__t { color: var(--on-surface-inverse); }
.detective-panel--ask .search-activity { color: var(--primary); }
.detective-cursor { position: absolute; z-index: 5; left: 0; top: 0; width: 26px; height: 30px; pointer-events: none; opacity: 0; color: var(--on-surface-inverse); filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--surface-inverse) 80%, transparent)); transition: transform 520ms var(--cinema-ease), opacity 180ms; }
.detective-cursor svg { display: block; width: 100%; height: 100%; }
.detective-cursor[data-visible="true"] { opacity: 1; }

/* Footage stays primary; evidence is condensed into one readable, laptop-safe row. */
.detective-panel--answer .results__asked { margin: 0; padding: 10px 22px; color: var(--paper-200); border-bottom: 1px solid var(--outline-inverse); font: var(--body-sm); }
.detective-panel--answer .story-media__controls { min-height: 0; height: 0; padding: 0; overflow: hidden; border: 0; }
.detective-panel--answer .results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px; }
.detective-panel--answer .res { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 8px; background: rgba(8,16,21,.5); border: 1px solid var(--outline-inverse); border-radius: 2px; }
.detective-panel--answer .res img { width: 100%; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.detective-panel--answer .res__meta { flex-direction: column; gap: 2px; color: var(--paper-200); font: var(--mono-xs); letter-spacing: var(--tracking-mono-xs); }
.detective-panel--answer .res__why { min-height: 2.8em; color: var(--on-surface-inverse); font-size: 13px; line-height: 1.4; }
/* grid-column:auto keeps night.css's old two-row evidence layout (.story
   .res__tags { grid-column: 2 }) from forcing this card into a second column:
   the tags row only exists on res--3, so only that card collapsed. */
.detective-panel--answer .res__tags { grid-column: auto; flex-wrap: wrap; gap: 4px; padding-top: 0; }
.detective-panel--answer .tag, .detective-panel--answer .mono { font-size: 10px; }
.detective-panel--answer .frm__foot { padding-block: 10px; background: var(--surface-inverse); }

/* The case panel keeps the base .frm hairline on every edge, exactly like
   ask/answer: the old accent trims — night.css's violet #act-7 border and the
   lime pack__rule stripe — are retired. A one-off stripe broke parity with
   the sibling panels and with the Guard shell. */
.detective-panel--case .pack__thumbs { padding: 16px; gap: 8px; }
.detective-panel--case .pack__thumbs img { border-color: var(--outline-inverse); border-radius: 2px; }
.detective-panel--case .pack__note { padding: 0 18px 12px; color: var(--paper-200); font: var(--mono-sm); letter-spacing: var(--tracking-mono-sm); text-transform: none; }
.detective-panel--case .pack__acts { gap: 10px; padding: 0 18px 14px; }
.detective-panel--case .pack__acts .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px; color: var(--on-primary); background: var(--primary); border: 1px solid var(--primary); border-style: solid; border-radius: 2px; font-weight: 600; }
.detective-panel--case .frm__foot { padding-block: 10px; background: var(--surface-inverse); }

.detective-chapters { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: clamp(300px, 46svh, 520px); padding-block: clamp(30svh, 34svh, 380px); }
#detective-story .detective-chapter { min-height: 0 !important; display: block; background: transparent; color: var(--on-surface-inverse); }
#detective-story .detective-chapter .rail { position: relative; max-width: 470px; padding: 0; background: transparent; color: var(--on-surface-inverse); }
#detective-story .detective-chapter .eyebrow { margin: 0 0 10px; }
#detective-story .detective-chapter .head { margin: 0 0 16px; line-height: 1.2; }
#detective-story .detective-chapter .body { margin: 0 0 12px; line-height: 1.62; }
#detective-story .detective-chapter .body:last-child { margin-bottom: 0; }
#detective-story .detective-chapter .head, #detective-story .detective-chapter .lede { color: var(--on-surface-inverse); }
#detective-story .detective-chapter .body, #detective-story .detective-chapter .eyebrow { color: var(--paper-200); }
.detective-chapter__marker { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border: 1px solid var(--outline-inverse); border-radius: 2px; color: var(--primary); transition: border-color 400ms var(--cinema-ease), background 400ms var(--cinema-ease); }
.detective-chapter__marker svg { width: 21px; height: 21px; }
.detective-chapter.is-active .detective-chapter__marker { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.detective-paused .detective-stage__shell { animation-play-state: paused; }
.detective-pending, .detective-result-pending { opacity: 0; visibility: hidden; }

/* Scoped adaptation of the supplied Falling Pattern. It is a decorative,
   brand-token layer and never escapes the Detective story's clipping box. */
.detective-story__content { z-index: 1; }

@media (min-width: 861px) and (max-height: 820px) {
  /* Short laptops: the answer panel must sit inside the stage with no hidden
     overflow now that all three result cards carry full-height thumbnails, so
     footage, thumbs and chrome each give a little (700px shell at 1280x720,
     ~672px shell at 1366x768). */
  .detective-panel--answer .story-media__screen { max-height: 330px; }
  .detective-panel--answer .results__asked { padding-block: 3px; }
  .detective-panel--answer .results { gap: 5px; padding: 5px; }
  .detective-panel--answer .res { gap: 2px; padding: 4px; }
  .detective-panel--answer .res img { max-height: 88px; }
  .detective-panel--answer .res__why { min-height: 2.55em; font-size: 12px; line-height: 1.3; }
  .detective-panel--answer .frm__foot { padding-block: 4px; }
}

@media (max-width: 860px) {
  #detective-story { display: block; padding: 0 24px; }
  #detective-story .detective-chapters { gap: 0; padding-block: 0; }
  .detective-stage { display: none; }
  #detective-story .detective-chapter { display: flex; flex-direction: column; padding-block: 56px; }
  #detective-story .detective-chapter .rail { order: 2; padding: 32px 0 0; max-width: 650px; }
  .detective-chapter::before { content: ''; order: 1; display: block; width: 100%; }
  .detective-chapter .detective-mobile-panel { order: 1; width: 100%; }
  .detective-mobile-panel .detective-panel { position: relative; inset: auto; display: grid; opacity: 1; visibility: visible; transform: none; }
  .detective-mobile-panel .detective-panel .frm { max-height: none; }
  .detective-panel--ask .cmp__line { font-size: 20px; }
  .detective-panel--ask .cmp__field { padding: 18px; }
  .detective-panel--ask .conv { padding: 18px; }
  .detective-panel--answer .results { grid-template-columns: 1fr; }
  .detective-panel--answer .res { grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; }
  .detective-panel--answer .res img { grid-row: 1 / span 3; }
  .detective-panel--answer .res__why { min-height: 0; }
  .detective-panel--answer .res__tags { grid-column: 2; }
}
@media (max-width: 420px) {
  .detective-panel--ask .cmp__line { font-size: 18px; }
  .detective-panel--ask .cmp__field { padding: 15px; }
  .detective-panel--ask .conv { padding: 14px; }
  .detective-panel--answer .res { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #detective-story * { animation: none !important; transition: none !important; }
}

/* ── Alert HUD (Akash, 2026-09-11) ──────────────────────────────────────────
   The alert used to be a separate stack BELOW the footage, so the clip was
   pushed out of view exactly when the alert arrived — two screens for one
   event, and a panel taller than its siblings. Now it is a callout card laid
   OVER the clip: footage stays on screen while the alert lands (U02).
   Placed left: the subject box sits at x 480-580 of a 1000-wide viewBox
   (48-58%), so a card ending at 46% never covers the subject. */
.guard-panel--alert .story-media__screen { position: relative; flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.guard-panel--alert .story-media { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hud { position: absolute; left: clamp(12px, 2.4%, 24px); top: clamp(12px, 3%, 26px); width: min(46%, 330px); display: flex; flex-direction: column; gap: 10px; padding: clamp(12px, 1.5vw, 17px); border: 1px solid var(--outline-inverse); border-radius: 3px; background: rgba(8,16,21,.90); backdrop-filter: blur(10px); box-shadow: 0 16px 44px rgba(0,0,0,.45); }
.hud .card__in { display: flex; flex-direction: column; gap: 9px; }
.hud .card__title { margin: 0; font: var(--headline-sm); font-size: clamp(17px, 1.35vw, 21px); color: var(--on-surface-inverse); }
.hud .reply__who { margin: 0; font-size: 11px; }
.hud .card__why { font-size: clamp(12px, .92vw, 13.5px); line-height: 1.5; }
.hud .card__reason { font-size: clamp(11px, .85vw, 12.5px); line-height: 1.45; }
.hud .card__meta { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 11px; }
.hud .card__acts { margin: 0; display: flex; gap: 7px; }
.hud .card__acts .btn { flex: 1 1 0; min-height: 32px; padding: 6px 8px; font-size: 11.5px; text-align: center; }
.guard-panel--alert .card__watch { flex: 0 0 auto; margin: 0; padding: 13px clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--night-rule); color: var(--paper-200); font: var(--mono-sm); letter-spacing: var(--tracking-mono-sm); }

@media (max-width: 900px) {
  /* Narrow: the card would swallow the frame, so it returns to a band under
     the clip — still one panel, still one event. */
  .hud { position: static; width: auto; border: 0; border-top: 1px solid var(--night-rule); border-radius: 0; background: rgba(8,16,21,.96); backdrop-filter: none; box-shadow: none; }
}

/* The pre-HUD rules above padded #moment-state and .card__in as full-width rows
   in the old stacked layout. Inside the HUD they are card contents, not rows —
   reset the inherited padding/borders so the callout reads as one object. */
.hud #moment-state { min-height: 0; margin: 0; padding: 0; border: 0; background: none; }
.hud .card__in { padding: 0; }

/* .obj--card / --results / --plate / --watch each carry their own
   --stage-w-* width from site.css (450px, 435px, 640px...), set back when
   these panels were separate free-standing acts. Inside one shared sticky
   shell that is exactly the morph Sujay saw: the box changed width per
   chapter. The shell owns the width now; the variants keep their interiors. */
.guard-panel .obj, .detective-panel .obj { width: 100%; }

/* Locking every panel to one height (correct — it stops the morph) left the
   shorter panels with a block of dead space above the footer. Give each panel
   ONE designated element the leftover room, so the frame is always full without
   ever changing size. Chosen per panel by what should breathe, not by accident. */
.guard-panel--watch .conv { flex: 1 1 auto; min-height: 0; }
.guard-panel--memory .story-media,
.detective-panel--ask .conv,
.detective-panel--answer .story-media,
.detective-panel--case .pack__thumbs { flex: 1 1 auto; min-height: 0; }
/* `flex:1 1 auto` + `aspect-ratio:auto` collapsed these to 0 height — the
   screen is a flex ITEM with no intrinsic height to grow from, so the corridor
   plate and the answer clip both rendered as a black void. `flex-basis: 0` +
   `height: 100%` on the media gives it the leftover room explicitly. */
.guard-panel--memory .story-media__screen,
.detective-panel--answer .story-media__screen { flex: 1 1 0; min-height: 220px; aspect-ratio: auto; height: auto; }
.guard-panel--memory .story-media__screen > :is(img, video),
.detective-panel--answer .story-media__screen > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guard-panel--memory .story-media__screen,
.detective-panel--answer .story-media__screen { position: relative; }
.detective-panel--case .pack__thumbs img { height: 100%; object-fit: cover; }

/* .story-media takes the leftover 734px correctly, but it is display:block, so
   the __screen inside it cannot stretch to fill — it sat at its 220px floor.
   Make the wrapper a column flex so the screen actually receives that height. */
.guard-panel--memory .story-media,
.detective-panel--answer .story-media { display: flex; flex-direction: column; }

/* .res--3 carries a 4th child (.res__tags) its siblings lack. Forcing the image
   to `grid-row: 1` created an implicit SECOND column (86px + 92px) and halved
   the thumbnail — worse than the bug. The cards are single-column stacks; just
   let every image span the full track so all three thumbs match. */
.detective-panel--answer .res { grid-template-columns: minmax(0, 1fr); }
.detective-panel--answer .res > * { grid-column: 1; }

/* Result cards were content-height, so card 2 (one-line caption, no match tag)
   sat lower than its siblings and left a hole. Stretch all three to the tallest. */
.detective-panel--answer .results { align-items: stretch; }
.detective-panel--answer .res { height: 100%; }

/* Watch: locking the frame height left ~265px of void above the footer. The
   conversation is the element that should own that room — space its turns out
   rather than stacking them at the top of an 840px box. */
/* Watch has 3 short conversation turns; the shell is 840px because the Alert
   and Memory panels need it. Tried and rejected: space-evenly and
   space-between (split one hole into two ~165px holes), and stretching the
   composer (a 194px-tall "Set a watch" button). The turns simply stack at the
   top, as a chat does, and the remaining room stays as one quiet margin above
   the footer rather than being spread into gaps that look like mistakes. */
.guard-panel--watch .conv { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(22px, 2.8vh, 36px); padding-block: clamp(22px, 2.8vh, 34px); }

/* Tried inflating the composer to soak up the leftover height; it produced a
   message box with a 125px hole between the query and the Search button — an
   unfilled form, not a sent message. The composer stays its natural size and
   the SHELL comes down to meet the content instead (below). */
.guard-panel--watch .cmp__line,
.detective-panel--ask .cmp__line { min-height: 112px; }

/* ── Two products, two rooms ────────────────────────────────────────────────
   The sticky "PATROLLER AI GUARD" pill was doing this job badly: a floating
   label with no context, reading as a status light. Replaced by (a) a real
   full-height introduction before each story, and (b) a ground colour change
   so the visitor FEELS the change of product instead of reading a badge.
   Guard = the ink ground (night, watching). Detective = a lighter slate
   (daylight review, after the fact). Same building, different room. */
.product-intro { position: relative; display: grid; place-items: center; min-height: 66svh; padding: clamp(64px, 9svh, 110px) max(24px, calc((100vw - var(--container)) / 2)); color: var(--on-surface-inverse); overflow: hidden; }
.product-intro--guard { background: linear-gradient(180deg, var(--surface-inverse) 0%, var(--surface-inverse-alt) 100%); }
.product-intro--detective { background: linear-gradient(180deg, #202A31 0%, #27333B 100%); }
.product-intro__in { max-width: 760px; }
.product-intro__num { margin: 0 0 18px; font: var(--mono-sm); letter-spacing: var(--tracking-mono-sm); text-transform: uppercase; color: var(--acid-500); }
.product-intro--detective .product-intro__num { color: var(--paper-200); }
.product-intro__name { margin: 0 0 20px; font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 5.4vw, 70px); line-height: 1.06; letter-spacing: var(--tracking-headline); color: var(--paper-100); }
.product-intro__line { margin: 0 0 40px; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.5; color: var(--paper-200); max-width: 30em; }
.product-intro__beats { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--outline-inverse); }
.product-intro__beats li { display: flex; align-items: baseline; gap: 10px; font: var(--mono-sm); letter-spacing: var(--tracking-mono-sm); text-transform: uppercase; color: var(--paper-200); }
.product-intro__beats span { color: var(--acid-500); }
.product-intro--detective .product-intro__beats span { color: var(--paper-100); }

/* Detective's story ground matches its introduction, so the colour carries
   through the whole product rather than resetting at the first chapter. */
/* Detective's ground is a cool slate, not the Guard ink. Measured against the
   brand ramp so it still reads as the same family: ink-950 #11110F is night
   watching; this is the daylight review room. The tonal jump is the point —
   at 4% difference the two products looked like one long section. */
#detective-story { background: linear-gradient(160deg, #27333B 0%, #1E272E 55%, #27333B 100%); }
#detective-story .frm { background: rgba(12,18,22,.97); }

/* The particle wave sits behind everything in its section. */
.pw__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#guard-story, #detective-story { position: relative; }

@media (max-width: 860px) {
  .product-intro { min-height: 0; padding-block: clamp(56px, 9svh, 96px); }
  .product-intro__beats { gap: 8px 20px; }
}

/* Last ~100px: the conversation turns stack at the top and the footer is
   pinned, so the slack pooled above the footer. Push it BETWEEN the turns
   instead — a conversation with air between messages reads correctly, where
   one big gap above a footer reads as an unfinished layout. The composer is
   explicitly excluded from growing (it became an empty form when it did). */
.guard-panel--watch .conv,
.detective-panel--ask .conv { justify-content: space-between; }
.guard-panel--watch .cmp,
.detective-panel--ask .cmp { flex: 0 0 auto; }

/* ── Outcome line (replaces the "Match 0.87 / 0.91" score pills) ────────────
   Sujay, 2026-09-11: the score was cookie-cutter, aimed at an ML reader rather
   than the Babu-Log buyer, and appeared in NO requirement, storyboard line or
   handoff instruction — it was invented during implementation, so it was an
   unevidenced product claim in customer-facing copy. Replaced with what the
   product actually produces. A score also undersells: "87% sure" plants doubt
   where the real claim is "here is the evidence, ready to send".
   Styled as a readable line, not a pill: a tag chip says "metric", and this is
   a sentence. Acid stays as a left rule so it still reads as system output. */
.outcome { display: block; padding: 1px 10px 1px 10px; border-left: 2px solid var(--acid-500); color: var(--paper-100); font-size: 12.5px; line-height: 1.45; letter-spacing: 0; text-transform: none; }
.detective-panel--answer .outcome { border-left-color: var(--primary); }
.hud .outcome { font-size: 12px; }
/* The outcome line is a sentence, not a chip, so card 3 grew taller than its
   siblings and sat flush on the card edge. Give the card room and let the
   line breathe; the .res height:100% rule above keeps all three level. */
.detective-panel--answer .res__tags { display: block; padding-top: 6px; }
.detective-panel--answer .res { padding-bottom: 12px; }
.detective-panel--answer .res--3 .outcome { font-size: 11.5px; line-height: 1.4; }