/* Product tour: independent of the illustrative terminal tabs below. */
#showcase { scroll-margin-top:100px; padding-top:36px; }
.tour-intro { display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:end; margin-bottom:28px; }
.tour-intro h2 { font:800 clamp(2rem,4.3vw,3.8rem)/1.06 var(--display); letter-spacing:-.045em; max-width:15ch; margin:10px 0 0; }
.tour-intro p { color:var(--muted); font-size:16px; line-height:1.7; }
.tour-proof { display:flex; gap:9px; align-items:center; margin-top:20px; font:500 11px/1.5 var(--mono); letter-spacing:.04em; color:var(--accent); }
.tour-proof i { width:7px; height:7px; border-radius:2px; background:currentColor; flex:none; }
.tour-tabs { display:flex; gap:4px; overflow-x:auto; padding:6px; background:var(--surface2); border:1px solid var(--line); border-radius:14px 14px 0 0; scrollbar-width:thin; }
.tour-tabs button { flex:1; border:1px solid transparent; border-radius:8px; background:transparent; padding:13px 18px; color:var(--muted); font:600 13px/1.3 var(--sans); cursor:pointer; white-space:nowrap; }
.tour-tabs button[aria-selected=true] { background:var(--surface); border-color:var(--line); color:var(--accent); box-shadow:0 2px 6px #10213a09; }
.tour-tabs button span { font:500 10px/1 var(--mono); opacity:.6; margin-right:7px; }
.tour-tabs button:focus-visible,.tour button:focus-visible,.tour a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.tour-panel { border:1px solid var(--line); border-top:0; border-radius:0 0 18px 18px; overflow:hidden; background:var(--surface); }
.tour-panel, .tour-caption > * { min-width:0; }
.tour [hidden] { display:none!important; }
.tour-screen { position:relative; aspect-ratio:1440/940; background:#e8eef8; overflow:hidden; }
.tour-screen img,.tour-screen video { display:block; width:100%; height:100%; object-fit:contain; }
.tour-play { position:absolute; left:24px; bottom:24px; display:flex; align-items:center; gap:10px; border:1px solid #9eb7eb; border-radius:99px; background:#fff; color:#173ead; padding:13px 20px; font:700 13px/1.3 var(--sans); box-shadow:0 8px 35px #10213a30; cursor:pointer; }
.tour-play svg { width:16px; height:16px; fill:currentColor; }
.tour-play { max-width:calc(100% - 24px); }
.tour-play svg { flex-shrink:0; }
.tour-caption { padding:25px 28px; display:grid; grid-template-columns:1fr 1.3fr; gap:30px; align-items:start; }
.tour-caption h3 { font:700 21px/1.25 var(--display); letter-spacing:-.025em; margin:0 0 7px; }
.tour-caption p { color:var(--muted); font-size:14px; line-height:1.7; margin:0; }
.tour-links { display:flex; gap:18px; margin-top:14px; flex-wrap:wrap; font-size:12px; }
.tour-links a,.tour-links button { color:var(--accent); text-decoration:underline; text-underline-offset:3px; font:600 12px/1.5 var(--sans); padding:0; border:0; background:none; cursor:pointer; }
.tour-transcript { color:var(--muted); font-size:13px; line-height:1.7; }
.tour-transcript summary { color:var(--ink); cursor:pointer; font-weight:600; }
.tour-transcript p { margin-top:9px; font-size:13px; }
.tour-note { margin:16px 0 0; color:var(--faint); font-size:12px; line-height:1.7; max-width:94ch; }
.model-preview { margin-top:72px; display:grid; grid-template-columns:.7fr 1.3fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); }
.model-copy { padding:38px 32px; display:flex; flex-direction:column; align-items:flex-start; }
.model-copy h3 { font:800 clamp(1.6rem,2.7vw,2.5rem)/1.1 var(--display); letter-spacing:-.035em; margin:12px 0 18px; }
.model-copy p { color:var(--muted); font-size:14px; line-height:1.75; }
.model-tag { display:inline-flex; padding:6px 8px; border:1px solid var(--line2); border-radius:5px; color:var(--accent); font:500 10px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.model-facts { list-style:none; padding:0; margin:16px 0 22px; display:grid; gap:10px; font:500 12px/1.5 var(--mono); color:var(--muted); }
.model-facts li::before { content:'↗'; color:var(--accent); margin-right:9px; }
.model-media { min-width:0; background:#0b182b; display:flex; flex-direction:column; justify-content:center; }
.model-media .tour-screen { aspect-ratio:16/10; background:#0b182b; }
.model-media img,.model-media video { display:block; width:100%; height:auto; object-fit:contain; }
.model-media figcaption { padding:14px 20px; color:#b6c8df; font:400 11px/1.6 var(--mono); background:#0b182b; }
.model-media figure { margin:0; }
.model-miniatures { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:16px; }
.model-miniatures figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.model-miniatures img { display:block; width:100%; height:auto; }
.model-miniatures figcaption { padding:14px 18px; font:500 12px/1.5 var(--mono); color:var(--muted); }
@media(max-width:850px) { .tour-intro { grid-template-columns:1fr; gap:20px; }.tour-intro h2 { max-width:22ch; }.model-preview { grid-template-columns:1fr; }.model-copy { padding:28px; }.model-facts { grid-template-columns:repeat(3,1fr); }.tour-caption { grid-template-columns:1fr; gap:18px; } }
@media(max-width:540px) { #showcase { padding-top:12px; }.tour-intro { margin-bottom:22px; }.tour-tabs { border-radius:10px 10px 0 0; }.tour-tabs button { padding:12px 14px; }.tour-tabs button span { display:none; }.tour-caption { padding:20px; }.tour-play { left:12px; bottom:12px; padding:10px 14px; font-size:12px; }.model-copy { padding:25px 22px; }.model-facts { grid-template-columns:1fr; }.model-miniatures { grid-template-columns:1fr; }.tour-screen { min-height:200px; }.tour-note { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .tour * { scroll-behavior:auto!important; transition:none!important; } }

/* Guided story: original screenshots, framed and cropped with CSS only. */
.story { --story-blue:#1d4ed8; position:relative; margin-top:34px; border:1px solid var(--line2); border-radius:22px; background:var(--surface); overflow:hidden; box-shadow:0 20px 60px #163c7310; }
.story-toolbar { min-height:58px; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 24px; border-bottom:1px solid var(--line); }
.story-toolbar-label { display:flex; align-items:center; gap:9px; font:600 12px var(--sans); color:var(--ink); }
.story-toolbar-label>span { color:var(--accent); font-size:20px; }
.story-controls { display:none; align-items:center; gap:8px; }
.story[data-enhanced] .story-controls { display:flex; }
.story-motion-note { color:var(--faint); font:400 10px var(--mono); margin-right:7px; }
.story-control { border:1px solid var(--line2); border-radius:7px; padding:7px 10px; background:var(--surface); color:var(--ink); cursor:pointer; font:600 11px var(--sans); min-height:32px; }
.story-control:hover { background:var(--soft); }
.story-control:disabled { cursor:default; color:var(--faint); opacity:.8; }
.story-canvas { display:grid; grid-template-columns:.77fr 1.4fr; min-height:475px; }
.story-copy { position:relative; display:flex; align-items:center; padding:42px 0 46px 35px; z-index:2; }
.story-kicker { display:block; color:var(--accent); font:500 10px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px; }
.story-copy h3 { font:800 clamp(26px,3vw,38px)/1.12 var(--display); letter-spacing:-.045em; color:var(--ink); margin:0 0 22px; }
.story-copy p { color:var(--muted); font:400 14px/1.8 var(--sans); max-width:31ch; }
.story-takeaway { display:flex; align-items:flex-start; gap:8px; font:500 11px/1.6 var(--sans); color:var(--faint); margin-top:28px; max-width:29ch; }
.story-takeaway>span { color:var(--accent); font:500 18px/1.1 var(--sans); }
.story-visual { position:relative; min-width:0; overflow:hidden; background:radial-gradient(ellipse at 55% 45%,#b9d1ff60,transparent 68%); }
.story-visual::before { content:''; position:absolute; inset:28px 8px 20px 10px; background-image:radial-gradient(var(--line2) .75px,transparent .75px); background-size:15px 15px; mask-image:radial-gradient(ellipse,#0009,transparent 75%); }
.story-scene { position:absolute; inset:0; opacity:0; visibility:hidden; }
.story-scene.is-active { opacity:1; visibility:visible; animation:story-scene-in .24s ease-out; }
/* Hide the previous scene immediately; overlapping fades double-render labels.
   Keep readable text on the pixel grid instead of translating or rotating it. */
@keyframes story-scene-in { from { opacity:0; } to { opacity:1; } }
.story-context { position:absolute; width:83%; right:-4%; top:12%; border:1px solid var(--line2); border-radius:10px; overflow:hidden; opacity:.25; transform:rotate(-5deg); box-shadow:0 16px 32px #163c7310; }
.story-context img { display:block; width:100%; height:auto; }
.story-main { position:absolute; left:5%; right:4%; top:34%; background:#fff; border:1px solid #b8cdeb; border-radius:12px; overflow:hidden; box-shadow:0 24px 50px #153a7130,0 3px 8px #153a7110; }
.story-frame-bar { min-height:39px; display:flex; gap:11px; align-items:center; padding:8px 14px; border-bottom:1px solid #d7e1ee; color:#345273; background:#f9fbff; font:500 10.5px/1.4 var(--mono); letter-spacing:.035em; }
.story-frame-dots { display:flex; align-items:center; gap:4px; flex:none; }
.story-frame-dots i { display:block; width:4px; height:4px; border-radius:50%; background:#9cb3d2; }
.story-frame-label { margin-left:auto; font:500 9.5px var(--sans); color:#5c7290; white-space:nowrap; }
.story-crop { position:relative; overflow:hidden; aspect-ratio:var(--crop-ratio); background:#f4f7fc; }
.story-crop img { display:block; position:absolute; width:var(--image-width); max-width:none; height:auto; left:var(--image-left); top:var(--image-top); user-select:none; }
.story-frame-foot { display:flex; justify-content:space-between; gap:12px; padding:10px 14px; color:#5c7290; background:#fff; border-top:1px solid #d7e1ee; font:400 9.5px/1.4 var(--mono); }
.story-detail { position:absolute; right:9%; top:11%; width:43%; padding:9px; border:1px solid #c4d5ed; border-radius:10px; background:#fff; box-shadow:0 12px 28px #153a7120; }
.story-detail-label { display:block; color:#5b7393; font:500 10px/1.4 var(--mono); text-transform:uppercase; letter-spacing:.09em; padding:0 3px 7px; }
.story-detail-crop { border-radius:4px; }
.story-callout { position:absolute; display:grid; grid-template-columns:6px minmax(0,1fr); align-items:center; gap:9px; left:12%; bottom:13%; max-width:84%; border:1px solid #a8c1f1; background:#edf4ff; border-radius:9px; padding:11px 14px; color:#173ead; font:600 13px/1.5 var(--sans); box-shadow:0 10px 20px #153a7115; }
.story-callout-text { min-width:0; overflow-wrap:break-word; }
.story-callout::before { content:''; position:absolute; width:1px; height:28px; background:#87a9e8; top:-29px; left:24px; }
.story-callout-dot { width:6px; height:6px; background:#345dde; border-radius:50%; flex-shrink:0; }
.story-pointer { position:absolute; left:63%; top:65%; filter:drop-shadow(0 2px 3px #153a7130); opacity:0; }
.story[data-running=true] .story-scene.is-active .story-pointer { animation:story-pointer 6.2s ease-in-out infinite; }
.story[data-running=false] .story-scene.is-active .story-pointer { opacity:1; }
@keyframes story-pointer { 0%,12% { opacity:0; transform:translate(35px,20px); } 28%,78% { opacity:1; transform:translate(0,0); } 88%,100% { opacity:0; transform:translate(-4px,-4px); } }
.story-scene[data-scene=incident] .story-main,.story-scene[data-scene=resolve] .story-main { left:11%; right:6%; top:19%; }
.story-scene[data-scene=incident] .story-detail { top:66%; right:12%; width:48%; }
.story-scene[data-scene=incident] .story-callout { bottom:14%; left:5%; max-width:45%; }
.story-scene[data-scene=incident] .story-pointer { top:39%; left:69%; }
.story-scene[data-scene=coordinate] .story-main { top:29%; left:3%; right:3%; }
.story-scene[data-scene=coordinate] .story-detail { top:62%; right:6%; width:85%; }
.story-scene[data-scene=coordinate] .story-callout { bottom:11%; left:8%; }
.story-scene[data-scene=coordinate] .story-pointer { top:51%; left:61%; }
.story-scene[data-scene=recover] .story-callout { color:#0b6a58; border-color:#9bcfbf; background:#eefbf5; }
.story-scene[data-scene=recover] .story-callout-dot { background:#087f5b; }
.story-scene[data-scene=resolve] .story-detail { top:72%; right:8%; width:72%; }
.story-scene[data-scene=resolve] .story-callout { top:10%; bottom:auto; left:7%; }
.story-scene[data-scene=resolve] .story-callout::before { top:auto; bottom:-29px; }
.story-scene[data-scene=resolve] .story-pointer { top:75%; left:75%; }
.story-visual-caption { display:block; padding:8px 24px 14px; text-align:center; color:var(--faint); font:400 10px/1.5 var(--mono); letter-spacing:.02em; }
.story-steps { display:none; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); background:var(--surface); }
.story[data-enhanced] .story-steps { display:grid; }
.story-step { position:relative; display:flex; align-items:center; gap:9px; text-align:left; border:0; border-right:1px solid var(--line); background:transparent; color:var(--muted); padding:19px 20px 22px; cursor:pointer; font:600 12px var(--sans); }
.story-step:last-child { border-right:0; }
.story-step:hover { background:var(--surface2); }
.story-step[aria-pressed=true] { background:var(--soft); color:var(--accent); }
.story-step-number { font:500 9px var(--mono); opacity:.7; }
.story-step-track { position:absolute; height:2px; left:20px; right:20px; bottom:12px; background:var(--line); border-radius:5px; overflow:hidden; }
.story-step-track>span { display:block; width:100%; height:100%; transform-origin:left; transform:scaleX(0); background:var(--accent); }
.story-step[aria-pressed=true] .story-step-track>span { transform:scaleX(var(--story-progress,0)); }
.story-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.story-note { font:400 11px/1.7 var(--sans); color:var(--faint); padding:15px 3px 0; max-width:100ch; }
.story-provenance { margin:12px 3px 0; color:var(--muted); font:400 11px/1.8 var(--sans); max-width:100ch; }
.story-provenance summary { display:inline-block; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.story-provenance p { margin:10px 0; }
.story-provenance a { color:var(--accent); }
.tour-recordings { margin-top:32px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.tour-recordings>summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:21px 24px; color:var(--ink); cursor:pointer; list-style:none; }
.tour-recordings>summary::-webkit-details-marker { display:none; }
.tour-recordings>summary strong { display:block; font:700 15px var(--sans); }
.tour-recordings>summary small { display:block; margin-top:4px; color:var(--muted); font:400 12px/1.5 var(--sans); }
.tour-recordings-arrow { color:var(--accent); font-size:21px; transition:transform .2s; }
.tour-recordings[open] .tour-recordings-arrow { transform:rotate(90deg); }
.tour-recordings-body { padding:0 14px 18px; }
.tour-recordings .tour-note { padding:0 10px; }
@media(max-width:1000px) { .story-canvas { grid-template-columns:.78fr 1.3fr; min-height:420px; }.story-copy{padding:32px 0 36px 25px}.story-copy h3{font-size:30px}.story-copy p{font-size:13px}.story-step{padding-inline:14px}.story-step-track{left:14px;right:14px}.story-frame-bar{font-size:9px;padding-inline:9px}.story-frame-label{display:none}.story-callout{font-size:12px;padding:9px 11px}.story-motion-note{display:none}.story-detail{right:6%;width:45%} }
@media(max-width:700px) {
  .story { margin-top:25px; border-radius:15px; }
  .story-toolbar { min-height:54px; padding:12px 14px; gap:8px; }
  .story-toolbar-label { font-size:10px; gap:6px; }
  .story-toolbar-label>span { font-size:17px; }
  .story-control { font-size:10px; padding:7px 8px; min-height:34px; }
  .story-canvas { grid-template-columns:1fr; }
  .story-copy { padding:27px 25px 0; align-items:flex-start; min-height:235px; }
  .story-kicker { margin-bottom:12px; font-size:9px; }
  .story-copy h3 { font-size:29px; margin-bottom:13px; }
  .story-copy p { max-width:42ch; font-size:13px; line-height:1.7; }
  .story-takeaway { margin-top:14px; max-width:44ch; font-size:10px; }
  .story-visual { min-height:330px; }
  .story-context { top:10%; }
  .story-main { top:30%; left:4%; right:4%; }
  .story-frame-bar { min-height:32px; font-size:9px; }
  .story-frame-foot { font-size:8.5px; padding:8px 10px; }
  .story-detail { top:5%; right:7%; width:45%; }
  .story-detail-label { font-size:8.5px; }
  .story-callout { bottom:13%; left:8%; max-width:88%; font-size:12px; padding:9px 11px; }
  .story-visual-caption { font-size:9px; bottom:9px; }
  .story-scene[data-scene=incident] .story-main,.story-scene[data-scene=resolve] .story-main { top:9%; left:7%; right:7%; }
  .story-scene[data-scene=incident] .story-detail { top:65%; right:8%; width:49%; }
  .story-scene[data-scene=incident] .story-callout { bottom:16%; max-width:44%; }
  .story-scene[data-scene=coordinate] .story-main { top:18%; }
  .story-scene[data-scene=coordinate] .story-detail { top:57%; }
  .story-scene[data-scene=coordinate] .story-callout { bottom:16%; }
  .story-scene[data-scene=resolve] .story-detail { top:69%; right:7%; width:76%; }
  .story-scene[data-scene=resolve] .story-callout { top:1%; left:3%; }
  .story-steps { overflow:hidden; }
  .story-step { flex-direction:column; gap:6px; align-items:center; text-align:center; padding:13px 3px 22px; font-size:9px; }
  .story-step-number { font-size:8px; }
  .story-step-track { left:9px; right:9px; bottom:10px; }
  .story-note,.story-provenance { font-size:10px; padding-left:1px; padding-right:1px; }
  .tour-recordings>summary { padding:18px; }
  .tour-recordings>summary small { font-size:11px; }
  .tour-recordings-body { padding:0 9px 14px; }
}
@media(max-width:360px) { .story-toolbar-label { max-width:135px; line-height:1.4; }.story-controls{gap:4px}.story-control{font-size:9px;padding:6px}.story-copy{padding-inline:20px;min-height:300px}.story-visual{min-height:300px}.story-step{font-size:8px}.story-frame-bar{font-size:8.5px;gap:7px}.story-callout{font-size:11.5px} }
@media(max-width:1150px) {
  /* Stacked foreground cards keep phone and tablet callouts clear of the UI.
     Hidden scenes share a grid cell, reserving the tallest scene's height. */
  .story-visual { display:grid; }
  .story-scene { position:relative; inset:auto; grid-area:1/1; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:24px 20px; }
  .story-scene[data-scene] .story-main { position:relative; inset:auto; width:100%; flex:none; }
  .story-scene[data-scene] .story-detail { position:relative; inset:auto; width:90%; max-width:310px; align-self:flex-end; flex:none; }
  .story-scene[data-scene] .story-callout { position:relative; inset:auto; max-width:100%; align-self:flex-start; flex:none; }
  .story-callout::before { display:none; }
  .story-pointer { display:none; }
}
@media(prefers-reduced-motion:reduce) { .story * { animation:none!important; transition:none!important; }.story-pointer{display:none}.story-step[aria-pressed=true] .story-step-track>span{transform:scaleX(1)!important} }
@media(pointer:coarse) {
  .story-control, .tour-play, .tour-tabs button { min-height:44px; }
  .tour-links :is(button,a), .tour-transcript summary, .story-provenance summary { display:inline-flex; align-items:center; min-height:44px; }
  .story-controls { flex-wrap:wrap; }
  .story-toolbar { flex-wrap:wrap; }
}