/* Shared outer frame for active screens; the intro keeps its wide promo layout. */
body:has(#app>.funnel-screen-layout:not(.intro-reference):not([data-funnel-screen="screen_02"])) .app-shell{
  width:min(1180px,100%);
  padding:0 24px 48px;
}

body:has(#app>.funnel-screen-layout:not(.intro-reference):not([data-funnel-screen="screen_02"])) .app-shell>.topbar{
  width:min(1180px,100vw);
  min-height:76px;
  height:76px;
  margin:0;
  padding:0 24px;
}

body:has(#app>.funnel-screen-layout:not(.intro-reference):not([data-funnel-screen="screen_02"])) .app-shell>.topbar .brand img{width:126px}

#app>.funnel-screen-layout.funnel-screen-layout{
  display:flex;
  width:100%;
  max-width:none;
  min-height:calc(100svh - 156px);
  margin:8px auto 26px;
  padding:18px 0 28px;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
}

#app>.funnel-screen-layout>.funnel-screen-layout__main{
  width:100%;
  max-width:none;
  min-height:0;
}

/* One quiet back action in the shared product header. */
body:has(#app>.funnel-screen-layout) .app-shell>.topbar .brand{margin-right:auto}

body:has(#app>.funnel-screen-layout) .app-shell>.topbar .topbar__back{
  display:flex;
  align-items:center;
}

body:has(#app>.funnel-screen-layout) .app-shell>.topbar .topbar__back[hidden]{display:none}

body:has(#app>.funnel-screen-layout) .app-shell>.topbar .topbar__back>.funnel-back-button{
  display:inline-flex;
  width:auto;
  min-width:0;
  min-height:36px;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0 var(--space-3);
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--ui-text-muted);
  box-shadow:none;
  font-size:13px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}

body:has(#app>.funnel-screen-layout) .app-shell>.topbar .topbar__back>.funnel-back-button:hover{
  background:var(--ui-bg);
  color:var(--ui-text);
  transform:translateX(-1px);
}

body:has(#app>.funnel-screen-layout) .app-shell>.topbar .topbar__back>.funnel-back-button:focus-visible{
  outline:3px solid var(--ui-accent-focus);
  outline-offset:2px;
}

/* Short questions share one stable content area and bottom action position. */
#app>.funnel-screen-layout--question>.funnel-screen-layout__main{
  display:flex;
  width:min(780px,100%);
  min-height:0;
  margin:0 auto;
  padding:0;
  flex:1;
  flex-direction:column;
}

#app>.funnel-screen-layout--question .panel{
  display:flex;
  min-height:0;
  flex:1;
  flex-direction:column;
}

#app>.funnel-screen-layout--question .funnel-screen-layout__navigation{
  position:static;
  bottom:auto;
  margin-top:auto;
  padding-top:var(--space-3);
}

#app>.funnel-screen-layout--question.career-calibration-screen .funnel-screen-layout__navigation{
  margin-top:0;
}

/* Centered transition states keep their artifact size inside the shared frame. */
#app>.funnel-screen-layout.funnel-screen-layout--centered{justify-content:center}
#app>.funnel-screen-layout--centered[data-funnel-screen="screen_09"]>.funnel-screen-layout__main{width:min(620px,100%);margin-inline:auto}
#app>.funnel-screen-layout--centered[data-funnel-screen="screen_10"]>.funnel-screen-layout__main{width:min(920px,100%);margin-inline:auto}

/* Split screens use the same rail while preserving their existing inner composition. */
#app>.funnel-screen-layout--split[data-funnel-screen="screen_02"]{
  min-height:max(calc(100svh - 156px),628px);
  padding:0;
}
#app>.funnel-screen-layout--split[data-funnel-screen="screen_02"]>.funnel-screen-layout__main{
  display:flex;
  width:100%;
  min-height:100%;
  margin:0;
  border-radius:34px;
  flex:1;
}
#app>.funnel-screen-layout--split[data-funnel-screen="screen_21"]>.funnel-screen-layout__main{width:100%}

