/* CP178. Expanded presentation is a temporary layout state of DA05, not a card.
   The application's 1440px width and its original tabs return when the intro stops.
   Video uses contain: preserve the whole frame at every ratio, never stretch/crop it. */
#km-da05-app .km-da05-welcome-flow{min-width:0}
#km-da05-app.km-intro-expanded{min-height:0;padding-bottom:0}
#km-da05-app.km-intro-expanded .km-da05-workspace{
 position:relative;width:100%;max-width:none;margin:0;padding:0;
}
#km-da05-app.km-intro-expanded .km-da05-content{
 position:relative;width:100%;max-width:none;margin:0;padding:0;scroll-margin:0;
}
#km-da05-app.km-intro-expanded .km-da05-tools{
 position:absolute;top:16px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);
 width:calc(100% - 48px);max-width:1440px;margin:0;padding:0;z-index:60;
}
#km-da05-app.km-intro-expanded .km-da05-footer{display:none}
#km-da05-app .km-da05-intro{
 width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
 background:#10141b;overflow:hidden;
}
#km-da05-app .km-da05-intro-hero{
 position:relative;isolation:isolate;overflow:hidden;width:100%;
 height:calc(100vh - var(--km-da05-header-height,80px) - var(--km-da05-adminbar,0px));
 height:var(--km-intro-height,calc(100dvh - var(--km-da05-header-height,80px) - var(--km-da05-adminbar,0px)));
 min-height:340px;background:#10141b;
}
#km-da05-app .km-da05-intro-stage{
 position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
 margin:0;padding:0;border:0;border-radius:0;aspect-ratio:auto;background:#10141b;
}
#km-da05-app .km-da05-intro-stage>video,#km-da05-app .km-da05-intro-stage>img{
 position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
 object-fit:contain;object-position:center;display:block;margin:0;padding:0;
 border:0;border-radius:0;transform:none;background:#10141b;pointer-events:none;
}
#km-da05-app .km-da05-intro-stage>img{z-index:1}
/* The video remains visible. Only the lower part receives enough contrast for the centred captions. */
#km-da05-app .km-da05-intro-stage::after{
 content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(180deg,rgba(10,14,20,.18) 0%,rgba(10,14,20,.04) 38%,rgba(10,14,20,.22) 62%,rgba(10,14,20,.72) 100%);
}
#km-da05-app .km-da05-intro-overlay{
 position:absolute;z-index:3;left:50%;right:auto;top:auto;
 bottom:clamp(136px,18vh,210px);transform:translateX(-50%);
 width:min(1180px,calc(100% - 56px));margin:0;padding:0;
 background:none;border:0;box-shadow:none;pointer-events:none;text-align:center;
}
#km-da05-app .km-da05-content h1.km-da05-intro-title{
 margin:0 auto;padding:0;max-width:1180px;font-family:Anton,Impact,"Arial Narrow",sans-serif;
 font-size:clamp(46px,5.2vw,78px);font-weight:400;line-height:.98;letter-spacing:-.015em;
 text-transform:uppercase;text-align:center;text-wrap:balance;text-shadow:0 3px 18px rgba(0,0,0,.58);
 color:#fff;overflow-wrap:normal;word-break:normal;opacity:0;transform:translateY(9px);
 transition:opacity .34s ease,transform .34s ease;will-change:opacity,transform;
}
#km-da05-app .km-da05-content h1.km-da05-intro-title.is-visible{opacity:1;transform:translateY(0)}
#km-da05-app .km-da05-intro-title>span{
 display:block;margin:0;padding:0;background:none;font:inherit;letter-spacing:inherit;
 line-height:inherit;color:#fff;-webkit-text-fill-color:currentColor;
}
#km-da05-app .km-da05-intro-title>[data-km-intro-accent]{color:var(--da-accent)}
#km-da05-app .km-da05-intro-actions{
 position:absolute;z-index:3;left:max(24px,calc((100% - 1440px)/2));
 right:max(24px,calc((100% - 1440px)/2));bottom:max(24px,env(safe-area-inset-bottom));
 display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
