/* ONBOARDING-r2 — benefits screen: everything for the car. Scope: #onboarding-welcome-r1.onb2-benefits-overlay only. */
#onboarding-welcome-r1.onb2-benefits-overlay .onb2-benefit-screen{
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#f7f7f8 100%);
}
#onboarding-welcome-r1 .onb2-progress{
  height:4px;
  width:118px;
  margin:8px auto 0;
  border-radius:999px;
  background:#e8e8eb;
  overflow:hidden;
}
#onboarding-welcome-r1 .onb2-progress i{
  display:block;
  height:100%;
  border-radius:999px;
  background:#ffc400;
}
#onboarding-welcome-r1 .onb2-benefit-content{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:24px 0 10px;
  text-align:left;
}
#onboarding-welcome-r1 .onb2-benefit-content h1{
  margin:0 0 10px;
  max-width:310px;
  color:#111827;
  font-size:24px;
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:950;
}
#onboarding-welcome-r1 .onb2-benefit-content p{
  margin:0;
  max-width:318px;
  color:#374151;
  font-size:14px;
  line-height:1.45;
  font-weight:650;
}
#onboarding-welcome-r1 .onb2-benefit-art{
  position:relative;
  align-self:center;
  width:100%;
  height:330px;
  margin:22px 0 8px;
}
#onboarding-welcome-r1 .onb2-benefit-art::before{
  content:'';
  position:absolute;
  inset:38px 6px 0;
  border-radius:38px;
  background:linear-gradient(180deg,#fff8d6 0%,rgba(255,248,214,.35) 46%,rgba(255,255,255,0) 100%);
  filter:blur(.1px);
}
#onboarding-welcome-r1 .onb2-benefit-car{
  position:absolute;
  left:50%;
  bottom:14px;
  width:350px;
  max-width:104%;
  transform:translateX(-50%);
  z-index:3;
  filter:drop-shadow(0 18px 22px rgba(15,23,42,.16));
}
#onboarding-welcome-r1 .onb2-art-tool{
  position:absolute;
  z-index:4;
  width:54px;
  height:54px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(17,24,39,.07);
  box-shadow:0 14px 34px rgba(15,23,42,.11);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
}
#onboarding-welcome-r1 .onb2-art-tool--wrench{right:34px;top:18px;transform:rotate(-10deg);}
#onboarding-welcome-r1 .onb2-art-tool--oil{right:8px;top:112px;transform:rotate(7deg);}
#onboarding-welcome-r1 .onb2-art-tool--wheel{left:16px;top:128px;transform:rotate(-5deg);}
#onboarding-welcome-r1 .onb2-art-tool--tow{left:46px;top:38px;transform:rotate(6deg);}
#onboarding-welcome-r1 .onb2-benefit-chips{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:2px;
}
#onboarding-welcome-r1 .onb2-benefit-chips span{
  min-height:30px;
  border-radius:999px;
  background:#f4f4f5;
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  font-size:10.5px;
  line-height:1;
  font-weight:850;
}
@media (max-width:360px){
  #onboarding-welcome-r1 .onb2-benefit-content h1{font-size:22px;}
  #onboarding-welcome-r1 .onb2-benefit-content p{font-size:13.5px;}
  #onboarding-welcome-r1 .onb2-benefit-art{height:306px;}
  #onboarding-welcome-r1 .onb2-art-tool{width:48px;height:48px;font-size:23px;border-radius:16px;}
  #onboarding-welcome-r1 .onb2-benefit-chips{gap:5px;}
  #onboarding-welcome-r1 .onb2-benefit-chips span{font-size:10px;padding:0 5px;}
}