/* Workday artifacts use one shell; screen 13 no longer adds a second outer card. */
#app>.funnel-screen-layout--workspace>.funnel-screen-layout__main{width:100%}
#app>.funnel-screen-layout--workspace .task-start-anchor{scroll-margin-top:102px}
#app>.funnel-screen-layout--workspace[data-funnel-screen="screen_11"]>.funnel-screen-layout__main,
#app>.funnel-screen-layout--workspace[data-funnel-screen="screen_12"]>.funnel-screen-layout__main{
  width:min(1080px,100%);
  margin-inline:auto;
}

#app>.funnel-screen-layout--workspace.combined-interview-screen>.funnel-screen-layout__main{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Result pages keep the same outer rail even when their inner documents differ. */
#app>.funnel-screen-layout--result>.funnel-screen-layout__main{width:100%}
#app>.funnel-screen-layout--result[data-funnel-screen="screen_27"]>.funnel-screen-layout__main{
  width:100%;
  margin-inline:0;
}

/* Keep the right-side intro artwork in one coordinate system. */
.intro-reference__visual-composition{display:contents}
.intro-reference__visual-composition>img{
  position:absolute;
  height:auto;
  pointer-events:none;
}

@media(min-width:1101px){
  .intro-reference__visual-composition{
    position:absolute;
    bottom:0;
    left:50%;
    display:block;
    width:min(100%,542.5px);
    max-height:100%;
    aspect-ratio:217 / 208;
    transform:translateX(-50%);
  }
}

@media(min-width:1351px){
  .intro-reference__day{top:calc(-6% - 10px);left:40%;width:max-content;min-width:31%;transform:none}
  .intro-reference__task--data{top:-10%;left:3%;width:33%;transform:none}
  .intro-reference__task--process{top:1%;right:0;width:38%;transform:none}
  .intro-reference__task--requirements{right:3%;bottom:7%;width:34%;transform:none}
  .intro-reference .hero-visual--intro-collage .hero-visual__woman{
    left:54%;
    bottom:0;
    height:100%;
    transform:translateX(calc(-50% - 25px));
  }
  .intro-reference .hero-visual--intro-collage .analyst-scene-flower{
    top:auto;
    right:-3%;
    bottom:2%;
    width:22%;
    transform:rotate(-8deg);
  }
}