#km-da05-app .km-da05-intro-actions .km-btn{min-height:46px;padding:11px 18px;white-space:normal}
#km-da05-app .km-da05-intro-actions button:disabled{opacity:1;cursor:wait}
#km-da05-app .km-da05-intro-actions>p{margin:0;font-size:13px;line-height:1.5;color:#fff;text-shadow:0 2px 8px #000}
#km-da05-app .km-da05-intro-replay:focus-within{scroll-margin-bottom:100px}
@media(max-width:900px){
 #km-da05-app .km-da05-content h1.km-da05-intro-title{font-size:clamp(40px,6.3vw,58px)}
 #km-da05-app .km-da05-intro-overlay{width:min(820px,calc(100% - 40px));bottom:clamp(132px,17vh,184px)}
}
@media(max-width:600px){
 /* Keep the approved mobile dock. It overlays the scene; no full-width backdrop. */
 #km-da05-app.km-intro-expanded .km-da05-tools{
  position:fixed;top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-width:none;
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));margin:0;z-index:90;
 }
 #km-da05-app .km-da05-intro-hero{min-height:370px}
 #km-da05-app .km-da05-intro-overlay{left:50%;top:auto;width:calc(100% - 32px);bottom:calc(var(--km-intro-tools-height,80px) + 142px)}
 #km-da05-app .km-da05-content h1.km-da05-intro-title{font-size:clamp(34px,10vw,48px);line-height:1}
 #km-da05-app .km-da05-intro-stage::after{background:linear-gradient(180deg,rgba(10,14,20,.16),rgba(10,14,20,.03) 37%,rgba(10,14,20,.20) 58%,rgba(10,14,20,.78))}
 #km-da05-app .km-da05-intro-actions{
  left:20px;right:20px;bottom:calc(var(--km-intro-tools-height,80px) + 16px);gap:10px;
 }
 #km-da05-app .km-da05-intro-actions>p{flex-basis:100%;font-size:12px}
}
@media(max-height:620px) and (min-width:601px){
 #km-da05-app .km-da05-intro-hero{min-height:290px}
 #km-da05-app .km-da05-intro-overlay{top:auto;bottom:104px}
 #km-da05-app .km-da05-content h1.km-da05-intro-title{font-size:clamp(32px,5vw,46px)}
 #km-da05-app .km-da05-intro-actions{bottom:16px}
}
/* A single welcome surface, rather than a detached replay button. */
#km-da05-app .km-da05-welcome-surface{border:1px solid #596170;border-radius:12px;padding:clamp(24px,2.4vw,36px);background:var(--da-panel);min-width:0}
#km-da05-app .km-da05-welcome-surface>.km-da05-welcome{padding:0;border:0;border-radius:0;background:none}
#km-da05-app .km-da05-welcome h1{font-size:clamp(32px,3.25vw,48px);font-weight:750;line-height:1.12;max-width:30ch;margin:0 0 22px;text-wrap:balance;letter-spacing:-.035em;text-shadow:none}
#km-da05-app .km-da05-welcome .km-da05-eyebrow{margin:0 0 18px}
#km-da05-app .km-da05-welcome .km-da05-lead{font-size:16px;max-width:78ch;margin:0 0 30px;line-height:1.6}
#km-da05-app .km-da05-welcome .km-da05-entry-pair{gap:20px}
#km-da05-app .km-da05-welcome .km-da05-entry-pair>a{background:#2b3039;border:1px solid #768193;padding:24px;border-radius:8px;transition:border-color .16s ease,background .16s ease}
#km-da05-app .km-da05-welcome .km-da05-entry-pair>a:hover{border-color:var(--da-accent);background:#303743}
#km-da05-app .km-da05-welcome .km-da05-entry-pair h2{font-size:26px;margin-top:0;letter-spacing:-.025em}
#km-da05-app .km-da05-welcome .km-da05-entry-pair p{font-size:15px;line-height:1.5;margin-bottom:20px}
#km-da05-app .km-da05-welcome .km-da05-entry-pair>a strong{background:none;color:var(--da-accent);-webkit-text-fill-color:currentColor;border:0;border-radius:0;padding:8px 0;min-height:44px;font-size:15px}
#km-da05-app .km-da05-welcome .km-da05-fineprint{font-size:13px;line-height:1.55;border-top:1px solid #505969;margin:24px 0 0;padding:18px 0 0}
#km-da05-app .km-da05-intro-replay{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:8px;margin:0}
#km-da05-app .km-da05-how-link{appearance:none;-webkit-appearance:none;border:0;border-radius:3px;background:none;box-shadow:none;color:var(--da-muted);-webkit-text-fill-color:currentColor;font:550 14px/1.4 "Avenir Next","Segoe UI",Arial,sans-serif;text-transform:none;letter-spacing:0;min-height:44px;display:inline-flex;align-items:center;gap:9px;padding:8px 0;cursor:pointer;text-align:left}
#km-da05-app .km-da05-how-link:hover{color:var(--da-text);background:none}
#km-da05-app .km-da05-how-link span{font-size:19px;color:var(--da-accent)}
#km-da05-app .km-da05-intro-replay p{font-size:14px;line-height:1.5;color:var(--da-muted);margin:0;max-width:70ch}
#km-da05-app .km-da05-intro-replay p:empty{display:none}
#km-da05-app .km-da05-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
#km-da05-app .km-da05-footer>div{display:flex;gap:24px;flex-wrap:wrap}