/* ONBOARDING-r16 — screen 2 reference density and illustration polish. */
#onboarding-welcome-r1.onb2-benefits-overlay .onb2-benefit-screen{background:#fff;}
#onboarding-welcome-r1 .onb2-progress{width:126px;height:4px;margin-top:9px;}
#onboarding-welcome-r1 .onb2-benefit-content{justify-content:flex-start;padding:42px 10px 8px;}
#onboarding-welcome-r1 .onb2-benefit-content h1{font-size:23px;line-height:1.08;margin-bottom:12px;}
#onboarding-welcome-r1 .onb2-benefit-content p{max-width:310px;font-size:13.2px;line-height:1.48;color:#2f3744;font-weight:700;}
#onboarding-welcome-r1 .onb2-benefit-art{height:390px;margin:28px -2px 6px;}
#onboarding-welcome-r1 .onb2-benefit-art::before{
  inset:34px 18px 8px;
  border-radius:44px;
  background:radial-gradient(circle at 50% 48%,rgba(255,196,0,.22),rgba(255,248,214,.34) 38%,rgba(255,255,255,0) 72%);
}
#onboarding-welcome-r1 .onb2-benefit-car{width:372px;bottom:28px;}
#onboarding-welcome-r1 .onb2-art-tool{color:#111827;width:58px;height:58px;border-radius:20px;background:#fff;}
#onboarding-welcome-r1 .onb2-art-tool svg{width:38px;height:38px;display:block;}
#onboarding-welcome-r1 .onb2-art-tool--wrench{right:42px;top:10px;}
#onboarding-welcome-r1 .onb2-art-tool--oil{right:8px;top:126px;}
#onboarding-welcome-r1 .onb2-art-tool--wheel{left:20px;top:172px;}
#onboarding-welcome-r1 .onb2-art-tool--tow{left:42px;top:78px;}
#onboarding-welcome-r1 .onb2-spark{position:absolute;width:7px;height:7px;border-radius:999px;background:#ffc400;box-shadow:0 0 0 4px rgba(255,196,0,.12);z-index:5;}
#onboarding-welcome-r1 .onb2-spark--one{left:112px;top:44px;}
#onboarding-welcome-r1 .onb2-spark--two{right:112px;top:86px;transform:scale(.68);}
#onboarding-welcome-r1 .onb2-spark--three{left:172px;bottom:92px;transform:scale(.58);}
#onboarding-welcome-r1 .onb2-benefit-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:0;}
#onboarding-welcome-r1 .onb2-benefit-chips span{min-height:34px;border-radius:14px;background:#f6f6f7;font-size:11.5px;}
@media (max-width:360px){
  #onboarding-welcome-r1 .onb2-benefit-content{padding-top:32px;}
  #onboarding-welcome-r1 .onb2-benefit-art{height:346px;}
  #onboarding-welcome-r1 .onb2-benefit-car{width:332px;}
}

/* ONBOARDING-r17 — screen 2 uses supplied collage artwork from the user archive task. */
#onboarding-welcome-r1.onb2-benefits-overlay .onb2-benefit-content{
  padding-top:36px;
}
#onboarding-welcome-r1.onb2-benefits-overlay .onb2-benefit-art{
  height:418px;
  margin:24px -4px 8px;
  background:url('../assets/onboarding/benefits_reference_trimmed.png') center 12px / 92% auto no-repeat;
}
#onboarding-welcome-r1.onb2-benefits-overlay .onb2-benefit-art::before{
  inset:18px 12px 8px;
  border-radius:46px;
  background:radial-gradient(circle at 50% 44%,rgba(255,196,0,.14),rgba(255,248,214,.26) 40%,rgba(255,255,255,.0) 78%);
}
#onboarding-welcome-r1.onb2-benefits-overlay .onb2-benefit-art > *{
  display:none !important;
}
#onboarding-welcome-r1.onb2-benefits-overlay .onb2-benefit-chips{
  margin-top:2px;
}
#onboarding-welcome-r1.onb2-benefits-overlay .onb2-benefit-chips span{
  min-height:35px;
  border-radius:15px;
  font-size:11.5px;
  background:#f5f5f6;
}
@media (max-width:360px){
  #onboarding-welcome-r1.onb2-benefits-overlay .onb2-benefit-art{
    height:382px;
    background-size:94% auto;
    background-position:center 8px;
  }
}