/* Audiophilio marketing site — shared styles
   Desktop appearance comes from the per-element inline styles carried over from
   the design prototypes; this stylesheet adds only what inline styles cannot do:
   interactive states (hover/active/nav ticker), the mobile/tablet breakpoints,
   and a few globals. State/responsive overrides use !important where they must
   beat an inline base value. */

html { background: #050505; scroll-behavior: smooth; }
body { margin: 0; background: #050505; color: #F2F2F2; -webkit-font-smoothing: antialiased;
       font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: #F2F2F2; text-decoration: none; }
a:hover { color: #A8CD4A; }
::selection { background: #A8CD4A; color: #050505; }

/* Horizontal screenshot gallery scrollbar (home) */
.gal::-webkit-scrollbar { height: 2px; }
.gal::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); }
.gal::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }

/* ---------- Glass pill CTAs: hover / active states ---------- */
.pill { cursor: pointer; }
.pill:hover  { background: rgba(255,255,255,.13) !important; border-color: rgba(255,255,255,.34) !important; transform: translateY(-1px); }
.pill:active { background: rgba(168,205,74,.9) !important; border-color: #A8CD4A !important; color: #050505 !important;
               box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 4px rgba(168,205,74,.22) !important; transform: translateY(0); }
.pill--hero:hover    { background: rgba(255,255,255,.17) !important; border-color: rgba(255,255,255,.42) !important; transform: translateY(-2px); }
.pill--premium:hover { background: rgba(168,205,74,.28) !important; border-color: rgba(168,205,74,.8) !important; color: #F6FBE9 !important; transform: translateY(-1px); }

/* ---------- Feature / card hover ---------- */
.card-hover { transition: background .3s; }
.card-hover:hover { background: #0C0C0C !important; }

/* ---------- Header nav ticker ---------- */
.nav-link { display: block; height: 13px; overflow: hidden; }
.nav-roll { display: block; transition: transform .34s cubic-bezier(.2,.8,.2,1); transform: translateY(0); }
.nav-roll > span { display: block; height: 13px; line-height: 13px; }
.nav-roll-lime { color: #A8CD4A; }
.nav-link:hover .nav-roll { transform: translateY(-13px); }

/* ---------- Mobile menu (checkbox hack) ---------- */
.nav-toggle { display: none; }
.nav-burger { display: none; }

/* ==================================================================
   RESPONSIVE
   The prototypes were authored for >=1100px. Below that we restack the
   multi-column grids, collapse the header nav into a toggle menu, tighten
   the page gutter, and widen the screenshot figures.
   ================================================================== */

/* --- Tablet / small-desktop: restack the widest grids --- */
@media (max-width: 900px) {
  .restack-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 760px) {
  /* Collapse every multi-column grid to a single column */
  .restack-2, .restack-3, .restack-qa, .restack-price, .restack-asset,
  .restack-spot, .restack-wide { grid-template-columns: minmax(0,1fr) !important; }

  /* Tighten the page gutter on every section, header and footer inner row */
  .sec       { padding-left: 20px !important; padding-right: 20px !important; }
  .gutter-x  { padding-left: 20px !important; padding-right: 20px !important; }

  /* Screenshot figures grow toward full width */
  .gal-fig { flex: 0 0 86vw !important; }
  .gal     { padding-left: 20px !important; padding-right: 20px !important; }

  /* Comparison tables scroll horizontally instead of crushing */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll > div { min-width: 520px; }

  /* Reduce hero top padding a touch on phones */
  .hero { padding-top: 110px !important; }
}

/* --- Header nav → hamburger menu at <=920px --- */
@media (max-width: 920px) {
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 10px; cursor: pointer; flex: 0 0 auto;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  }
  .nav-burger span { display: block; height: 1.5px; width: 100%; background: #F2F2F2; transition: transform .25s, opacity .2s; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch !important; gap: 0 !important;
    background: rgba(5,5,5,.96); backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-toggle:checked ~ .nav { max-height: 80vh; }
  .nav .nav-link { height: auto; padding: 18px 40px; border-top: 1px solid rgba(255,255,255,.07); }
  .nav .nav-roll { transform: none !important; }
  .nav .nav-roll .nav-roll-lime { display: none; }        /* single label in the menu */
  .nav .pill--nav { margin: 16px 40px 20px; text-align: center; }
  /* burger → X when open */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* Very small phones: rein in the largest display type a little further */
@media (max-width: 480px) {
  .sec { padding-left: 18px !important; padding-right: 18px !important; }
}