@font-face {
  font-family: 'Quiz Inter';
  src: url('inter-latin-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Welcome design: same page widths as the quiz, with readable fluid sizing. */
body.welcome-layout { background:#fdf2f2!important; }
body.welcome-layout .page {
  width:100%!important; max-width:620px!important; min-height:100svh!important;
  margin:0 auto!important; padding:0!important; border:0!important;
  border-radius:0!important; box-shadow:none!important; container-type:inline-size;
  background:
    radial-gradient(ellipse at 98% 0%, #fbe4e9 0%, transparent 37%),
    radial-gradient(ellipse at 1% 57%, #fce6ea 0%, transparent 38%),
    radial-gradient(ellipse at 55% 40%, #fffafa 0%, transparent 55%),
    #fdf2f2!important;
}
body.welcome-layout #header, body.welcome-layout #quizFooter {display:none!important;}
#welcomeLayout {
  width:100%!important; min-height:0!important; margin:0!important;
  padding:clamp(10px,1.6cqw,12px) clamp(14px,2.734375cqw,20px) max(20px,env(safe-area-inset-bottom))!important;
  text-align:center!important; color:#59042f!important;
  font-family:'Quiz Inter',Arial,sans-serif!important;
  background:none!important; box-shadow:none!important; border:0!important;
  animation:none!important;
}
#welcomeLayout.active {display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;}
#welcomeLayout::before,#welcomeLayout::after {display:none!important;}
#welcomeLayout .wl-progress {
  width:97.520661%; height:clamp(14px,3.3cqw,20px); flex-shrink:0;
  border:1px solid #f8ccd7; border-radius:10cqw;
  background:rgba(241,173,185,.17); overflow:hidden;
}
#welcomeLayout .wl-progress span {
  display:block; width:8.7%; height:100%; border-radius:inherit;
  background:linear-gradient(35deg,#e81767,#ff89b3);
}
#welcomeLayout .wl-label {
  display:flex;align-items:center;justify-content:center;
  margin:clamp(10px,1.7cqw,12px) 0 0; padding:4px clamp(12px,2.34375cqw,18px);
  min-height:clamp(25px,3.9cqw,28px); border:1px solid #fbd0de; border-radius:10cqw;
  background:rgba(253,224,232,.48); color:#de0758;
  font-size:clamp(10px,1.953125cqw,14px);font-weight:550;letter-spacing:.1171875cqw;line-height:1.2;
}
#welcomeLayout #welcomeTitle {
  width:100%;margin:clamp(12px,2.2cqw,16px) 0 0!important;padding:0!important;
  color:#50032c!important; font-family:'Quiz Inter',Arial,sans-serif!important;
  font-size:clamp(26px,6.8359375cqw,49px)!important;font-weight:850!important;
  letter-spacing:-.042em!important;line-height:1.02857143!important;
  text-transform:none!important;text-shadow:none!important;
}
#welcomeLayout .wl-title-first {display:block;white-space:normal;}
#welcomeLayout .wl-title-pink {
  display:block;font-size:clamp(24px,6.25cqw,45px);line-height:1.046875;letter-spacing:-.03125em;
  color:#f52278;background:linear-gradient(180deg,#fa2a80,#eb1769);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
#welcomeLayout .wl-lead {
  width:100%;margin:clamp(10px,1.6cqw,12px) 0 0;padding:0;
  font-size:clamp(16px,3.125cqw,20px);line-height:1.38;letter-spacing:-.025em;
  font-weight:400;color:#59042f;
}
#welcomeLayout .wl-lead strong {font-weight:750;}
#welcomeLayout .wl-photo {
  display:block;width:95.557851%;height:auto;aspect-ratio:2.3/1;
  object-fit:cover;object-position:50% 35%;margin:clamp(10px,1.8cqw,14px) auto 0;padding:0;
  border:0;border-radius:clamp(18px,4.39453125cqw,32px);box-shadow:none;
}
#welcomeLayout .wl-card {
  width:100%;margin:clamp(10px,1.6cqw,12px) 0 0;padding:clamp(12px,2cqw,15px) clamp(14px,2.734375cqw,20px);
  min-height:0;border:1px solid #f8ccd9;border-radius:clamp(18px,3.02734375cqw,24px);
  background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(249,218,226,.35));
}
#welcomeLayout .wl-rule {display:block;width:clamp(28px,5.859375cqw,42px);height:3px;margin:0 auto clamp(8px,1.2cqw,10px);border-radius:2cqw;background:#e35f96;}
#welcomeLayout .wl-card p {
  margin:0;padding:0;color:#59042f;font-size:clamp(17px,3.61328125cqw,26px);line-height:1.25;
  font-weight:650;letter-spacing:-.025em;
}
#welcomeLayout .wl-card p span {color:#f52278;}
#welcomeLayout .wl-start {
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,3.7109375cqw,28px);
  width:100%;min-height:clamp(52px,8.6cqw,62px);margin:clamp(12px,1.8cqw,14px) 0 0;padding:10px clamp(16px,3.125cqw,24px);
  border:1px solid #f4468f;border-radius:10cqw;
  background:linear-gradient(180deg,#ff65a5 0%,#f6428b 45%,#e92270 100%);
  box-shadow:inset 0 .1953125cqw .29296875cqw rgba(255,255,255,.65),0 1.953125cqw 3.41796875cqw rgba(227,55,100,.21);
  font-family:inherit;color:#fff;font-size:clamp(15px,3.369140625cqw,24px);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
#welcomeLayout .wl-start svg {width:clamp(20px,4.39453125cqw,32px);height:clamp(20px,4.39453125cqw,32px);fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:square;stroke-linejoin:miter;flex-shrink:0;}
#welcomeLayout .wl-start:hover {filter:brightness(1.025);}
#welcomeLayout .wl-start:active {transform:translateY(1px);}
#welcomeLayout .wl-start:focus-visible {outline:3px solid #59042f;outline-offset:4px;}
#welcomeLayout .wl-meta {display:flex;align-items:center;justify-content:center;gap:clamp(16px,4.4921875cqw,32px);width:100%;margin:clamp(14px,2.5cqw,18px) 0 0;}
#welcomeLayout .wl-meta-item {display:flex;align-items:center;gap:clamp(6px,1.5625cqw,12px);white-space:normal;font-size:clamp(12px,2.34375cqw,16px);font-weight:400;letter-spacing:-.02em;line-height:1.3;}
#welcomeLayout .wl-meta-item svg {width:clamp(20px,4.1015625cqw,30px);height:clamp(22px,4.296875cqw,32px);flex-shrink:0;stroke:#ad0644;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#welcomeLayout .wl-meta-divider {height:clamp(24px,4.296875cqw,32px);width:1px;flex-shrink:0;background:#f9b6ce;}
@media(prefers-reduced-motion:reduce){#welcomeLayout .wl-start:active {transform:none;}}

#welcomeLayout .wl-start > span {min-width:0;}

/* Original brand logo above the welcome progress bar. */
#welcomeLayout .wl-logo {
  display:block; width:clamp(180px,52.734375cqw,270px); max-width:100%; height:auto;
  margin:0 auto clamp(8px,1.6cqw,12px); padding:0; border:0; flex-shrink:0;
}

/* Copy reflows naturally, rather than depending on the reference image's lines. */
#welcomeLayout .wl-lead-break, #welcomeLayout .wl-card-break {display:none;}
#welcomeLayout > * {min-width:0;max-width:100%;}
@media(min-width:761px){
  body.welcome-layout .page {max-width:720px!important;}
}
@media(max-width:480px){
  #welcomeLayout .wl-meta {flex-direction:column;gap:6px;}
  #welcomeLayout .wl-meta-divider {display:none;}
  #welcomeLayout .wl-meta-item {justify-content:center;}
}
@media(max-width:380px){
  #welcomeLayout .wl-title-break {display:none;}
}