@import url("./design-foundation-base-v1.css?wb=20261004-native-art-base");

/* Preserve the static foundation contract while this file layers the public-art pass. */
:root{
  --bg:#FFFFFF;
  --surface-muted:#F4F4F5;
  --surface:#FAFAFA;
  --border:#E5E7EB;
  --accent:#97AEFF;
  --accent-strong:#3B83F6;
  --accent-deep:#1F3A8A;
}
html:not([data-wrongbook-debug="doctor"]) body #wrongbookDoctorButton{display:none}

/* Public hero V3: no card, no framed illustration. The mascot system sits directly in
   the page composition and uses the native iOS doodles as supporting accents. */
body.wbv1-public-mode .wbv1-hero .wbv1-hero-visual[data-wb-hero-presentation="ios-assets"]{
  aspect-ratio:1.24!important;
  overflow:visible!important;
  isolation:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html[data-theme="dark"] body.wbv1-public-mode .wbv1-hero .wbv1-hero-visual[data-wb-hero-presentation="ios-assets"],
html:not([data-theme="light"]) body.wbv1-public-mode .wbv1-hero .wbv1-hero-visual[data-wb-hero-presentation="ios-assets"]{
  background:transparent!important;
}
body.wbv1-public-mode .wbv1-hero .wbv1-hero-art{
  display:block!important;
  inset:-3% -2% -4%!important;
  overflow:visible!important;
  padding:0!important;
  background-image:
    url("./assets/ios/question-books.svg"),
    url("./assets/ios/question-lightbulb.svg"),
    url("./assets/ios/login-yellow-star.svg");
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:25% auto,11% auto,9.5% auto;
  background-position:66% 91%,41% 12%,88% 8%;
}
body.wbv1-public-mode .wbv1-hero .wbv1-hero-art::before,
body.wbv1-public-mode .wbv1-hero .wbv1-hero-art::after{
  display:none!important;
}
body.wbv1-public-mode .wbv1-hero .wbv1-hero-art img{
  position:absolute!important;
  inset:auto!important;
  filter:none!important;
}
body.wbv1-public-mode .wbv1-hero .wbv1-hero-mascot-blue{
  width:47%!important;
  left:6%!important;
  right:auto!important;
  top:auto!important;
  bottom:13%!important;
  margin:0!important;
  transform:rotate(-2deg)!important;
}
body.wbv1-public-mode .wbv1-hero .wbv1-hero-mascot-pencil{
  width:30%!important;
  left:auto!important;
  right:9%!important;
  top:20%!important;
  bottom:auto!important;
  margin:0!important;
  transform:rotate(4deg)!important;
}
body.wbv1-public-mode .wbv1-hero .wbv1-hero-app-icon,
body.wbv1-public-mode .wbv1-hero .wbv1-hero-label{
  display:none!important;
}

/* The extra native doodles become quiet structural accents rather than floating mascot
   stickers. Existing JS-injected mascot stickers are hidden on these sections. */
body.wbv1-public-mode #how,
body.wbv1-public-mode #features,
body.wbv1-public-mode #pricing,
body.wbv1-public-mode .wbv1-final{
  position:relative;
}
body.wbv1-public-mode #how .wbv1-site-decor-how,
body.wbv1-public-mode #features .wbv1-site-decor-features,
body.wbv1-public-mode .wbv1-final .wbv1-site-decor-final{
  display:none!important;
}
body.wbv1-public-mode #how::after,
body.wbv1-public-mode #features::after,
body.wbv1-public-mode #pricing::after,
body.wbv1-public-mode .wbv1-final::before{
  content:"";
  position:absolute;
  z-index:0;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  user-select:none;
}
body.wbv1-public-mode #how::after{
  width:84px;
  height:94px;
  right:0;
  top:74px;
  background-image:url("./assets/ios/question-lightbulb.svg");
  transform:rotate(5deg);
}
body.wbv1-public-mode #features::after{
  width:116px;
  height:98px;
  right:0;
  top:70px;
  background-image:url("./assets/ios/question-books.svg");
  transform:rotate(-3deg);
}
body.wbv1-public-mode #pricing::after{
  width:66px;
  height:66px;
  right:1.5%;
  top:78px;
  background-image:url("./assets/ios/login-yellow-star.svg");
  transform:rotate(8deg);
}
body.wbv1-public-mode .wbv1-final::before{
  width:56px;
  height:88px;
  left:7%;
  top:50%;
  background-image:url("./assets/ios/login-emphasis-left.svg");
  transform:translateY(-50%) rotate(-7deg);
  opacity:.72;
}
body.wbv1-public-mode #how > *,
body.wbv1-public-mode #features > *,
body.wbv1-public-mode #pricing > *,
body.wbv1-public-mode .wbv1-final > *{
  position:relative;
  z-index:1;
}

