/* iPhone / Android: Space feels like an installed app. Phone-only rules, loaded last; remove the <link> to roll back. */
@media(max-width:760px){
  html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
  body{overscroll-behavior-y:none}
  button,a,[role=button]{touch-action:manipulation;-webkit-user-select:none;user-select:none}

  /* Glass app bar: stays on top, the round buttons live inside it instead of floating over the text. */
  html body .topbar{position:sticky;top:0;z-index:205;height:calc(54px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;display:flex;align-items:center;
    background:linear-gradient(180deg,#0a1018f2,#0a1018cc)!important;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid #ffffff10}
  html body .topbar{transition:transform .3s cubic-bezier(.2,.9,.3,1),opacity .2s}
  /* Windows (product card, video, knowledge, builder) own the whole screen: the bar steps away like iOS does. */
  body:has(#detail-drawer.open) .topbar,body:has(#site-product-overlay) .topbar,body.vp-full-open .topbar,body.vp-immersive .topbar,body.ck-open .topbar,body.builder-open .topbar{transform:translateY(-110%);opacity:0;pointer-events:none}
  body.ck-open .top-dock,body.builder-open .top-dock{opacity:0;pointer-events:none}
  .topbar .top-right{display:none!important}
  .detail-drawer{padding-top:env(safe-area-inset-top)}
  .topbar .mobile-brand{font-size:13px;letter-spacing:.06em;white-space:nowrap}
  body:has(.top-dock .cd-mini:not([hidden])) .topbar .mobile-brand{font-size:0}
  body:has(.top-dock .cd-mini:not([hidden])) .topbar .mobile-brand:before{content:'✳';font-size:20px;color:#6ff7d8}
  .top-dock,.cd-scrolled .top-dock{top:calc(env(safe-area-inset-top) + 8px)!important;right:12px!important;gap:5px!important}
  .top-dock #command-voice,.top-dock #command-call{width:38px!important;height:38px!important;border-radius:12px!important}
  .top-dock .ai-orb{width:22px;height:22px}
  .top-dock .pin-quick{height:38px!important;min-width:0!important;padding:0 10px!important;border-radius:12px!important;gap:5px!important;font-size:12px!important}
  .top-dock .cd-mini{gap:5px!important;height:auto!important}
  .top-dock .cd-mini-b{height:38px!important;min-width:0!important;padding:0 9px!important;border-radius:12px!important;font-size:12px!important}

  /* Bottom: tab bar above the home indicator, the input never makes iOS zoom the page (16px). */
  .mobile-nav{height:calc(62px + env(safe-area-inset-bottom))!important;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);background:#0d161ee8!important}
  .space-command{bottom:calc(68px + env(safe-area-inset-bottom))!important}
  #command-input{font-size:16px!important}

  /* Canvas tiles: pictures stay inside the card, the old/new look switch is a desktop thing. */
  .jv-switch{display:none!important}
  .bc-tile .bc-thumbs{overflow:hidden;border-radius:10px}
  .bc-tile .bc-thumbs>.bc-thumb{flex:1 1 0;min-width:0;max-width:64px}
  .bc-tile-k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

  /* Touch feedback like a native app: a short press-in on every card and button. */
  .bc-tile,.bc-btn,.bc-next-b,.canvas-claim-product,.canvas-next-step,.mobile-nav button,.space-command button,.top-dock button{transition:transform .18s cubic-bezier(.2,1.4,.4,1),filter .18s}
  .bc-tile:active,.bc-btn:active,.bc-next-b:active,.canvas-claim-product:active,.canvas-next-step:active,.mobile-nav button:active,.space-command button:active,.top-dock button:active{transform:scale(.96);filter:brightness(1.15)}

  /* Product hero in the dive: photo on top, words below on dark — no white text over a white photo. */
  .ct-a3{min-height:0;align-content:start;padding:0 0 16px;gap:8px}
  .ct-a3-bg{position:relative!important;inset:auto!important;height:240px;border-radius:18px 18px 0 0}
  .ct-a3:after{display:none}
  .ct-a3>*:not(.ct-a3-bg){margin:0 16px}
  .ct-a3 h4{font-size:19px;max-width:none;line-height:1.2}

  /* Jarvis decoration is lighter on a small screen: small corners, no ticks. */
  html.jv .jv-ticks{display:none}
  html.jv .jv-corner{width:8px;height:8px;opacity:.55}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.bc-tile:active,.bc-btn:active{transform:none}}