/* The homepage on a phone (phone-home.js). Wider than a phone: none of this shows. */
.ph,.ph-layer{display:none}
@media (max-width:640px){
  /* the orbit hero and the five product scenes give way to the phone section */
  .hero,#mysorty,#tkb-monitor,#tkb-assistant,#flick,#tkb-contrack{display:none !important}
  .ph{display:block;position:relative}
  .ph-layer{display:block;position:fixed;inset:0;z-index:40;pointer-events:none}
  .ph-fx{position:absolute;inset:0;width:100%;height:100%}
  /* top padding: room for the fixed 62px phone header plus 30px air, so the header never covers the heading */
  .ph-top{position:relative;height:calc(100svh - 60px);min-height:560px;padding:92px var(--gut) 0}
  .ph-copy .hero-copy{position:static;max-width:none}
  .ph-copy h1{margin:0;font:700 40px/1.02 var(--head);letter-spacing:-.025em;text-wrap:balance}
  .ph-copy p{margin:12px 0 0;color:var(--mute);font-size:17px}
  .ph-orbit{position:absolute;left:0;right:0;top:44%;height:46%}
  .ph-fly{position:absolute;left:0;top:0;width:66px;height:66px;margin:-33px 0 0 -33px;pointer-events:auto;will-change:transform}
  .ph-fly img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
  .ph-fly--core{width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none}
  .ph-fly--core img{filter:drop-shadow(0 0 30px rgba(67,194,91,.35)) drop-shadow(0 16px 24px rgba(0,0,0,.5))}
  .ph-fly.is-gone{visibility:hidden}

  /* the scroll cue: the word and an arrow that nods downward; gone for good at the first scroll */
  .ph-hint{position:absolute;left:0;right:0;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12.5px;font-weight:500;color:var(--mute);letter-spacing:.04em;transition:opacity 360ms var(--cr),transform 520ms cubic-bezier(.4,0,1,1)}
  .ph-hint.is-gone{opacity:0;transform:translateY(16px)}
  .ph-chev{display:block}
  .ph-chev svg{display:block;width:18px;height:10px;color:var(--acc-hi);animation:ph-nod 1.6s var(--cr) infinite}

  /* the home screen */
  .ph-home{padding:8px var(--gut) 6px}
  .ph-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 6px;margin:0;padding:0;list-style:none}
  .ph-grid--pc{grid-template-columns:repeat(2,minmax(0,1fr));width:67%;margin:0 auto}
  .ph-line{height:1px;margin:24px 10px;border:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 20%,rgba(255,255,255,.14) 80%,transparent)}
  .ph-ic{display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 0;color:var(--ink);text-decoration:none}
  .ph-ic img{width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));visibility:hidden;transition:transform 300ms var(--sp)}
  .ph-ic.is-landed img{visibility:visible}
  .ph-ic:active img{transform:scale(.88)}
  .ph-ic b,.ph-ic small{opacity:0;transform:translateY(6px);transition:opacity 260ms var(--cr),transform 600ms var(--sp)}
  .ph-ic.is-landed b,.ph-ic.is-landed small{opacity:1;transform:none}
  .ph-ic b{font-size:13px;font-weight:600;line-height:1.2;text-align:center}
  .ph-ic small{margin-top:-6px;font-size:11.5px;color:var(--faint)}
  .ph-ic.is-hop img{animation:ph-hop 700ms var(--sp)}
  .ph-note{margin:26px 0 0;text-align:center;font-size:13.5px;color:var(--faint)}
}
@keyframes ph-nod{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}
@keyframes ph-hop{0%{transform:none}30%{transform:translateY(-7px) scale(1.04)}60%{transform:translateY(1px) scale(.98)}100%{transform:none}}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.ph-chev svg{animation:none}.ph-ic img{visibility:visible}.ph-ic b,.ph-ic small{opacity:1;transform:none}}