/* 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_23"]{
  display:block;
  width:min(760px,100%);
  max-width:760px;
  margin:20px auto 40px;
  padding:16px;
  border-radius:26px;
  background:#f5f5f5;
}
#app>.funnel-screen-layout--result[data-funnel-screen="screen_23"]>.funnel-screen-layout__main{
  width:100%;
  max-width:680px;
  margin-inline:auto;
}
#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;
  }

  body:has(#app>.funnel-screen-layout.funnel-screen-layout--result[data-funnel-screen="screen_23"]) .app-shell{
    padding:0 16px 24px;
  }

  #app>.funnel-screen-layout.funnel-screen-layout--result[data-funnel-screen="screen_23"]{
    width:100%;
    max-width:none;
    margin:6px auto 22px;
    padding:12px;
    border-radius: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}
}

/* Screen 01: audience chips. */
.intro-reference .hero-kicker.hero-audience{
  display:flex;
  width:min(100%,620px);
  min-height:0;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ui-text);
  box-shadow:none;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
}

.intro-reference .hero-audience>span{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  gap:8px;
  padding:8px 13px 8px 11px;
  border:1px solid #ddd8ff;
  border-radius:999px;
  background:linear-gradient(135deg,#f3f1ff 0%,#fff 100%);
  box-shadow:0 8px 20px rgba(56,44,126,.08),inset 0 1px 0 rgba(255,255,255,.9);
  animation:intro-audience-reveal .5s cubic-bezier(.22,1,.36,1) both;
}

.intro-reference .hero-audience>span::before{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:#6c55ff;
  box-shadow:0 0 0 4px rgba(108,85,255,.12);
  content:"";
}

.intro-reference .hero-audience>span:nth-child(1){border-color:#d9eab9;background:linear-gradient(135deg,#f4ffe5 0%,#fff 100%)}
.intro-reference .hero-audience>span:nth-child(1)::before{background:#8fbd35;box-shadow:0 0 0 4px rgba(143,189,53,.13)}
.intro-reference .hero-audience>span:nth-child(2){animation-delay:.08s}
.intro-reference .hero-audience>span:nth-child(3){border-color:#f0cfdd;background:linear-gradient(135deg,#fff0f6 0%,#fff 100%);animation-delay:.16s}
.intro-reference .hero-audience>span:nth-child(3)::before{background:#e56f9b;box-shadow:0 0 0 4px rgba(229,111,155,.13)}

@media(max-width:600px){
  .intro-reference .hero-kicker.hero-audience{
    width:100%;
    gap:8px;
    font-size:13px;
  }

  .intro-reference .hero-audience>span{min-height:35px;gap:7px;padding:7px 11px 7px 10px}
}

@keyframes intro-audience-reveal{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:translateX(0)}
}

/* Screen 01: lightweight benefits row under the CTA. */
.intro-reference .intro-reference__meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:10px;
}

.intro-reference .intro-reference__meta-item{
  position:relative;
  display:flex;
  min-width:0;
  min-height:54px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 8px;
  border:1px solid var(--ui-border-soft);
  border-radius:var(--radius-pill);
  background:var(--ui-surface);
  box-shadow:var(--shadow-card);
  font-size:13px;
  font-weight:600;
  line-height:1.25;
  white-space:normal;
  text-align:center;
}

.intro-reference .intro-reference__meta-item+.intro-reference__meta-item::before{display:none}

.intro-reference .intro-reference__meta-item svg{
  width:22px;
  height:22px;
  flex:0 0 22px;
  padding:3px;
  border-radius:7px;
  background:#effbe0;
  stroke:#739d28;
  stroke-width:1.8;
}

.intro-reference .intro-reference__meta-item:nth-child(2) svg{background:#f0edff;stroke:#654cff}
.intro-reference .intro-reference__meta-item:nth-child(3) svg{background:#fff0f6;stroke:#d85e8b}

@media(max-width:600px){
  .intro-reference .intro-reference__meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .intro-reference .intro-reference__meta-item{min-height:48px;gap:5px;padding:4px;font-size:11px;line-height:1.15}
  .intro-reference .intro-reference__meta-item svg{width:18px;height:18px;flex-basis:18px;padding:2px;border-radius:6px}
}

@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}
  .intro-reference .hero-audience>span{animation:none}
}

/* Screen 22 ends with a full-bleed gift band, so no outer whitespace follows it. */
body:has(#app>.funnel-screen-layout[data-funnel-screen="screen_22"]:not(.intro-reference):not([data-funnel-screen="screen_02"])) .app-shell{padding-bottom:0}
#app>[data-funnel-screen="screen_22"].funnel-screen-layout{margin-bottom:0;padding-bottom:0}