/* Screen 02 continues the intro on the same desktop rail. */
@media(min-width:1101px){
  body:has(#app>[data-funnel-screen="screen_02"]) .app-shell{
    width:100%;
    padding:0 var(--space-6) 42px;
  }

  body:has(#app>[data-funnel-screen="screen_02"]) .app-shell>.topbar{
    left:auto;
    width:100%;
    min-height:0;
    height:88px;
    padding:0 var(--space-1);
    transform:none;
  }

  body:has(#app>[data-funnel-screen="screen_02"]) .app-shell>.topbar .brand img{width:142px}
  #app>.funnel-screen-layout[data-funnel-screen="screen_02"]{width:100%;max-width:none}
}

@media(min-width:1101px) and (max-width:1350px),
       (min-width:1400px){
  body:has(#app>[data-funnel-screen="screen_02"]) .app-shell>.topbar{height:70px}
  body:has(#app>[data-funnel-screen="screen_02"]) .app-shell>.topbar .brand img{width:120px}
}

@media(min-width:901px){
  #app>.intro-reference .intro-screen__content>.lead,
  .intro-reference .intro-screen__content>.intro-reference__benefits{margin-top:var(--space-7)}
  .intro-reference .intro-screen__content>.intro-cta-block,
  .intro-reference .intro-screen__content>.intro-reference__meta{margin-top:var(--space-6)}
  .intro-reference__meta-item{
    min-height:24px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    font-weight:500;
  }
}

@media(min-width:901px) and (max-width:1100px){
  .intro-reference .hero-kicker{margin-bottom:calc(var(--space-6) + var(--space-4))}
}

@media(min-width:1101px){
  .intro-reference .hero-kicker{margin-bottom:calc(var(--space-9) + var(--space-4))}
}

/* Keep the intro frame tied to its content instead of tall desktop viewports. */
@media(min-width:1351px){
  #app>.intro-reference.funnel-screen-layout{
    min-height:min(700px,calc(100svh - 156px));
  }
}

@media(min-width:1600px){
  #app>.intro-reference.funnel-screen-layout{
    --intro-wide-benefits-shift:var(--space-6);
    --intro-wide-actions-shift:var(--space-9);
    --intro-wide-composition-x:calc(var(--space-5) * -1);
    --intro-wide-composition-y:calc(var(--space-7) - 2px);
  }
  .intro-reference .intro-screen__content>.intro-reference__benefits{
    transform:translateY(calc(-48px + var(--intro-wide-benefits-shift)));
  }
  .intro-reference .intro-screen__content>.intro-cta-block,
  .intro-reference .intro-screen__content>.intro-reference__meta{
    transform:translateY(calc(-48px + var(--intro-wide-actions-shift)));
  }
  .intro-reference__visual-composition{
    transform:translateX(calc(-50% + var(--intro-wide-composition-x))) translateY(var(--intro-wide-composition-y));
  }
}

@media(min-width:1900px) and (min-height:1000px){
  #app>.intro-reference.funnel-screen-layout{width:80vw}
  .intro-reference .hero-visual--intro-collage{transform:translate(var(--space-8),calc(var(--intro-stage-y,28px) + 50px))}
}

/* Keep the intro CTA details visible on short laptop viewports. */
@media(min-width:1101px) and (max-height:760px){
  body:has(#app>.intro-reference) .app-shell{padding-bottom:var(--space-3)}
  body:has(#app>.intro-reference) .app-shell>.topbar{height:64px}

  #app>.intro-reference.funnel-screen-layout{
    min-height:0;
    margin:var(--space-1) auto 0;
    padding:0 0 var(--space-4);
  }

  .intro-reference .intro-screen__main{
    padding:var(--space-4) var(--space-7) var(--space-4) var(--space-8);
  }

  .intro-reference .intro-screen__content{padding-top:var(--space-2);padding-bottom:0;transform:translateX(3%)}
  .intro-reference .intro-screen__content>h1,
  #app>.intro-reference .intro-screen__content>.lead,
  .intro-reference .intro-screen__content>.intro-reference__benefits,
  .intro-reference .intro-screen__content>.intro-cta-block,
  .intro-reference .intro-screen__content>.intro-reference__meta{transform:translateY(-50px)}
  .intro-reference .hero-kicker{margin-bottom:calc(var(--space-9) + var(--space-3))}
  #app>.intro-reference .lead{margin-top:var(--space-3);font-size:16px}
  .intro-reference__benefits{margin-top:var(--space-3)}
  .intro-reference .intro-cta-block{margin-top:var(--space-4)}
  .intro-reference__meta{margin-top:var(--space-3)}
  .intro-reference .hero-visual--intro-collage{height:480px;min-height:480px;transform:translateY(calc(var(--intro-stage-y,28px) + 30px))}

  body:has(#app>[data-funnel-screen="screen_02"]) .app-shell{padding-bottom:var(--space-3)}
  body:has(#app>[data-funnel-screen="screen_02"]) .app-shell>.topbar{
    min-height:64px;
    height:64px;
  }

  #app>.funnel-screen-layout[data-funnel-screen="screen_02"]{
    min-height:0;
    height:514px;
    margin:var(--space-1) auto 0;
    padding:0;
  }

  #app>.funnel-screen-layout[data-funnel-screen="screen_02"]>.company-invitation-window{
    min-height:0;
    height:100%;
  }

  #app>.funnel-screen-layout[data-funnel-screen="screen_02"] .company-invitation-window__body{
    min-height:0;
    height:100%;
  }

  #app>.funnel-screen-layout[data-funnel-screen="screen_02"] .company-invitation-window__copy{
    padding:var(--space-6) var(--space-8);
  }

  #app>.funnel-screen-layout[data-funnel-screen="screen_02"] .company-invitation-window__company{
    margin-bottom:var(--space-6);
  }

  #app>.funnel-screen-layout[data-funnel-screen="screen_02"] .company-invitation-window__company>img{
    width:72px;
    height:72px;
    flex-basis:72px;
  }

  #app>.funnel-screen-layout[data-funnel-screen="screen_02"] .company-invitation-window__kicker{margin-bottom:var(--space-3)}
  #app>.funnel-screen-layout[data-funnel-screen="screen_02"] .company-invitation-window h1{font-size:40px}
  #app>.funnel-screen-layout[data-funnel-screen="screen_02"] .company-invitation-window__lead{
    margin-top:var(--space-4);
    font-size:14px;
    line-height:1.45;
  }

  #app>.funnel-screen-layout[data-funnel-screen="screen_02"] .company-invitation-window__footer{margin-top:var(--space-6)}
  #app>.funnel-screen-layout[data-funnel-screen="screen_02"] .company-invitation-window__visual{min-height:0;padding:0}
  #app>.funnel-screen-layout[data-funnel-screen="screen_02"] .company-invitation-window__collage{min-height:0}
}

