/* CARFACE — mobile pass (390–900px). Desktop layout is untouched above 900px. */
@media (max-width: 900px) {
  [data-page] {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* ---- type scale ---- */
  [data-page] h1 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -.03em !important; }
  [data-page] h2 { font-size: 26px !important; line-height: 1.14 !important; }
  [data-page] h3 { font-size: 19px !important; }
  [data-page] p { text-wrap: pretty; }

  /* ---- section rhythm: gutters come from structure ---- */
  [data-page] > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* a wrapper that only holds already-hooked blocks must not add a second gutter */
  [data-page] > div:has([data-nav]),
  [data-page] > div:has([data-hero]),
  [data-page] > div:has([data-facts]),
  [data-page] > div:has([data-strip]),
  [data-page] > div:has([data-rail]),
  [data-page] > div:has([data-sec]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  [data-page] > [data-sec] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  [data-page] > [data-nav], [data-page] > div > [data-nav] {
    padding: 14px 20px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  /* nav: brand row on top, links become one scrollable strip */
  [data-nav] { align-items: center !important; }
  /* flatten the brand+links wrapper so all three parts share one wrapping row */
  [data-nav] > div:first-child { display: contents !important; }
  [data-nav] > div:first-child > a { order: 1 !important; }
  [data-nav] > div:last-child { order: 2 !important; margin-left: auto !important; }
  [data-nav] [data-nav-links] {
    order: 3 !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    gap: 20px !important;
    font-size: 13.5px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }
  [data-nav] [data-nav-links]::-webkit-scrollbar { display: none !important; }
  /* 4 mục (thêm Library 2026-09-03) phải vừa 390px không cần cuộn ngang */
  [data-nav] [data-nav-links] { gap: 10px !important; font-size: 12.5px !important; letter-spacing: -.01em !important; }
  [data-nav] [data-nav-links] > a { flex: none !important; white-space: nowrap !important; }
  [data-nav] [data-rating] { display: none !important; }
  [data-nav] > div:last-child { flex: 0 0 auto !important; }

  /* ---- every multi-column block stacks ---- */
  [data-cols] { grid-template-columns: 1fr !important; gap: 20px !important; }
  [data-cols="2"] { gap: 16px !important; }
  [data-strip] { grid-template-columns: 1fr 1fr !important; }
  [data-strip] > div { padding: 16px 20px !important; border-left: 0 !important; }
  [data-page] > [data-strip] { padding-left: 0 !important; padding-right: 0 !important; }
  [data-page] > [data-foot] { padding: 20px !important; }

  /* ---- hero ---- */
  [data-hero] { grid-template-columns: 1fr !important; gap: 28px !important; padding: 40px 20px 32px !important; }
  [data-hero] img[alt="Download on the App Store"] { width: 196px !important; }
  [data-glow] { display: none !important; }
  [data-bg] { opacity: .55 !important; }
  [data-facts] { flex-wrap: wrap !important; gap: 10px 18px !important; padding: 14px 20px !important; }

  /* ---- image rails keep scrolling, cards get thumb-sized ---- */
  [data-page] > [data-rail-wrap] { padding-left: 0 !important; padding-right: 0 !important; }
  [data-rail-head] { padding: 0 20px 20px !important; }
  [data-rail] { padding-left: 20px !important; padding-right: 20px !important; scroll-padding-left: 20px !important; }
  [data-rail] > div { width: 78vw !important; }

  /* ---- coverflow: only 3 cards, tighter arc ---- */
  [data-coverflow] { height: 240px !important; }
  [data-cf-card="-2"], [data-cf-card="2"] { display: none !important; }
  [data-cf-card="0"] { width: 168px !important; height: 168px !important; top: 30px !important; }
  [data-cf-card="-1"], [data-cf-card="1"] { width: 142px !important; height: 142px !important; top: 42px !important; }
  [data-cf-card="-1"] { transform: translateX(-50%) translateX(-124px) rotateY(44deg) scale(.86) !important; }
  [data-cf-card="1"] { transform: translateX(-50%) translateX(124px) rotateY(-44deg) scale(.86) !important; }

  /* ---- footer / cross-link ---- */
  [data-foot] { padding: 20px !important; gap: 14px 20px !important; }
  [data-crosslink] { padding: 16px 20px !important; font-size: 12.5px !important; }

  /* ---- final CTA stacks (the flex row may be the section itself or one level in) ---- */
  [data-cta-close] { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; padding: 52px 20px !important; }
  [data-cta-row] { flex-direction: column !important; align-items: flex-start !important; gap: 26px !important; height: auto !important; }
  [data-cta-close] div:has(> image-slot) { width: 100% !important; height: 220px !important; flex: none !important; }

  /* Studio diagram — unwind the absolute callouts into a stacked list */
  [data-anatomy] {
    max-width: none !important;
    margin-top: 20px !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  [data-anatomy] > svg { display: none !important; }
  [data-anatomy] > div {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
    inset: auto !important;
    transform: none !important;
  }
  [data-anatomy] > div:first-of-type { width: 210px !important; align-self: center !important; aspect-ratio: 1 !important; }

  /* Marquee items must fit the viewport */
  [data-marquee-track] > div { width: min(480px, 82vw) !important; }
  [data-marquee-track] { padding-left: 20px !important; }

  /* Discover grid — 3 across on phones, no inset offset row */
  [data-discover] [data-cols="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 !important; }
  [data-discover] [data-cols="6"] + [data-cols="6"] { margin-top: 10px !important; }

  /* Drive timeline — rail runs vertically when the nodes stack */
  [data-timeline] > div:first-child { right: auto !important; bottom: 6px !important; width: 1px !important; height: auto !important; background: linear-gradient(180deg, #00C22F, #35C8D8 50%, #a78bfa) !important; }
  [data-timeline] [data-cols] > div { padding-left: 28px !important; padding-top: 0 !important; }
  [data-timeline] [data-cols] > div > span:first-child { top: 3px !important; }

  /* ---- new footer: 4 columns stack to 2, brand column full width ---- */
  [data-page] > [data-foot] { padding: 34px 20px 20px !important; }
  [data-foot] [data-cols="4"] { grid-template-columns: 1fr 1fr !important; gap: 26px 20px !important; }
  [data-foot] [data-cols="4"] > div:first-child { grid-column: 1 / -1 !important; }
  [data-foot] [data-cols="4"] > div:first-child p { max-width: none !important; }
  [data-foot] > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; margin-top: 26px !important; }
  [data-foot] > div:last-child > span[style*="margin-left"] { margin-left: 0 !important; }
  [data-foot] [data-divider] { display: none !important; }

  /* ---- article layout: single column, ToC becomes a normal block ---- */
  [data-article] { grid-template-columns: 1fr !important; gap: 28px !important; padding: 28px 20px 40px !important; }
  [data-aside] { position: static !important; width: auto !important; top: auto !important; }
  [data-aside] > a { font-size: 15.5px !important; }

  /* ---- library grid: 2 across on phones ---- */
  [data-page] [data-cols="5"] { grid-template-columns: 1fr 1fr !important; gap: 18px 12px !important; }

  /* ---- before/after flip card ---- */
  [data-flip] { max-width: none !important; margin-top: 20px !important; perspective: 1200px !important; }
  [data-flip] [data-flip-hint] { bottom: -26px !important; font-size: 10px !important; }

  /* ---- sound rows: full-width taps ---- */
  [data-sound-grid] > div { padding: 13px 14px !important; }
  [data-wave] { height: 84px !important; }

  /* ---- lyrics: keep the stage readable, feature cards get shorter image wells ---- */
  [data-lyricstage] { border-radius: 12px !important; }
  [data-lyriclines] p { font-size: 2.6cqw !important; }

  /* Closing CTA phone — no bleed on small screens */
  [data-cta-phone] { position: static !important; width: 168px !important; transform: none !important; margin: 0 !important; }
  [data-cta-close] { overflow: visible !important; padding-bottom: 34px !important; }
}

@media (max-width: 480px) {
  [data-page] h1 { font-size: 30px !important; }
  [data-page] h2 { font-size: 23px !important; }
  [data-foot] [data-cols="4"] { grid-template-columns: 1fr 1fr !important; }
  [data-page] [data-cols="5"] { gap: 16px 10px !important; }
  [data-lyriclines] p { font-size: 3cqw !important; }
  [data-strip] { grid-template-columns: 1fr !important; }
  [data-strip] > div { border-top: 1px solid rgba(232, 230, 226, .1) !important; }
  [data-cols="2"] { gap: 14px !important; }

}


/* ---- hover states (shared across all pages; names hashed from the
   declaration so they mean the same thing on every page) ---- */
@media (hover:hover){
[data-hv="h1c8z1tk"]:hover{color:#e8e6e2 !important}
[data-hv="h1ys2q18"]:hover{border-color:rgba(0,194,47,.5) !important}
[data-hv="hynurzd"]:hover{border-color:rgba(0,194,47,.5) !important;transform:translateY(-3px) !important}
[data-hv="h1sbkwd5"]:hover{transform:translateY(-2px) !important;box-shadow:0 0 0 1px rgba(53,200,216,.5),0 20px 48px rgba(53,200,216,.2) !important}
[data-hv="hb6g729"]:hover{border-color:#35C8D8 !important}
[data-hv="h19kstjr"]:hover{border-color:rgba(53,200,216,.55) !important}
[data-hv="hgt9zb3"]:hover{border-color:#35C8D8 !important;color:#35C8D8 !important}
[data-hv="h1dlujsx"]:hover{color:#ffffff !important}
[data-hv="h1xzhmuj"]:hover{transform:translateY(-2px) !important;box-shadow:0 0 0 1px rgba(167,139,250,.5),0 20px 48px rgba(167,139,250,.22) !important}
[data-hv="h15mtl7v"]:hover{border-color:#a78bfa !important}
[data-hv="h1g2a33f"]:hover{transform:translateY(-2px) !important;box-shadow:0 0 0 1px rgba(0,194,47,.5),0 20px 48px rgba(0,194,47,.22) !important}
[data-hv="h154uwpe"]:hover{background:rgba(0,194,47,.14) !important;gap:12px !important}
[data-hv="h181exih"]:hover{transform:rotate(0deg) translateY(18px) scale(1.09) !important;box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(0,194,47,.45) !important;border-color:rgba(0,194,47,.5) !important;z-index:9 !important}
[data-hv="h1tq7ju0"]:hover{transform:rotate(0deg) translateY(-14px) scale(1.09) !important;box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(0,194,47,.45) !important;border-color:rgba(0,194,47,.5) !important;z-index:9 !important}
[data-hv="hayxhd0"]:hover{transform:rotate(0deg) translateY(26px) scale(1.09) !important;box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(0,194,47,.45) !important;border-color:rgba(0,194,47,.5) !important;z-index:9 !important}
[data-hv="hgrefln"]:hover{transform:rotate(0deg) translateY(-6px) scale(1.09) !important;box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(0,194,47,.45) !important;border-color:rgba(0,194,47,.5) !important;z-index:9 !important}
[data-hv="h1yrtn1f"]:hover{transform:rotate(0deg) translateY(12px) scale(1.09) !important;box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(0,194,47,.45) !important;border-color:rgba(0,194,47,.5) !important;z-index:9 !important}
[data-hv="her9tnz"]:hover{transform:rotate(0deg) translateY(-20px) scale(1.09) !important;box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(0,194,47,.45) !important;border-color:rgba(0,194,47,.5) !important;z-index:9 !important}
[data-hv="h1xsd675"]:hover{background:rgba(167,139,250,.14) !important;gap:12px !important}
[data-hv="h10hoptj"]:hover{border-color:#00C22F !important;background:rgba(0,194,47,.16) !important}
[data-hv="hql8at8"]:hover{border-color:rgba(0,194,47,.55) !important;transform:translateY(-3px) !important}
[data-hv="h10hory0"]:hover{border-color:#00C22F !important;background:rgba(0,194,47,.08) !important}
[data-hv="haejemy"]:hover{border-color:#00C22F !important;color:#ffffff !important}
[data-hv="h800m1x"]:hover{border-color:#00C22F !important}
[data-hv="h1jpwpcs"]:hover{transform:translateY(-6px) scale(1.04) !important}
}