/* Auth keeps the calmer proportions from the previous pass, but now uses one small native
   doodle per mode so the illustration panel feels connected to the rest of the system. */
body.wbv1-shell .wbv1-auth-visual[data-wb-ios-auth]::before,
body.wbv1-shell .wbv1-auth-visual[data-wb-ios-auth]::after{
  content:"";
  position:absolute;
  z-index:1;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
}
body.wbv1-shell .wbv1-auth-visual[data-wb-ios-auth="login"]::before{
  width:52px;
  height:58px;
  right:26px;
  top:26px;
  background-image:url("./assets/ios/question-lightbulb.svg");
  transform:rotate(8deg);
}
body.wbv1-shell .wbv1-auth-visual[data-wb-ios-auth="signup"]::before{
  width:54px;
  height:54px;
  right:26px;
  top:26px;
  background-image:url("./assets/ios/login-yellow-star.svg");
  transform:rotate(7deg);
}
body.wbv1-shell .wbv1-auth-visual[data-wb-ios-auth="signup"]::after{
  width:48px;
  height:78px;
  left:22px;
  bottom:22px;
  background-image:url("./assets/ios/login-emphasis-left.svg");
  transform:rotate(-10deg);
  opacity:.34;
}

@media (max-width:960px){
  body.wbv1-public-mode .wbv1-hero .wbv1-hero-visual[data-wb-hero-presentation="ios-assets"]{
    width:min(100%,680px)!important;
    aspect-ratio:1.3!important;
  }
  body.wbv1-public-mode .wbv1-hero .wbv1-hero-art{
    background-size:23% auto,10% auto,9% auto;
    background-position:67% 91%,40% 11%,88% 8%;
  }
}
@media (max-width:720px){
  body.wbv1-public-mode .wbv1-hero .wbv1-hero-visual[data-wb-hero-presentation="ios-assets"]{
    aspect-ratio:1.1!important;
  }
  body.wbv1-public-mode .wbv1-hero .wbv1-hero-art{
    inset:0!important;
    background-size:27% auto,12% auto,10% auto;
    background-position:67% 92%,40% 8%,88% 5%;
  }
  body.wbv1-public-mode .wbv1-hero .wbv1-hero-mascot-blue{
    width:51%!important;
    left:2%!important;
    bottom:15%!important;
  }
  body.wbv1-public-mode .wbv1-hero .wbv1-hero-mascot-pencil{
    width:34%!important;
    right:4%!important;
    top:18%!important;
  }
  body.wbv1-public-mode #how::after,
  body.wbv1-public-mode #features::after,
  body.wbv1-public-mode #pricing::after{
    width:54px;
    height:54px;
    right:0;
    top:34px;
    opacity:.8;
  }
  body.wbv1-public-mode .wbv1-final::before{
    display:none;
  }
}
@media (max-width:520px){
  body.wbv1-public-mode .wbv1-hero .wbv1-hero-art{
    background-size:29% auto,13% auto,11% auto;
    background-position:67% 92%,38% 7%,88% 5%;
  }
  body.wbv1-public-mode #pricing::after{
    display:none;
  }
  body.wbv1-shell .wbv1-auth-visual[data-wb-ios-auth]::before,
  body.wbv1-shell .wbv1-auth-visual[data-wb-ios-auth]::after{
    display:none;
  }
}