@media(max-width:900px){
  #app>.funnel-screen-layout--split[data-funnel-screen="screen_02"]{
    min-height:0;
    height:auto;
  }

  #app>.funnel-screen-layout--split[data-funnel-screen="screen_02"]>.funnel-screen-layout__main{
    min-height:0;
  }
}

@media(max-width:700px){
  body:has(#app>.funnel-screen-layout) .app-shell{padding:0 16px 24px}

  body:has(#app>.funnel-screen-layout) .app-shell>.topbar{
    width:100vw;
    min-height:64px;
    height:64px;
    padding:0 16px;
  }

  body:has(#app>.funnel-screen-layout) .app-shell>.topbar .brand img{width:108px}
  body:has(#app>.intro-reference) .app-shell>.topbar{width:100%}
  body:has(#app>[data-funnel-screen="screen_02"]) .app-shell>.topbar{width:100%}

  #app>.funnel-screen-layout.funnel-screen-layout{
    min-height:calc(100svh - 88px);
    margin:6px auto 22px;
    padding:12px 0 22px;
  }

  #app>.funnel-screen-layout--question>.funnel-screen-layout__main{width:100%;padding:0}
  #app>.funnel-screen-layout--question .funnel-screen-layout__navigation{padding-top:var(--space-2)}
  #app>.funnel-screen-layout--workspace .task-start-anchor{scroll-margin-top:82px}
  #app>.funnel-screen-layout--split[data-funnel-screen="screen_02"]{
    min-height:0;
    height:auto;
    padding:0;
  }
  #app>.intro-reference.funnel-screen-layout{width:100%;max-width:none;min-height:0}
  #app>.intro-reference.funnel-screen-layout>.funnel-screen-layout__main{min-height:0}
  #app>.funnel-screen-layout--split[data-funnel-screen="screen_02"]>.funnel-screen-layout__main{border-radius:22px}
}

@media(max-width:360px){
  body:has(#app>.funnel-screen-layout) .app-shell>.topbar{gap:var(--space-2);padding-inline:var(--space-3)}
  body:has(#app>.funnel-screen-layout) .app-shell>.topbar .brand img{width:100px}
  body:has(#app>.funnel-screen-layout) .app-shell>.topbar .topbar__back>.funnel-back-button{width:36px;padding:0;font-size:0}
  body:has(#app>.funnel-screen-layout) .app-shell>.topbar .topbar__back>.funnel-back-button::before{content:"←";font-size:16px}
  body:has(#app>.funnel-screen-layout) .app-shell>.topbar .reset-button{padding-inline:var(--space-3);font-size:12px}
}

@media(min-width:901px){
  .intro-reference .intro-screen__content{translate:20px 0}
  .intro-reference .intro-screen__content>.intro-cta-block{margin-top:15px}
}

@media(min-width:1351px) and (max-width:1899px){
  .intro-reference .intro-screen__content>.intro-cta-block{margin-top:var(--space-8)}
}

@media(prefers-reduced-motion:reduce){
  body:has(#app>.funnel-screen-layout) .app-shell>.topbar .topbar__back>.funnel-back-button{transition:none}
}