/* Signature Nails: correct the mobile viewport without cropping or stretching
   approved 1024x1536 artwork. The separate Explore action sits below the image;
   the extra viewport area is a deliberate marble-and-floral continuation. */
@media(max-width:700px){
  body.welcome-mode{
    background:#fff8f5!important;
    overflow-x:hidden!important;overflow-y:auto!important;
  }
  body.welcome-mode .layout{
    isolation:isolate!important;position:relative!important;
    width:100%!important;height:auto!important;
    min-height:calc(100dvh - 32px)!important;
    margin:0!important;
    padding:0 0 max(94px,env(safe-area-inset-bottom))!important;
    overflow:visible!important;
    background:
      radial-gradient(ellipse at 10% 85%,rgba(249,211,220,.45),transparent 58%),
      radial-gradient(ellipse at 90% 95%,rgba(241,209,196,.35),transparent 51%),
      repeating-linear-gradient(122deg,transparent 0 103px,rgba(190,129,113,.032) 104px,transparent 107px),
      linear-gradient(160deg,#fffaf7 0%,#fff3ee 100%)!important;
  }
  /* Only the decorative area continues; the actual artwork remains exactly 2:3. */
  body.welcome-mode .layout::before{
    content:""!important;display:block!important;
    position:absolute!important;z-index:0!important;
    left:0!important;right:0!important;
    top:calc(min(100vw,500px) * 1.5)!important;bottom:0!important;
    background-image:url("./approved-welcome.webp")!important;
    background-position:center bottom!important;
    background-size:100% calc(min(100vw,500px) * 4.5)!important;
    background-repeat:no-repeat!important;
    transform:scaleY(-1)!important;
    filter:blur(10px) saturate(.88)!important;
    opacity:.55!important;pointer-events:none!important;
  }
  body.welcome-mode .layout::after{
    content:""!important;display:block!important;
    position:absolute!important;z-index:0!important;
    top:calc(min(100vw,500px) * 1.5)!important;
    left:0!important;right:0!important;height:2px!important;
    background:linear-gradient(90deg,transparent,#d5a180 28%,#f6ddbb 52%,#c58c71 73%,transparent)!important;
    pointer-events:none!important;
  }
  body.welcome-mode .phone{
    overflow:visible!important;z-index:1!important;
    aspect-ratio:2 / 3!important;box-shadow:none!important;
  }
  /* Contact is printed inside the image and has an invisible accessible hit area. */
  body.welcome-mode .welcome-bottom-controls #welcome-contact{
    position:absolute!important;left:0!important;top:0!important;
    width:100%!important;height:100%!important;
    background:transparent!important;color:transparent!important;
    border:1px solid transparent!important;
  }
  /* The seventh action is real HTML, not an extra label painted on the artwork. */
  body.welcome-mode .welcome-bottom-controls #welcome-explore{
    position:absolute!important;
    top:525%!important;left:-34%!important;width:168%!important;
    height:46px!important;min-height:46px!important;
    padding:10px 16px!important;margin:0!important;
    overflow:visible!important;
    color:#743e4c!important;text-indent:0!important;
    font:700 clamp(13px,3.7vw,16px)/1.2 Arial,Helvetica,sans-serif!important;
    white-space:nowrap!important;
    background:linear-gradient(112deg,rgba(255,249,245,.99),rgba(249,219,223,.98))!important;
    border:1px solid #be907e!important;border-radius:999px!important;
    box-shadow:0 2px 10px rgba(120,66,72,.14),inset 0 1px rgba(255,255,255,.9)!important;
  }
  body.welcome-mode .welcome-bottom-controls #welcome-explore:focus-visible{
    outline:3px solid #823b58!important;outline-offset:2px!important;
  }
}