/* SUUPI — final mobile home composition */
.mobile-home-actions{display:none}

@media(max-width:699px){
  body.on-home{overflow-x:hidden}
  body.on-home main{padding-bottom:116px}
  #home.active{display:flex;min-height:calc(100svh - 86px);flex-direction:column}

  .home-showcase{margin-top:6px}
  .showcase-window{border-radius:25px}
  .showcase-track{height:326px;min-height:326px}
  .showcase-slide{height:320px;min-height:320px;border-radius:25px;box-shadow:0 12px 24px rgba(0,0,0,.10)}
  .slide-number{top:15px;left:17px;font-size:10px;letter-spacing:.14em}
  .slide-status{top:12px;right:14px;padding:6px 9px;font-size:9px}
  .slide-copy,.showcase-slide:not(.active) .slide-copy{left:17px;right:15px;top:45px}
  .showcase-slide .slide-copy b,.showcase-slide:not(.active) .slide-copy b{font-size:clamp(34px,10.2vw,43px);line-height:.88}
  .showcase-slide .slide-copy em,.showcase-slide:not(.active) .slide-copy em{margin-top:8px;max-width:18ch;font-size:12px;line-height:1.2}
  .slide-doodle,.showcase-slide:not(.active) .slide-doodle{right:-1%;bottom:39px;width:44%;height:38%}
  .showcase-slide.gray .slide-doodle,.showcase-slide.pink-alt .slide-doodle{width:47%;height:38%}
  .slide-doodle mark,.showcase-slide:not(.active) .slide-doodle mark{left:-30%;bottom:23px;padding:5px 7px;font-size:8px}
  .showcase-slide>i,.showcase-slide:not(.active)>i{left:16px;bottom:12px;min-width:158px;height:42px;padding:0 6px 0 18px;font-size:11px}
  .showcase-slide>i span,.showcase-slide:not(.active)>i span{width:32px;height:32px;font-size:21px}

  .showcase-controls{margin-top:8px;grid-template-columns:40px 1fr 40px;gap:8px}
  .showcase-controls>button{width:40px;height:40px;font-size:19px}
  .showcase-dots{gap:7px}
  .showcase-dots button{width:9px;height:4px}
  .showcase-dots button.active{width:34px}

  .mobile-home-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:13px}
  .mobile-home-actions button{border:1px solid rgba(0,0,0,.08);color:#0a0a0b;box-shadow:0 8px 18px rgba(0,0,0,.06);text-align:left}
  .mobile-how{grid-column:1/-1;min-height:54px;padding:0 10px 0 17px;border-radius:18px;background:#0a0a0b!important;color:#fff!important;display:flex;align-items:center;justify-content:space-between;font-size:14px}
  .mobile-how span{font-family:var(--suupi-hero);font-weight:650}
  .mobile-how i{display:grid;width:34px;height:34px;border-radius:50%;background:var(--ref-pink);color:#111;font-family:var(--text);font-size:20px;font-style:normal;place-items:center}
  .mobile-quick{position:relative;min-height:92px;padding:12px 9px 10px;border-radius:19px;background:#efede8;display:grid;grid-template-columns:30px 1fr;grid-template-rows:34px 1fr;align-items:end}
  .mobile-quick:nth-child(2){background:#b9e5fa}
  .mobile-quick:nth-child(3){background:#f7afd3}
  .mobile-quick:nth-child(4){background:#efede8}
  .mobile-quick .quick-icon{width:29px;height:29px;align-self:start;color:#111}
  .mobile-quick svg,.mobile-nav svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .mobile-quick b{grid-column:1/-1;align-self:end;font-family:var(--suupi-hero);font-size:11px;line-height:1}
  .mobile-quick i{position:absolute;right:9px;top:11px;font-family:var(--text);font-size:17px;font-style:normal}

  .mobile-nav{left:7px;right:7px;bottom:7px;gap:4px;padding:7px calc(6px + env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));border-radius:22px;background:#0a0a0b;box-shadow:0 12px 30px rgba(0,0,0,.25)}
  .mobile-nav button{min-width:0;min-height:58px;padding:6px 2px;border-radius:16px;color:#fff;font-family:var(--suupi-hero);font-size:9px;line-height:1}
  .mobile-nav button.active{background:#29292b;color:#fff}
  .mobile-nav button:nth-child(2){background:var(--ref-pink);color:#111}
  .mobile-nav span{display:block;width:24px;height:24px;margin:0 auto 5px}
}

@media(max-width:380px){
  .showcase-track{height:308px;min-height:308px}
  .showcase-slide{height:302px;min-height:302px}
  .showcase-slide .slide-copy b,.showcase-slide:not(.active) .slide-copy b{font-size:34px}
  .mobile-quick{min-height:82px}
}

@media(prefers-reduced-motion:reduce){
  .mobile-home-actions button{transition:none!important}
}