@media(max-width:600px){
 #km-da05-app .km-da05-welcome-surface{padding:24px 18px}
 #km-da05-app .km-da05-welcome h1{font-size:clamp(30px,7.3vw,34px);max-width:100%;line-height:1.12}
 #km-da05-app .km-da05-welcome .km-da05-lead{font-size:15px;margin-bottom:22px;line-height:1.5}
 #km-da05-app .km-da05-welcome .km-da05-entry-pair{gap:12px}
 #km-da05-app .km-da05-welcome .km-da05-entry-pair>a{padding:18px}
 #km-da05-app .km-da05-welcome .km-da05-entry-pair h2{font-size:23px;margin-right:38px}
 #km-da05-app .km-da05-welcome .km-da05-entry-pair p{font-size:14px;margin-right:35px;margin-bottom:10px}
 #km-da05-app .km-da05-welcome .km-da05-entry-pair .km-da05-icon{right:14px;top:18px;width:38px;height:36px}
 #km-da05-app .km-da05-welcome .km-da05-entry-pair>a strong{font-size:14px}
 #km-da05-app .km-da05-intro-replay{gap:8px}
}
@media(prefers-reduced-motion:reduce){#km-da05-app .km-da05-intro *,#km-da05-app .km-da05-welcome *{animation:none!important;transition:none!important}}

/* CP178 · Phone/tablet: align the full uncropped video immediately below the
   header (and compact upper tabs on tablets). Captions use the real media
   footprint, not a guessed percentage of the viewport. Controls remain free. */
@media (max-width:1199px){
 #km-da05-app .km-da05-intro-stage>video,
 #km-da05-app .km-da05-intro-stage>img{
  top:var(--km-intro-media-top,0px);bottom:auto;
  height:var(--km-intro-media-height,100%);object-position:center top;
 }
 #km-da05-app .km-da05-intro-overlay{
  top:var(--km-intro-caption-top,60%);bottom:auto;
  width:calc(100% - 36px);
 }
 #km-da05-app .km-da05-intro-stage::after{
  background:linear-gradient(180deg,transparent 0%,transparent 55%,rgba(10,14,20,.12) 100%);
 }
}
@media (max-width:600px){
 #km-da05-app .km-da05-intro-overlay{
  top:var(--km-intro-caption-top,48%);bottom:auto;
  width:calc(100% - 28px);
 }
 #km-da05-app .km-da05-content h1.km-da05-intro-title{font-size:clamp(31px,9.5vw,44px)}
}
@media (max-height:620px) and (min-width:601px) and (max-width:1199px){
 #km-da05-app .km-da05-intro-overlay{top:var(--km-intro-caption-top,56%);bottom:auto}
}

/* Extra-short landscape viewports have no room for two full-size headline lines,
   five tabs and skip/pause controls. Scale only the caption, not the controls. */
@media (min-width:601px) and (max-width:1199px) and (max-height:430px){
 #km-da05-app .km-da05-content h1.km-da05-intro-title{
  font-size:clamp(23px,3.0vw,30px);line-height:.98;
 }
}

@media(max-width:360px){
 #km-da05-app .km-da05-content h1.km-da05-intro-title{
  font-size:clamp(25px,8vw,29px);
 }
}

/* Very short mobile landscape: the viewport cannot fit film, two lines and a
   two-row action strip. Keep actions above the fixed dock, without obscuring
   the media or shrinking touch targets. */
@media(max-width:600px) and (max-height:480px){
 #km-da05-app .km-da05-intro-hero{min-height:0}
 #km-da05-app .km-da05-content h1.km-da05-intro-title{
  font-size:clamp(21px,3.7vw,23px);line-height:.98;
 }
 #km-da05-app .km-da05-intro-actions{
  position:fixed;z-index:91;bottom:calc(var(--km-intro-tools-height,80px) + 10px);
 }
 #km-da05-app .km-da05-intro-actions>p{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;padding:0;margin:0;
 }
}

/* CP179 · Physical-tablet feedback: the 16:9 film was a miniature because
   CP178 fitted every component in a short viewport. On tablet landscape,
   grow the scene rather than shrinking the whole film. Scroll is intentional
   if the browser toolbar, five tabs and two-line captions cannot fit together. */
@media (min-width:601px) and (max-width:1199px) and (orientation:landscape) and (max-height:760px){
 #km-da05-app.km-intro-expanded .km-da05-tools{top:8px}
 #km-da05-app .km-da05-intro.km-intro-tablet-landscape{overflow:visible}
 #km-da05-app .km-da05-intro.km-intro-tablet-landscape .km-da05-intro-hero{
  height:var(--km-intro-content-height,var(--km-intro-height,100dvh));min-height:0;
 }
 #km-da05-app .km-da05-content h1.km-da05-intro-title{
  font-size:clamp(30px,3.5vw,40px);line-height:1.02;
 }
 #km-da05-app .km-da05-intro.km-intro-tablet-landscape .km-da05-intro-actions{
  position:fixed;left:16px;right:auto;bottom:12px;
  display:flex;gap:8px;flex-direction:column;align-items:flex-start;
  max-width:180px;z-index:69;
 }
 #km-da05-app .km-da05-intro.km-intro-tablet-landscape .km-da05-intro-actions .km-btn{
  min-height:44px;padding:8px 13px;
 }
 /* The accessible live status remains exposed to assistive tech, without
    adding another row over the live video image in very short viewports. */
 #km-da05-app .km-da05-intro.km-intro-tablet-landscape .km-da05-intro-actions>p{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;
 }
}