/* The name owns the first viewport. The collaboration story starts below it. */
.landing { --story-top:76px; --story-height:calc(100svh - var(--story-top)); background:#f5f7fb; }
.landing-hero { position:relative; min-height:var(--story-height); display:grid; place-items:center; padding:65px 24px 130px; isolation:isolate; overflow:hidden; }
.hero-content { position:relative; text-align:center; z-index:1; }
.hero-content h1 { margin:0; font-family:'Segoe UI','Arial',sans-serif; font-size:clamp(5rem,13vw,12.5rem); font-weight:850; letter-spacing:-.075em; line-height:1.05; color:#182d49; }
.hero-wordmark { display:block; white-space:nowrap; }
.hero-wordmark>span { color:#ce582f; }
.hero-subtitle { margin-top:24px; font-size:clamp(1.2rem,2.1vw,1.8rem); font-weight:600; letter-spacing:.03em; }
.hero-description { color:#627086; margin:22px 0 35px; font-size:1rem; line-height:1.9; }
.mobile-break { display:none; }
.hero-content .system-entry { min-width:206px; }
.hero-landscape { position:absolute; width:100%; height:100%; inset:0; z-index:-1; pointer-events:none; }
.hero-contours { fill:none; stroke:#738eae; stroke-width:1; opacity:.13; }
.hero-skyline { fill:#516b8e; opacity:.04; }
.landing-scroll { position:absolute; bottom:33px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:13px; color:#627086; font-size:.78rem; white-space:nowrap; padding:7px 18px; }
.scroll-stem { height:27px; width:1px; background:#8090a9; position:relative; }
.scroll-stem::after { content:''; position:absolute; width:6px; height:6px; border-right:1px solid #8090a9; border-bottom:1px solid #8090a9; transform:rotate(45deg); bottom:0; left:-3px; }
.collaboration-story { background:#edf2f8; border-top:1px solid #dce3ee; scroll-margin-top:var(--story-top); }
.story-pin { max-width:1280px; margin:auto; padding:32px 56px 25px; display:flex; flex-direction:column; }
.story-topline { display:flex; justify-content:space-between; color:#63738c; font-size:.75rem; letter-spacing:.01em; margin-bottom:22px; gap:16px; }
.story-scroll-hint { white-space:nowrap; }
.story-captions { position:relative; min-height:124px; flex-shrink:0; text-align:center; }
.story-caption { margin:auto; max-width:760px; }
.story-caption:not(:last-child) { display:none; }
.scene-number { font-family:'Segoe UI',sans-serif; color:#7b8aa0; font-size:.73rem; letter-spacing:.14em; display:block; margin-bottom:9px; }
.story-caption h2 { font-size:clamp(1.4rem,2.4vw,2.15rem); letter-spacing:-.05em; line-height:1.4; }
.story-caption p { color:#5d6c81; font-size:.88rem; line-height:1.8; margin-top:10px; word-break:keep-all; }
.story-stage { position:relative; width:100%; max-width:1000px; margin:auto; height:420px; min-height:300px; flex:1 0 300px; }
.story-connections { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.story-connections path { fill:none; stroke-linecap:round; }
.story-base { stroke:#c9d6e8; stroke-width:1.4; }
.story-outbound { stroke:#6179b1; stroke-width:2; stroke-dasharray:1; }
.story-inbound { stroke:#1b847c; stroke-width:2; stroke-dasharray:1; }
.story-send-dot { fill:#6179b1; }
.story-return-dot { fill:#1b847c; }
.story-hub { position:absolute; width:320px; height:278px; left:8%; top:50%; margin-top:-139px; padding:45px 19px 16px; }
.story-hub-shell { position:absolute; inset:0; background:#fff; border:1px solid #bfcee5; border-radius:19px; box-shadow:0 16px 45px #304b7010; }
.story-hub-label { position:absolute; left:21px; top:17px; display:flex; gap:8px; align-items:center; color:#455c85; font-size:.8rem; font-weight:700; }
.story-hub-label .icon { width:17px; height:17px; }
.story-incident { position:relative; border:1px solid #ead7cc; border-radius:11px; background:#fff8f2; padding:15px 17px; }
.incident-origin { display:flex; gap:7px; align-items:center; color:#a34622; font-size:.74rem; margin-bottom:10px; }
.incident-origin .icon { width:16px; height:16px; }
.story-incident>strong { display:block; font-size:1.2rem; letter-spacing:-.035em; line-height:1.5; }
.story-address { display:block; font-size:.76rem; color:#786a65; margin-top:5px; line-height:1.6; }
.story-common-fields { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; padding:17px 8px 0; font-size:.76rem; color:#5a6b83; }
.story-common-fields>span::before { content:''; display:inline-block; width:3px; height:3px; border-radius:50%; background:#879dbb; margin:0 7px 3px 0; }
.story-shared-update { display:flex; align-items:center; justify-content:center; gap:7px; position:absolute; left:0; right:0; bottom:12px; padding:0 10px; font-size:.75rem; color:#146f69; min-height:32px; }
.story-shared-update .icon { width:17px; height:17px; }
.story-tasks { position:absolute; top:14px; bottom:14px; right:7%; width:260px; display:grid; grid-template-rows:repeat(5,minmax(0,1fr)); gap:13px; }
.story-task { position:relative; min-height:0; display:flex; align-items:center; gap:13px; padding:8px 17px; border:1px solid #ccd8e9; border-radius:10px; background:#fff; }
.story-task-icon { color:#506897; display:flex; }
.story-task strong { display:block; font-size:.88rem; font-weight:700; line-height:1.3; }
.story-task-detail { display:block; font-size:.72rem; margin-top:5px; color:#6c7b91; line-height:1.5; }
.story-task-result { width:5px; height:5px; background:#1b847c; border-radius:50%; margin-left:auto; flex-shrink:0; }
.story-exchange-label { position:absolute; left:38%; right:28%; bottom:1px; text-align:center; font-size:.7rem; color:#61799f; height:24px; }
.story-exchange-label>span { position:absolute; inset:0; white-space:nowrap; }
.exchange-back { color:#146f69; }
.story-chapters { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:860px; width:100%; margin:25px auto 0; flex-shrink:0; }
.story-chapters button { text-align:left; padding:9px 0; border-radius:0; }
.chapter-track { display:block; height:2px; background:#cdd8e7; overflow:hidden; }
.chapter-track>span { display:block; height:100%; background:#536b9c; transform-origin:left; }
.chapter-label { display:flex; align-items:center; gap:10px; margin-top:12px; font-size:.78rem; color:#536780; }
.chapter-label small { font-family:'Segoe UI',sans-serif; color:#8190a4; font-size:.68rem; }
.story-chapters [aria-current="step"] .chapter-label { color:#203858; font-weight:700; }
.story-summary { max-width:860px; margin:0 auto; padding:30px 30px 50px 50px; color:#51637d; }
.story-summary li { padding:10px 0; }
.story-summary h3 { font-size:1rem; margin-bottom:8px; }
.story-summary p { font-size:.86rem; line-height:1.8; }
.landing-footer { max-width:1280px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:auto; padding:32px 56px; color:#7c899b; font-size:.75rem; }
.landing-footer>span:first-child { color:#243a58; font-family:'Segoe UI',sans-serif; font-weight:700; font-size:.95rem; }
.back-to-entry { color:#5b6e8a; white-space:nowrap; padding:10px 0; }
/* Enhanced state is opt-in. A failed/unsupported animation leaves a readable diagram. */
.story-enhanced .collaboration-story { height:calc(var(--story-height) * 5); }
.story-enhanced .story-pin { position:sticky; top:var(--story-top); height:var(--story-height); min-height:0; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; }
.story-enhanced .story-topline { grid-row:1; }
.story-enhanced .story-captions { grid-row:2; }
.story-enhanced .story-stage { grid-row:3; height:auto; min-height:0; margin:0 auto; align-self:stretch; }
.story-enhanced .story-chapters { grid-row:4; margin-top:24px; }
.story-enhanced .story-caption { display:block; position:absolute; inset:0; }
.story-enhanced .story-summary { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.story-static .story-chapters,.story-static .story-scroll-hint { display:none; }
.story-static .story-pin { min-height:650px; }
@media(max-width:1000px) {
  .story-pin { padding-left:30px; padding-right:30px; }
  .story-hub { width:280px; left:3%; }
  .story-tasks { right:2%; width:230px; }
  .story-exchange-label { left:35%; right:27%; }
}
@media(max-width:800px) {
  .landing { --story-top:66px; }
  .hero-content h1 { font-size:clamp(4.4rem,13.4vw,7rem); }
  .story-pin { padding:25px 24px 18px; }
  .story-caption p { max-width:560px; margin:10px auto 0; }
  .story-hub { width:250px; left:0; padding-left:15px; padding-right:15px; }
  .story-tasks { width:205px; right:0; }
  .story-task { padding:11px 13px; gap:9px; }
  .story-task-detail { font-size:.69rem; }
  .story-exchange-label { display:none; }
  .landing-footer { padding:25px 24px; }
}
@media(max-width:600px) {
  .landing-hero { padding:50px 19px 115px; }
  .hero-content h1 { font-size:clamp(3.55rem,14.8vw,5.6rem); letter-spacing:-.065em; }
  .hero-subtitle { font-size:1.15rem; letter-spacing:0; margin-top:20px; }
  .hero-description { font-size:.84rem; margin:19px 0 28px; }
  .mobile-break { display:block; }
  .hero-content .system-entry { min-width:185px; font-size:.95rem; }
  .landing-scroll { bottom:25px; font-size:.72rem; }
  .story-pin { padding:20px 17px 13px; }
  .story-topline { font-size:.67rem; margin-bottom:18px; }
  .story-scroll-hint { display:none; }
  .story-captions { min-height:133px; }
  .scene-number { font-size:.66rem; margin-bottom:9px; }
  .story-caption h2 { font-size:1.25rem; line-height:1.5; letter-spacing:-.055em; }
  .story-caption p { font-size:.77rem; line-height:1.75; max-width:330px; margin-top:8px; }
  .story-stage { height:330px; min-height:285px; flex-basis:285px; }
  .story-hub { width:45%; height:280px; margin-top:-140px; padding:43px 9px 12px; }
  .story-hub-shell { border-radius:13px; }
  .story-hub-label { left:10px; top:16px; font-size:.71rem; gap:5px; }
  .story-hub-label .icon { width:13px; height:13px; }
  .story-incident { padding:11px 9px; border-radius:7px; }
  .incident-origin { font-size:.65rem; gap:3px; margin-bottom:7px; line-height:1.5; }
  .incident-origin .icon { display:none; }
  .story-incident>strong { font-size:.9rem; line-height:1.5; word-break:keep-all; }
  .story-address { font-size:.7rem; margin-top:6px; word-break:keep-all; }
  .story-common-fields { font-size:.7rem; gap:8px 2px; padding:12px 0 0; }
  .story-common-fields>span::before { display:none; }
  .story-shared-update { bottom:11px; padding:0 10px; font-size:.68rem; text-align:center; line-height:1.65; gap:4px; word-break:keep-all; }
  .story-shared-update .icon { display:none; }
  .story-tasks { width:43%; top:10px; bottom:10px; gap:10px; }
  .story-task { padding:8px 9px; gap:7px; }
  .story-task .icon { width:17px; height:17px; }
  .story-task strong { font-size:.75rem; white-space:nowrap; }
  .story-task-detail { display:none; }
  .story-task-result { position:absolute; right:6px; top:6px; width:3px; height:3px; }
  .story-chapters { gap:11px; margin-top:19px; }
  .chapter-label { font-size:.7rem; margin-top:9px; gap:0; }
  .chapter-label small { display:none; }
  .landing-footer { flex-wrap:wrap; padding:24px 20px; font-size:.65rem; gap:14px; }
  .landing-footer>span:nth-child(2) { order:3; width:100%; }
}
@media(max-height:690px) {
  .story-pin { padding-top:15px; padding-bottom:8px; }
  .story-topline { margin-bottom:10px; }
  .story-captions { min-height:112px; }
  .story-caption h2 { font-size:1.35rem; }
  .story-caption p { font-size:.77rem; }
  .story-stage { min-height:260px; flex-basis:260px; }
  .story-hub { transform-origin:center; }
  .story-chapters { margin-top:10px; }
}
@media(max-width:600px) and (max-height:690px) {
  .landing-hero { padding-top:25px; padding-bottom:90px; }
  .hero-description { margin:14px 0 20px; }
  .hero-subtitle { margin-top:15px; }
  .landing-scroll { bottom:15px; gap:8px; }
  .scroll-stem { height:19px; }
  .story-topline { display:none; }
  .story-captions { min-height:115px; }
  .story-caption h2 { font-size:1.15rem; }
  .story-caption p { font-size:.74rem; }
  .story-stage { min-height:263px; flex-basis:263px; }
  .story-tasks { gap:8px; }
  .story-chapters { margin-top:9px; }
}
@media(prefers-reduced-motion:reduce) {
  .collaboration-story { height:auto!important; }
  .story-pin { position:relative!important; top:auto!important; height:auto!important; }
}
@media(max-height:539px) {
  .landing-hero { padding:18px 20px 62px; }
  .hero-content h1 { font-size:clamp(2.8rem,13vh,4.5rem); }
  .hero-subtitle { font-size:1rem; margin-top:10px; }
  .hero-description { font-size:.75rem; margin:8px 0 13px; line-height:1.5; }
  .hero-content .system-entry { padding:9px 20px; min-height:38px; font-size:.85rem; }
  .mobile-break { display:none; }
  .landing-scroll { bottom:9px; gap:6px; font-size:.65rem; }
  .scroll-stem { height:14px; }
}
/* Short desktop/panel viewports need all five readable cards to fit above the
   independently reserved navigation row; do not conceal overflow with clipping. */
@media(min-width:601px) and (max-height:760px) {
  .story-tasks { top:8px; bottom:8px; gap:8px; }
  .story-task { padding:5px 12px; gap:9px; }
  .story-task strong { font-size:.82rem; line-height:1.25; }
  .story-task-detail { font-size:.68rem; line-height:1.3; margin-top:3px; }
}
/* Keep the chapter explanation, diagram and controls readable at the minimum
   animated height; only the redundant introductory line is omitted. */
@media(max-height:590px) {
  .story-enhanced .story-topline { display:none; }
}