/* The phone-screen carousel in the top section of the landing, Trading, Apps and Custom pages, on every screen size
   (owner, 10 Oct 2026: "use the carousels in the desktop version too"). Loaded on every page by lib/menu.js.
   This file is the desktop and tablet look; phones restyle it in mobile.css. Movement is in the menu script. */
.hcar { grid-column:1 / -1; min-width:0; margin-top:34px; position:relative; }
.hctrack { display:flex; gap:22px; justify-content:safe center; overflow-x:auto; scrollbar-width:none; padding:6px 2px 4px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 44px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 44px), transparent 100%); }
.hctrack::-webkit-scrollbar { display:none; }
.hcs { flex:0 0 186px; text-decoration:none; color:#0f172a; display:flex; flex-direction:column; gap:10px; min-width:0; transition:transform .18s; }
.hcs:hover { transform:translateY(-4px); }
.hcimg { display:block; border:5px solid #0f172a; border-radius:26px; overflow:hidden; background:#0f172a; box-shadow:0 14px 32px rgba(15,23,42,.2); line-height:0; }
.hcimg img { width:100%; height:auto; display:block; }
.hccap { font-size:14px; font-weight:700; text-align:center; line-height:1.3; } .hccap small { font-weight:500; color:#55607a; font-size:12px; }
.hcnote { margin:18px 0 0; text-align:center; color:#55607a; font-size:15px; } .hcnote b { color:#0f172a; }
@media (max-width:900px) { .hcar { margin-top:24px; } .hcs { flex-basis:160px; } .hctrack { gap:16px; } }