/* ============================================================
   AirPods Pro 3 recreation — internal craft-R&D template
   Hand-written CSS. SF Pro metrics via @font-face w/ Inter fallback.
   ============================================================ */

/* ---- Fonts: self-hosted real SF Pro woff2 (harvested from apple.com).
   Local files bypass the CORS block that forced the Inter fallback. Inter
   stays only as the final fallback in the stack below.                  */
@font-face {
  font-family: "SF Pro Display"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("assets/fonts/SFProDisplay-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Display"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("assets/fonts/SFProDisplay-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Display"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("assets/fonts/SFProDisplay-Semibold.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Display"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/fonts/SFProDisplay-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Text"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("assets/fonts/SFProText-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Text"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("assets/fonts/SFProText-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Text"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("assets/fonts/SFProText-Semibold.woff2") format("woff2");
}
@font-face {
  font-family: "SF Pro Text"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/fonts/SFProText-Bold.woff2") format("woff2");
}

:root {
  --bg: #fff;
  --bg-gray: #f5f5f7;
  --bg-gray2: #fafafc;
  --ink: #1d1d1f;
  --ink-soft: rgba(0, 0, 0, 0.88);
  --gray: #6e6e73;
  --blue: #0071e3;
  --blue-link: #0066cc;
  --nav-link: rgba(0, 0, 0, 0.8);
  --hairline: rgba(0, 0, 0, 0.1);
  --maxw: 980px;
  --pad: 22px;
  --sans: "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.022em;          /* SF Text body tracking at 17px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }
a { color: var(--blue-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.wrap-wide { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }

/* ---- Display type scale (desktop ~1440) ---- */
.display-96 { font-family: var(--display); font-weight: 600; font-size: 80px; line-height: 1.05; letter-spacing: -0.015em; }
.display-64 { font-family: var(--display); font-weight: 600; font-size: 64px; line-height: 1.0625; letter-spacing: -0.009em; }
.display-56 { font-family: var(--display); font-weight: 600; font-size: 48px; line-height: 1.0833; letter-spacing: -0.003em; }
.display-40 { font-family: var(--display); font-weight: 600; font-size: 40px; line-height: 1.1;    letter-spacing: -0.004em; }
.eyebrow    { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.1667; letter-spacing: 0.009em; }
/* Find My heading is a distinct 32px on apple.com @1440 (not the 48px section size) */
section[aria-label="Find My"] .display-56 { font-size: 32px; line-height: 1.125; letter-spacing: 0.004em; }
.body-immersive { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.2857; letter-spacing: 0.007em; color: var(--ink-soft); }
.section-lead { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.381; letter-spacing: 0.011em; color: var(--gray); max-width: 580px; margin: 26px auto 0; text-align: center; }
.sub-head   { font-family: var(--sans); font-weight: 600; font-size: 17px; line-height: 1.4705; letter-spacing: -0.022em; }
.caption    { font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.2353; letter-spacing: -0.022em; color: var(--gray); }
.footnote   { font-family: var(--sans); font-weight: 400; font-size: 12px; line-height: 1.333; letter-spacing: -0.01em; color: var(--gray); }

/* ---- Buy pill ---- */
.pill {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.176;
  letter-spacing: -0.022em;
  border: none;
  border-radius: 980px;
  padding: 8px 16px;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}
.pill:hover { background: #0077ed; text-decoration: none; }
.pill-sm { font-size: 12px; padding: 4px 11px; line-height: 1.33; }

.price { font-family: var(--sans); font-size: 17px; font-weight: 400; letter-spacing: -0.022em; }

/* ===========================================================
   1. GLOBAL NAV (44px)
   =========================================================== */
.gnav {
  position: relative; z-index: 9999;
  height: 44px;
  background: rgba(251, 251, 253, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.gnav-inner {
  max-width: 1024px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
}
.gnav a { color: var(--nav-link); font-size: 12px; line-height: 1; letter-spacing: -0.01em; opacity: 0.8; }
.gnav a:hover { opacity: 1; color: #000; text-decoration: none; }
.gnav .glogo { display: inline-flex; align-items: center; color: #1d1d1f; opacity: 0.85; }
.gnav .glogo svg { display: block; }
.gnav ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; align-items: center; flex: 1; justify-content: space-between; max-width: 720px; }
.gnav .gicons { display: flex; gap: 18px; align-items: center; }
.gnav .gicons a { color: #1d1d1f !important; opacity: 1 !important; font-weight: 600; }
.gnav-mobile { display: none; }

/* ===========================================================
   2. HERO
   =========================================================== */
/* Apple's hero is a FULL-BLEED looping film: the video fills the whole
   section edge-to-edge and the copy is overlaid on the lower-left. */
.hero {
  background: var(--bg-gray);
  position: relative;
  overflow: hidden;
  height: 92vh;
  min-height: 620px;
  max-height: 900px;
}
.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
}
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  display: block;
}
/* hero video pause control — top-right of the media, like apple.com */
.hero-pp {
  position: absolute; top: 18px; right: 22px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(210, 210, 215, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s;
}
.hero-pp:hover { background: rgba(190, 190, 196, 0.7); }
/* copy overlaid bottom-left, inside the 1440 content rail */
.hero-copy {
  position: absolute; left: 0; right: 0; bottom: 56px; z-index: 4;
  display: block;
}
.hero-text { text-align: left; }
.hero h1 {
  font-family: var(--display);
  font-size: 24px; font-weight: 600; line-height: 1.16; letter-spacing: 0.004em;
  margin: 0 0 4px;
}
.hero h2 {
  font-family: var(--display);
  font-size: 56px; font-weight: 600; line-height: 1.0714; letter-spacing: -0.005em;
  margin: 0 0 8px;
}
.hero .hero-sub { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: 0.011em; margin: 0; color: var(--ink); }
.hero .hero-cta { display: flex; gap: 18px; align-items: center; flex-shrink: 0; padding-bottom: 6px; }
.hero .hero-cta .price { font-size: 17px; letter-spacing: -0.022em; }

/* ===========================================================
   3. STICKY LOCAL NAV (52px)
   =========================================================== */
.lnav {
  position: sticky; top: 0; z-index: 9000;
  height: 52px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  background: transparent;
}
.lnav.stuck {
  background: rgba(245, 245, 247, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.lnav-inner {
  max-width: 1024px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
}
.lnav-title { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: 0.011em; opacity: 0; transition: opacity 0.25s; }
.lnav.stuck .lnav-title { opacity: 1; }
.lnav-links { display: flex; gap: 26px; align-items: center; }
.lnav-links a { color: var(--nav-link); font-size: 12px; letter-spacing: -0.01em; }
.lnav-links a:hover { color: #000; text-decoration: none; }
.lnav-right { display: flex; align-items: center; gap: 8px; }

/* ===========================================================
   Generic section scaffold
   =========================================================== */
.section { padding: 110px 0; position: relative; }
.section.gray { background: var(--bg-gray); }
.section.gray2 { background: var(--bg-gray2); }
.section.dark { background: #000; color: #f5f5f7; }
.section.tight { padding: 60px 0; }
.section-head { text-align: center; max-width: 980px; margin: 0 auto 40px; }
.section-head .eyebrow { color: var(--ink); margin: 0 0 4px; }
.section-head.dark .eyebrow, .section.dark .eyebrow { color: #f5f5f7; }
.center { text-align: center; }

/* ---- Highlights carousel (sec 4) ---- */
.hl-head { display: flex; align-items: baseline; justify-content: space-between; text-align: left; max-width: 1440px; margin: 0 auto 28px; }
.hl-head .filmlink { font-family: var(--display); font-size: 21px; font-weight: 400; color: var(--blue-link); display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Apple's real composition: ONE large card per view (peek of next), light card,
   dark caption TOP-CENTER, lifestyle photo filling the lower portion, and an
   overlaid translucent pill (segmented progress + play/pause) at bottom-center. */
.hl-section { position: relative; }
.hl-stage { position: relative; }
.hl-rail {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 calc((100% - 1180px) / 2) 8px; margin: 0 auto;
  scrollbar-width: none;
}
.hl-rail::-webkit-scrollbar { display: none; }
.hl-card {
  flex: 0 0 1180px; max-width: 88vw; height: 600px; border-radius: 28px; scroll-snap-align: center;
  background: #f5f5f7; position: relative; overflow: hidden;
}
.hl-cap {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  width: 78%; margin: 0; text-align: center; z-index: 2;
  font-family: var(--display); font-size: 24px; font-weight: 600;
  line-height: 1.2917; letter-spacing: 0.009em; color: var(--ink);
}
.hl-cap sup { font-size: 0.6em; vertical-align: 0.45em; }
.hl-photo { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; background-size: cover; background-position: center; }
/* overlaid control pill */
.hl-ctrl { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; }
.hl-prog { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 30px;
  background: rgba(120,120,128,0.34); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hl-prog .seg { width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.45); position: relative; overflow: hidden; }
.hl-prog .seg i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 2px; }
.hl-prog .seg.done i { width: 100%; }
.hl-pp { width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(120,120,128,0.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center; }
.hl-pp svg rect, .hl-pp svg path { fill: #fff; }

/* ---- VideoScrub pinned (sec 5 + reused) ---- */
.scrub {
  position: relative;
  height: 210vh;                 /* lead-in + scrub + lead-out */
  background: var(--bg);
}
.scrub.gray { background: var(--bg-gray); }
.scrub-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  overflow: hidden; padding-top: 80px;
}
.scrub-sticky .section-head { text-align: left; max-width: 1440px; margin: 0 auto 30px; padding: 0 22px; width: 100%; }
.scrub-sticky .scrub-stage { margin-top: 0; }
.scrub-stage { position: relative; width: 100%; max-width: 1200px; height: 70vh; margin: 0 auto; }
.scrub-stage video, .scrub-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.scrub-stage .poster { z-index: 2; transition: opacity 0.3s; }
.scrub-stage video { z-index: 1; }
.scrub-stage.ready .poster { opacity: 0; pointer-events: none; }
.scrub-copy { text-align: center; margin-top: 24px; }

/* ---- Immersive dark full-bleed section (Personalized listening) ---- */
/* Personalized listening: LIGHT intro (matches apple.com), then a dark immersive
   photo beat with the 3 feature columns near the bottom. */
.pers-intro { background: #fff; text-align: center; max-width: 980px; margin: 0 auto; padding: 130px 22px 96px; }
.pers-lead { max-width: 620px; }
.immersive {
  position: relative; min-height: 1400px; background: #000; color: #f5f5f7;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 110px 0 90px; overflow: hidden;
}
/* Base for every background-image span (immersive photo, hearing subcards). Without
   position:absolute + background-size:cover the span has no box and the image never
   paints, so the dark parent shows through as a black box. .imm-bg / .subcard.img .bgimg
   below refine position + framing. */
.bgimg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; }
/* Full-bleed photo behind the whole section; text sits directly over it
   (Apple's real composition). Vertical scrims at top and bottom keep the
   headline and the three columns legible over the imagery. */
.imm-bg { inset: 0; top: 0; height: 100%; background-position: center 35%; z-index: 0; }
.immersive::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 26%, rgba(0,0,0,0.18) 62%, rgba(0,0,0,0.82) 100%);
}
.immersive-top { position: relative; z-index: 2; text-align: center; max-width: 980px; margin: 0 auto; padding: 0 22px; }
.immersive-top .eyebrow { color: #f5f5f7; }
.immersive-top .display-96 { color: #f5f5f7; }
.immersive-copy { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.42; letter-spacing: 0; color: #f5f5f7; max-width: 660px; margin: 22px auto 0; }
.immersive-cols { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 980px; margin: 0 auto; padding: 0 22px; }
.immersive-cols .icol h3 { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; margin: 0; color: #f5f5f7; }

/* ---- Pinned media block (reused for product sections) ---- */
.pinblock { position: relative; height: 190vh; }
.pinblock.tall { height: 260vh; }
.pinblock .pin-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; }
.pinblock.dark { background: #000; color: #f5f5f7; }
.pinblock.dark .eyebrow, .pinblock.dark .display-96, .pinblock.dark .display-56, .pinblock.dark .body-immersive { color: #f5f5f7; }
.media-still { width: 100%; max-width: 1100px; border-radius: 0; }
.media-still.round { border-radius: 28px; }
.media-still.big { max-width: 1280px; }
.media-tall img, .media-tall video { width: 100%; max-width: 1440px; margin: 0 auto; border-radius: 28px; }
/* full-bleed immersive (heart rate) */
.fb-immersive { background: #fff; padding-top: 20px; }
.fb-immersive .immersive-copy.dark { color: var(--ink-soft); text-align: center; max-width: 660px; margin: 0 auto 40px; font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.42; }
.fb-img { width: 100%; display: block; }
.dark-stage { width: 100%; max-width: 1100px; }
.dark-stage video, .dark-stage img { width: 100%; border-radius: 28px; }

/* ---- Noise control section (sec 6) ---- */
.noise-eyebrow { text-align: center; color: var(--ink); margin: 0 0 6px; }
.noise-head { text-align: center; max-width: 1100px; margin: 0 auto 40px; }
.reveal-copy {
  font-family: var(--display);
  font-size: 48px; font-weight: 600; line-height: 1.1666; letter-spacing: -0.005em;
  max-width: 980px; margin: 60px auto; text-align: left;
}
.reveal-copy .w { color: #6e6e73; transition: color 0.05s linear; }
.ring-wrap { display: flex; justify-content: center; margin: 40px auto; }
.ring-wrap video { width: 100%; max-width: 900px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 60px auto; }
.stat-card { background: var(--bg-gray); border-radius: 18px; padding: 40px; }
.stat-card .big { font-family: var(--display); font-size: 56px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; }
.stat-card .small { font-size: 19px; color: var(--ink); margin-top: 8px; line-height: 1.3; }
.subcard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1100px; margin: 50px auto; }
.subcard { background: var(--bg-gray); border-radius: 18px; padding: 28px; min-height: 280px; display: flex; align-items: flex-end; position: relative; overflow: hidden; }
.subcard.img { background-color: #1d1d1f; color: #fff; justify-content: flex-end; }
.subcard.img .bgimg { inset: 0; height: auto; }
.subcard.img::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%;
  background: linear-gradient(to top, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.34) 45%, rgba(0,0,0,0) 100%);
  z-index: 1; pointer-events: none;
}
.subcard.img .sub-head { position: relative; z-index: 2; margin: 0; text-shadow: 0 1px 16px rgba(0,0,0,0.4); }
.subcard .sub-head { font-size: 19px; }

/* ---- Battery hrs cards ---- */
.hrs-grid { display: flex; gap: 80px; justify-content: center; max-width: 700px; margin: 0 auto; text-align: left; }
.hrs { display: flex; flex-direction: column; max-width: 280px; }
.hrs .up { font-family: var(--sans); font-size: 12px; color: var(--gray); margin-bottom: 2px; }
.hrs .num { font-family: var(--display); font-size: 56px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--ink); }
.hrs .cap { font-family: var(--sans); font-size: 12px; color: var(--gray); margin-top: 10px; line-height: 1.35; }

/* ---- Why Apple horizontal rail ---- */
.wa-head { display: flex; align-items: baseline; justify-content: space-between; text-align: left; max-width: 1440px; margin: 0 auto 28px; }
.wa-head .wa-shop { font-size: 17px; flex-shrink: 0; }
.wa-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 calc((100% - 1440px) / 2 + 22px) 20px; scrollbar-width: none; }
.wa-rail::-webkit-scrollbar { display: none; }
.wa-card { flex: 0 0 360px; min-height: 620px; border-radius: 28px; scroll-snap-align: start; background: #fff; padding: 40px; display: flex; flex-direction: column; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.wa-card .wa-eyebrow { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: -0.016em; color: var(--ink); margin: 0 0 8px; }
.wa-card h3 { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: 0.009em; color: var(--ink); margin: 0 0 12px; }
.wa-card p { font-size: 14px; line-height: 1.43; color: var(--ink); margin: 0; }
.wa-card img { width: 100%; margin-top: auto; object-fit: contain; max-height: 220px; }
.wa-compare { text-align: center; margin-top: 30px; }
.pill-ghost { display: inline-block; background: #e8e8ed; color: var(--ink); border-radius: 980px; padding: 8px 16px; font-size: 17px; letter-spacing: -0.022em; }
.pill-ghost:hover { text-decoration: none; background: #dededf; }

/* ---- Bento (Why Apple) ---- */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 980px; margin: 40px auto; }
.bento .cell { background: #fff; border-radius: 18px; padding: 40px; min-height: 360px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); overflow: hidden; }
.bento .cell .cell-img { width: 76px; height: 76px; object-fit: contain; border-radius: 14px; margin: 0 0 16px; }
.bento .cell h3 { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.bento .cell p { font-size: 17px; color: var(--gray); margin: 0; }

/* ---- Keep exploring tiles ---- */
.explore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin: 40px auto; }
.explore-tile { background: var(--bg-gray); border-radius: 18px; padding: 110px 34px 60px; text-align: center; }
.explore-tile h3 { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
.explore-tile .tile-sub { font-size: 17px; color: var(--gray); margin-bottom: 16px; }
.explore-tile .explore-img { width: 100%; max-width: 360px; margin: 24px auto 0; object-fit: contain; }

/* ---- Environment / values ---- */
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 980px; margin: 40px auto; }
.three-col .col h3 { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 8px; }
.three-col .col p { font-size: 17px; color: var(--gray); margin: 0; }

/* ---- Footer ---- */
.footer { background: var(--bg-gray); padding: 40px 0 20px; }
.footer-legal { min-height: 1400px; }
.footer .wrap { max-width: 1024px; }
.footer-legal { border-bottom: 1px solid var(--hairline); padding-bottom: 18px; margin-bottom: 18px; }
.footer-legal p { margin: 0 0 8px; }
.footer-cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; padding: 18px 0 28px; border-bottom: 1px solid var(--hairline); align-items: start; }
.footer-cols h4 { font-size: 12px; color: var(--ink); margin: 0 0 8px; }
.footer-cols ul { list-style: none; margin: 0 0 4px; padding: 0; }
.footer-cols li { margin-bottom: 7px; }
.footer-cols a { font-size: 12px; color: var(--gray); line-height: 1.33; }
.footer-more { padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.footer-more .footnote { margin: 0; }
.footer-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 16px; }
.footer-bottom p { font-size: 12px; color: var(--gray); margin: 0; }
.footer-policy { display: flex; gap: 0; flex-wrap: wrap; }
.footer-more .footnote a, .footer-policy a { text-decoration: underline; }
.footer-policy a { font-size: 12px; color: var(--gray); padding: 0 10px; border-right: 1px solid rgba(0,0,0,0.2); line-height: 1; text-decoration: none; }
.footer-policy a:first-child { padding-left: 0; }
.footer-policy a:last-child { border-right: none; }

/* ---- mobile bottom buy bar ---- */
.buybar { display: none; }

/* ===========================================================
   RESPONSIVE — tablet 768
   =========================================================== */
@media (max-width: 833px) {
  .hero h2 { font-size: 48px; }
  .display-96 { font-size: 64px; }
  .display-64 { font-size: 48px; }
  .display-56 { font-size: 44px; }
  .reveal-copy { font-size: 36px; }
  .subcard-grid { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .gnav ul { display: none; }
}

/* ===========================================================
   RESPONSIVE — mobile 390
   =========================================================== */
@media (max-width: 540px) {
  /* hide the desktop nav row entirely (logo + links + icons) — only the
     dedicated mobile row shows, so no duplicated Apple logo. */
  .gnav-inner > .glogo, .gnav-inner ul, .gnav .gicons { display: none; }
  .gnav-mobile { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .gnav-mobile .gicons-m { display: flex; gap: 20px; align-items: center; }

  /* mobile reverts to stacked flow: static still on top, copy centered below */
  .hero { padding: 36px 0 22px; height: auto; min-height: 0; max-height: none; }
  /* Apple's mobile hero copy is CENTERED below the product, stacked. */
  .hero-copy { position: static; bottom: auto; left: auto; right: auto;
    flex-direction: column; align-items: flex-start; text-align: left; gap: 14px; padding: 18px 22px 0; }
  .hero-text { text-align: left; width: 100%; }
  .hero h1 { font-size: 21px; margin: 0 0 6px; }
  .hero h2 { font-size: 32px; line-height: 1.125; }
  .hero .hero-sub { font-size: 14px; color: var(--gray); margin-top: 8px; }
  .hero .hero-cta { display: none; }           /* moves to bottom buy bar */
  .hero-media { position: static; inset: auto; width: 100%; height: auto; background-position: center; max-width: 100%; }
  .hero-media video { display: none; }
  .hero-still-m { display: block !important; width: 100%; height: auto; }
  .hero-pp { display: none; }   /* static image on mobile — no play control */

  .display-96 { font-size: 40px; }
  .display-64 { font-size: 34px; }
  .display-56 { font-size: 32px; }
  .display-40 { font-size: 28px; }
  .reveal-copy { font-size: 26px; margin: 30px auto; }
  .eyebrow { font-size: 19px; }

  .section { padding: 60px 0; }
  .stat-grid, .subcard-grid, .bento, .explore-grid, .three-col, .footer-cols { grid-template-columns: 1fr; }
  .footer-cols { gap: 0; }
  .scrub-stage { height: 50vh; }

  /* Mobile: neutralize desktop fixed-px section heights/paddings so the page
     compresses to mobile rhythm instead of staying desktop-tall. */
  section[style] { height: auto !important; min-height: 0 !important; padding: 56px 0 !important; }
  /* Mobile: don't pin. Apple stacks heading + media in natural flow on phones,
     so the tall scroll-pin heights become huge empty gaps. Collapse them. */
  .scrub[style], .pinblock[style], .pinblock.tall[style] {
    height: auto !important; padding: 56px 0 !important;
  }
  .scrub-sticky, .pin-sticky { position: static !important; height: auto !important; padding-top: 0 !important; }
  .scrub-sticky .section-head, .pin-sticky .section-head { margin-bottom: 24px; padding: 0 22px; }
  .scrub-stage { position: relative !important; height: 56vh !important; max-width: 100% !important; }
  .media-still.big, .media-still.round { max-width: 100% !important; }
  .immersive[style] { min-height: 0 !important; padding: 70px 0 60px !important; height: auto !important; }
  .immersive { min-height: 0 !important; padding: 70px 0 60px !important; }
  .immersive-cols { gap: 22px; margin-top: 30px; }
  .fb-immersive[style] { padding: 24px 0 0 !important; }
  .footer-legal { min-height: 0 !important; }
  .footer { padding-bottom: 90px !important; }

  .buybar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9500;
    background: rgba(245,245,247,0.92);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--hairline);
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
    align-items: center; justify-content: space-between;
  }
  .buybar .price { font-size: 17px; font-weight: 600; }

  /* Mobile local nav: condensed. Links collapse; title + Buy only show once
     the bar is stuck (frosted), so no lone Buy pill floats over whitespace. */
  .lnav { height: 48px; }
  .lnav-links { display: none; }
  .lnav-title { font-size: 17px; }
  .lnav-right { opacity: 0; transition: opacity .25s; }
  .lnav.stuck .lnav-right { opacity: 1; }
}

.hero-still-m { display: none; }

/* === AUDIT-2026-06-29 consolidated fidelity fixes === */
/* Appended at END so section-scoped rules win over existing globals.
   Media order (LEAK GUARD): base -> desktop min-width -> tablet -> max-833 -> mobile max-540 LAST.
   Desktop size-bumps on shared utility classes (.display-96/.display-56/.eyebrow)
   are section-scoped + min-width-wrapped so they cannot leak down into 768/390. */

/* ---- (1) base / no media query ---- */
.hero .hero-sub { font-family:var(--sans); font-size:17px; font-weight:600; line-height:21px; letter-spacing:-0.374px; color:var(--ink); }
section[aria-label="Highlights"] .filmlink { font-family:var(--sans); font-size:17px; line-height:25px; font-weight:400; }
.hl-cap .disclaimer { display:block; margin-top:10px; font-size:12px; line-height:16px; font-weight:400; letter-spacing:0; font-family:var(--sans); color:var(--ink-soft); }
.hl-cap .disclaimer a { color:var(--blue-link); }
#noise .stat-card .cap { font-family:var(--sans); font-size:19px; color:var(--ink); line-height:1.3; margin:0 0 8px; }
#hearing-health .section-head, #hearing-health .hh-intro { text-align:left; }
#hearing-health .more-link { font-family:var(--display); font-size:21px; color:var(--blue-link); text-decoration:none; }
section[aria-label="Battery"] .hrs-callout { font-family:var(--sans); font-size:12px; line-height:16px; letter-spacing:-0.01em; color:var(--gray); margin-top:14px; }
section[aria-label="Battery"] .hrs-callout strong { color:var(--ink); font-weight:600; }
section[aria-label="Find My"] .display-56 { text-align:left; }
section[aria-label="Find My"] .findmy-body { font-size:19px; line-height:1.42; letter-spacing:0.011em; color:var(--ink); margin:20px 0 24px; max-width:480px; }
section[aria-label="Find My"] .findmy-callout strong { color:var(--ink); font-weight:600; }
section[aria-label="Find My"] .findmy-media img { width:100%; height:auto; display:block; }
section[aria-label="Why Apple"] .wa-compare .pill-ghost { background:none; padding:0; font-weight:600; font-size:17px; line-height:21px; letter-spacing:-0.022em; color:var(--ink); }
section[aria-label="Why Apple"] .wa-compare .pill-ghost:hover { background:none; text-decoration:underline; }
section[aria-label="Keep exploring AirPods"] .explore-tile { text-align:left; padding:40px 34px 48px; }
section[aria-label="Keep exploring AirPods"] .tile-price { font-size:17px; color:var(--gray); margin:6px 0 14px; }
section[aria-label="Keep exploring AirPods"] .tile-features li { font-size:17px; line-height:1.45; padding:14px 0; border-bottom:1px solid rgba(0,0,0,.12); list-style:none; }
section[aria-label="Environment"] .three-col .col img { height:56px; width:auto; display:block; margin:0 0 16px; }
section[aria-label="Our values"].center { text-align:left; }
section[aria-label="Our values"] .section-head { text-align:left; max-width:980px; margin:0 auto 24px; }
section[aria-label="Our values"] .three-col { text-align:left; }
section[aria-label="Our values"] .three-col .col img { height:56px; width:auto; display:block; margin:0 0 16px; }
.footer-cols a, .footer-policy a, .footer-more .footnote a, .footer-bottom p { color:rgba(0,0,0,0.72); letter-spacing:-0.12px; }
.footer-cols a, .footer-policy a { line-height:16px; }
.footer-cols h4 { color:rgba(0,0,0,0.88); font-weight:600; letter-spacing:-0.12px; line-height:16px; }

/* ---- (2) desktop: min-width:834px ---- */
@media (min-width:834px) {
  .hero h2 { font-size:64px; line-height:68px; letter-spacing:-0.009em; }
  .lnav-links a { color:rgb(0,0,0); line-height:22px; }
  section[aria-label="Highlights"] .display-56 { font-size:56px; line-height:60px; letter-spacing:-0.28px; }
  .hl-cap { font-size:28px; line-height:32px; color:var(--ink-soft); text-align:left; }
  section[aria-label="Take a closer look"] .display-56 { font-size:56px; line-height:60px; letter-spacing:-0.28px; }
  #noise .display-96 { font-size:96px; line-height:100px; letter-spacing:-1.44px; }
  #noise .noise-eyebrow { font-size:28px; line-height:32px; }
  #noise .stat-card .big { font-size:80px; line-height:80px; letter-spacing:-1.2px; }
  section[aria-label="Audio performance"] .display-96 { font-size:96px; line-height:100px; letter-spacing:-1.44px; }
  section[aria-label="Audio performance"] .eyebrow { font-size:28px; line-height:32px; }
  section[aria-label="Personalized listening"] .display-96 { font-size:96px; line-height:100px; letter-spacing:-1.44px; }
  section[aria-label="Personalized listening"] .eyebrow { font-size:28px; line-height:32px; }
  section[aria-label="Fitness"] .display-96 { font-size:96px; line-height:100px; letter-spacing:-1.44px; }
  section[aria-label="Fitness"] .eyebrow { font-size:28px; line-height:32px; }
  #hearing-health .display-56 { font-size:96px; line-height:100px; letter-spacing:-1.44px; text-align:left; }
  #hearing-health .hh-intro { display:flex; gap:40px; align-items:flex-start; max-width:1080px; margin:0 auto 40px; padding:0 22px; }
  #hearing-health .hh-copy p { font-size:19px; line-height:1.42; color:var(--ink-soft); margin:0 0 16px; }
  section[aria-label="Experience"] .display-96 { font-size:96px; line-height:100px; letter-spacing:-1.44px; }
  section[aria-label="Battery"] .display-56 { font-size:96px; line-height:100px; letter-spacing:-1.44px; }
  section[aria-label="Battery"] .hrs .up, section[aria-label="Battery"] .hrs .cap { font-family:var(--display); font-size:19px; font-weight:600; line-height:23px; letter-spacing:0.228px; }
  section[aria-label="Battery"] .hrs .num { font-size:80px; line-height:80px; letter-spacing:-1.2px; }
  section[aria-label="Find My"] .findmy-tile { display:flex; align-items:center; max-width:1240px; margin:0 auto; background:#fafafa; border-radius:28px; overflow:hidden; }
  section[aria-label="Find My"] .findmy-copy { flex:1 1 50%; padding:60px; text-align:left; }
  section[aria-label="Why Apple"] .display-56 { font-size:56px; line-height:60px; letter-spacing:-0.28px; }
  section[aria-label="Why Apple"] .wa-card .wa-eyebrow { font-family:var(--sans); font-size:17px; line-height:21px; letter-spacing:-0.374px; }
  section[aria-label="Why Apple"] .wa-card h3 { font-size:28px; line-height:32px; }
  section[aria-label="Why Apple"] .wa-card p { font-size:17px; line-height:21px; }
  section[aria-label="Why Apple"] .wa-compare { max-width:1440px; margin:30px auto 0; padding:0 var(--pad); text-align:left; }
  section[aria-label="Keep exploring AirPods"] .display-56 { font-size:56px; line-height:60px; letter-spacing:-0.28px; }
}

/* ---- (2) desktop: min-width:1069px (Environment / Our values) ---- */
@media (min-width:1069px) {
  section[aria-label="Environment"] .display-56 { font-size:56px; line-height:60px; letter-spacing:-0.28px; text-align:left; }
  section[aria-label="Environment"] .three-col .col h3 { font-size:28px; line-height:32px; letter-spacing:0.196px; text-align:left; }
  section[aria-label="Environment"] .section-head { display:flex; justify-content:space-between; align-items:baseline; max-width:980px; margin:0 auto 40px; }
  section[aria-label="Our values"] .display-56 { font-size:56px; line-height:60px; letter-spacing:-0.28px; }
  section[aria-label="Our values"] .three-col .col h3 { font-size:28px; line-height:32px; letter-spacing:0.196px; font-weight:600; }
}

/* ---- (3) tablet: min-width:541px and max-width:833px ---- */
@media (min-width:541px) and (max-width:833px) {
  .hero h2 { font-size:56px; }
  section[aria-label="Highlights"] .display-56 { font-size:48px; line-height:52px; }
  .hl-cap { font-size:24px; line-height:28px; }
  section[aria-label="Take a closer look"] .display-56 { font-size:48px; line-height:52px; }
  #noise .display-96 { font-size:80px; line-height:84px; letter-spacing:-1.2px; }
  #noise .stat-card .big { font-size:64px; line-height:64px; }
  section[aria-label="Audio performance"] .display-96 { font-size:80px; line-height:84px; letter-spacing:-1.2px; }
  section[aria-label="Personalized listening"] .display-96 { font-size:80px; line-height:84px; letter-spacing:-1.2px; }
  section[aria-label="Fitness"] .display-96 { font-size:80px; line-height:84px; letter-spacing:-1.2px; }
  #hearing-health .display-56 { font-size:64px; line-height:68px; letter-spacing:-0.96px; }
  section[aria-label="Battery"] .hrs .up, section[aria-label="Battery"] .hrs .cap { font-family:var(--display); font-size:17px; font-weight:600; line-height:21px; letter-spacing:0.012em; }
  section[aria-label="Why Apple"] .display-56 { font-size:48px; }
}

/* ---- (4) max-width:833px ---- */
@media (max-width:833px) {
  .lnav-links a { font-size:14px; line-height:18.2px; letter-spacing:-0.02em; }
  .lnav-title { font-size:19px; line-height:24px; letter-spacing:0.012em; color:rgb(0,0,0); }
  #hearing-health .hh-intro { flex-direction:column; gap:18px; }
  #hearing-health .hh-copy p { font-size:17px; line-height:1.47; }
  section[aria-label="Battery"] .hrs .num { font-size:56px; line-height:1; letter-spacing:-0.56px; }
  section[aria-label="Find My"] .findmy-tile, section[aria-label="Find My"] .findmy-copy { flex-direction:column; padding:40px 22px; }
}

/* ---- (7) mobile: max-width:540px (LAST) ---- */
@media (max-width:540px) {
  .hero h2 { text-align:center; letter-spacing:0.004em; }
  .hero-copy { align-items:center; }
  .hero-text { text-align:center; }
  .hero .hero-sub { font-size:12px; line-height:16px; letter-spacing:-0.12px; color:var(--ink); }
  .hero .hero-cta { display:flex; justify-content:center; gap:18px; align-items:center; }
  .hero .hero-cta .price { font-size:14px; line-height:18px; letter-spacing:-0.224px; font-weight:600; }
  .buybar { display:none; }
  section[aria-label="Highlights"] .display-56 { font-size:28px; line-height:32px; letter-spacing:0.196px; }
  section[aria-label="Highlights"] .filmlink { font-size:14px; line-height:20px; letter-spacing:-0.224px; }
  .hl-cap { font-size:17px; line-height:21px; letter-spacing:-0.374px; font-family:var(--sans); }
  section[aria-label="Take a closer look"] .display-56 { font-size:28px; line-height:32px; letter-spacing:0.196px; }
  #noise .display-96 { font-size:48px; line-height:52px; letter-spacing:-0.144px; }
  #noise .noise-eyebrow { font-size:21px; line-height:25px; }
  #noise .stat-card .big { font-size:48px; line-height:48px; letter-spacing:-0.144px; }
  section[aria-label="Audio performance"] .display-96 { font-size:48px; line-height:52px; letter-spacing:-0.144px; }
  section[aria-label="Audio performance"] .eyebrow { font-size:21px; line-height:25px; }
  section[aria-label="Personalized listening"] .display-96 { font-size:48px; line-height:52px; letter-spacing:-0.144px; }
  section[aria-label="Fitness"] .display-96 { font-size:48px; line-height:52px; letter-spacing:-0.144px; }
  #hearing-health .display-56 { font-size:40px; line-height:44px; letter-spacing:-0.6px; }
}

/* === AUDIT-2026-06-29 (B) closer-look product tour + magical experience === */
/* Appended LAST so these section-scoped rules win. Order within: base -> max-833 -> max-540. */

/* ---- Section A: Take a closer look — scroll-synced caption tour ---- */
section[aria-label="Take a closer look"] .scrub-sticky { justify-content:flex-start; padding-top:60px; }
section[aria-label="Take a closer look"] .scrub-sticky .section-head { text-align:center; margin:0 auto 4px; }
section[aria-label="Take a closer look"] .scrub-stage { height:44vh; max-width:960px; }
section[aria-label="Take a closer look"] .cl-tour { width:100%; max-width:760px; margin:0 auto; padding:0 22px; }
section[aria-label="Take a closer look"] .cl-captions { position:relative; list-style:none; margin:6px 0 0; padding:0; min-height:124px; }
section[aria-label="Take a closer look"] .cl-cap {
  position:absolute; inset:0; margin:0; text-align:center;
  opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease; pointer-events:none;
}
section[aria-label="Take a closer look"] .cl-cap.active { opacity:1; transform:none; }
section[aria-label="Take a closer look"] .cl-cap p {
  font-family:var(--display); font-size:21px; line-height:1.38; letter-spacing:.011em;
  color:var(--gray); margin:0 auto; max-width:660px;
}
section[aria-label="Take a closer look"] .cl-cap strong { color:var(--ink); font-weight:600; }
section[aria-label="Take a closer look"] .cl-cap sup { font-size:.6em; vertical-align:.5em; }
section[aria-label="Take a closer look"] .cl-chips {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px auto 0; max-width:720px;
}
section[aria-label="Take a closer look"] .cl-chip {
  font-family:var(--sans); font-size:14px; line-height:1; letter-spacing:-.01em;
  color:var(--ink); background:rgba(0,0,0,.05); border:0; border-radius:980px;
  padding:9px 14px; cursor:pointer; transition:background .25s, color .25s;
}
section[aria-label="Take a closer look"] .cl-chip:hover { background:rgba(0,0,0,.09); }
section[aria-label="Take a closer look"] .cl-chip.active { background:var(--ink); color:#fff; }

/* ---- Section B: Experience — "Magic to your ears." magical gallery ---- */
.magical-exp { background:#fff; }
.magical-exp .mx-head { text-align:center; max-width:760px; margin:0 auto; padding:0 22px; }
.magical-exp .mx-head .eyebrow { display:block; margin:0 0 6px; }
.magical-exp .mx-head .display-56 { margin:0; text-align:center; }
.magical-exp .mx-intro {
  font-family:var(--display); font-size:21px; line-height:1.43; letter-spacing:.011em;
  color:var(--gray); margin:22px auto 0; max-width:660px;
}
.magical-exp .mx-intro sup { font-size:.6em; vertical-align:.5em; }
.magical-exp .mx-gallery { max-width:1024px; margin:54px auto 0; padding:0 22px; }
.magical-exp .mx-tabs {
  position:relative; display:flex; gap:4px; justify-content:center;
  background:rgba(0,0,0,.05); border-radius:980px; padding:5px;
  width:max-content; max-width:100%; margin:0 auto 36px;
}
.magical-exp .mx-tab {
  font-family:var(--sans); font-size:17px; line-height:1; letter-spacing:-.022em;
  color:var(--ink); background:transparent; border:0; border-radius:980px;
  padding:11px 18px; cursor:pointer; white-space:nowrap;
  transition:background .3s, color .3s;
}
.magical-exp .mx-tab:hover { background:rgba(0,0,0,.06); }
.magical-exp .mx-tab.active { background:var(--ink); color:#fff; }
.magical-exp .mx-panels { position:relative; display:grid; }
.magical-exp .mx-panel {
  grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease, visibility .5s; pointer-events:none;
}
.magical-exp .mx-panel.active { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.magical-exp .mx-media {
  border-radius:28px; overflow:hidden; background:var(--bg-gray); aspect-ratio:16 / 10;
}
.magical-exp .mx-media img { width:100%; height:100%; object-fit:cover; display:block; }
.magical-exp .mx-media-siri {
  display:flex; align-items:center; justify-content:center; text-align:center; padding:40px;
  background:radial-gradient(120% 120% at 50% 35%, #2c2c31 0%, #131316 60%, #0a0a0c 100%);
}
.magical-exp .mx-siri-copy {
  font-family:var(--display); font-weight:600; font-size:48px; line-height:1.08;
  letter-spacing:-.02em; color:#f5f5f7; margin:0; max-width:660px;
}
.magical-exp .mx-siri-grad {
  background:linear-gradient(92deg, #ad6bff 0%, #6f8bff 45%, #36d6e8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.magical-exp .mx-caption { max-width:700px; margin:28px auto 0; text-align:center; }
.magical-exp .mx-caption p {
  font-family:var(--display); font-size:21px; line-height:1.43; letter-spacing:.011em;
  color:var(--gray); margin:0;
}
.magical-exp .mx-caption strong { color:var(--ink); font-weight:600; }
.magical-exp .mx-caption sup { font-size:.6em; vertical-align:.5em; }
.magical-exp .mx-sosumi {
  font-family:var(--sans) !important; font-size:12px !important; line-height:1.34 !important;
  color:var(--gray) !important; margin:12px auto 0 !important; max-width:560px;
}
.magical-exp .mx-sosumi a { color:var(--blue-link); }
.magical-exp .mx-features {
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  max-width:980px; margin:80px auto 0; padding:0 22px;
}
.magical-exp .mx-feature { text-align:left; }
.magical-exp .mx-feature-icon { height:44px; width:auto; display:block; margin:0 0 18px; }
.magical-exp .mx-feature-head {
  font-family:var(--display); font-size:24px; line-height:1.16; letter-spacing:.009em;
  font-weight:600; color:var(--ink); margin:0 0 10px;
}
.magical-exp .mx-feature p {
  font-family:var(--sans); font-size:17px; line-height:1.47; letter-spacing:-.022em;
  color:var(--gray); margin:0;
}
.magical-exp .mx-feature sup { font-size:.7em; vertical-align:.5em; }

/* ---- tablet / small desktop ---- */
@media (max-width:833px){
  .magical-exp .mx-siri-copy { font-size:34px; }
  .magical-exp .mx-features { gap:30px; }
}

/* ---- mobile (max-540) — closer-look flows static, captions stack; gallery stacks ---- */
@media (max-width:540px){
  section[aria-label="Take a closer look"] .scrub-stage { height:46vh !important; }
  section[aria-label="Take a closer look"] .cl-chips { display:none; }
  section[aria-label="Take a closer look"] .cl-captions { position:static; min-height:0; margin-top:16px; }
  section[aria-label="Take a closer look"] .cl-cap {
    position:static; inset:auto; opacity:1; transform:none; pointer-events:auto;
    padding:16px 0; border-top:1px solid var(--hairline); text-align:left;
  }
  section[aria-label="Take a closer look"] .cl-cap:first-child { border-top:0; padding-top:4px; }
  section[aria-label="Take a closer look"] .cl-cap p { font-size:17px; line-height:1.45; text-align:left; }

  .magical-exp .mx-intro { font-size:17px; line-height:1.47; }
  .magical-exp .mx-gallery { margin-top:40px; }
  .magical-exp .mx-tabs { width:100%; overflow-x:auto; justify-content:flex-start; border-radius:20px; -webkit-overflow-scrolling:touch; }
  .magical-exp .mx-tab { font-size:14px; padding:9px 13px; }
  .magical-exp .mx-media, .magical-exp .mx-media-siri { aspect-ratio:4 / 5; border-radius:20px; }
  .magical-exp .mx-siri-copy { font-size:27px; }
  .magical-exp .mx-caption p { font-size:17px; line-height:1.45; }
  .magical-exp .mx-features { grid-template-columns:1fr; gap:34px; margin-top:48px; }
}

/* === FABLE PASS 2026-07-03 — filmstrip + measured-delta fixes (appended LAST, wins) === */

/* ---- (1) HERO: copy bottom-left, $249+Buy bottom-RIGHT over the film (live layout) ---- */
.hero-copy{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hero .hero-cta{padding-bottom:6px}
.hero .hero-cta .price{font-size:17px;line-height:23.8px;letter-spacing:-0.374px;font-weight:400}

/* ---- (2) HIGHLIGHTS: dot progress w/ elongated active pill; captions left ---- */
.hl-cap{text-align:left}
.hl-cap .disclaimer{text-align:left}
.hl-prog{gap:8px;padding:12px 16px}
.hl-prog .seg{width:7px;height:7px;border-radius:4px;transition:width .3s ease}
.hl-prog .seg.act{width:26px}

/* ---- (3) CLOSER LOOK: ⊕ tour list LEFT + product scrub RIGHT (desktop) ---- */
.cl-cap{visibility:hidden}
.cl-cap.active{visibility:visible}
.cl-ar{display:none;align-items:center;gap:8px;font-family:var(--sans);font-size:17px;letter-spacing:-0.374px;color:var(--blue-link);margin:14px auto 0;width:max-content}
@media (min-width:834px){
  section[aria-label="Take a closer look"] .scrub-sticky{display:grid;grid-template-columns:400px 1fr;grid-template-rows:auto 1fr auto;column-gap:48px;align-items:center;justify-content:center;padding:70px 60px 36px;max-width:1440px;margin:0 auto}
  section[aria-label="Take a closer look"] .scrub-sticky .section-head{grid-column:1 / -1;text-align:left;margin:0 0 26px;padding:0}
  section[aria-label="Take a closer look"] .scrub-stage{grid-column:2;grid-row:2;height:60vh;max-width:none;width:100%}
  section[aria-label="Take a closer look"] .cl-tour{grid-column:1;grid-row:2;max-width:none;width:100%;margin:0;padding:0}
  section[aria-label="Take a closer look"] .cl-chips{flex-direction:column;gap:0;margin:0;max-width:none;justify-content:flex-start}
  section[aria-label="Take a closer look"] .cl-chip{background:none;border-radius:0;border-top:1px solid rgba(0,0,0,.16);width:100%;text-align:left;padding:15px 0 15px 36px;font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-0.374px;color:var(--ink);position:relative;line-height:1.25;transition:none}
  section[aria-label="Take a closer look"] .cl-chip::before{content:"+";position:absolute;left:0;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:400;line-height:1}
  section[aria-label="Take a closer look"] .cl-chip:last-child{border-bottom:1px solid rgba(0,0,0,.16)}
  section[aria-label="Take a closer look"] .cl-chip:hover,section[aria-label="Take a closer look"] .cl-chip.active{background:none;color:var(--ink)}
  section[aria-label="Take a closer look"] .cl-chip.active::before{content:"\2013"}
  section[aria-label="Take a closer look"] .cl-captions{min-height:130px;margin-top:20px}
  section[aria-label="Take a closer look"] .cl-cap{text-align:left}
  section[aria-label="Take a closer look"] .cl-cap p{font-size:17px;line-height:1.47;letter-spacing:-0.374px;font-family:var(--sans);text-align:left;color:var(--gray);max-width:none}
  section[aria-label="Take a closer look"] .cl-ar{display:flex;grid-column:2;grid-row:3;margin:10px auto 0}
}

/* ---- (4) NOISE: headline centered over the ring media; hairline stat columns; card rail ---- */
#noise .ring-wrap{position:relative;margin:0 auto 40px}
#noise .noise-head{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;z-index:2;pointer-events:none;max-width:none}
#noise .ring-pp{position:absolute;right:18px;bottom:18px;z-index:3;width:36px;height:36px;border-radius:50%;border:none;background:rgba(210,210,215,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer}
#noise .reveal-copy{max-width:830px;margin:60px auto}
#noise .stat-grid{max-width:830px;gap:44px;margin:70px auto}
#noise .stat-card{background:none;border-radius:0;border-top:1px solid rgba(0,0,0,.16);padding:18px 0 0}
#noise .stat-card .cap{font-family:var(--sans);font-size:17px;font-weight:400;color:var(--ink);line-height:24.7px;letter-spacing:-0.374px;margin:0 0 4px}
#noise .stat-card .small{font-family:var(--sans);font-size:17px;font-weight:400;color:var(--ink);line-height:23.8px;letter-spacing:-0.374px;margin-top:4px}
.nc-block{max-width:1240px;margin:70px auto 0;padding:0 22px;position:relative}
.nc-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.nc-rail::-webkit-scrollbar{display:none}
.nc-card{flex:0 0 400px;max-width:86vw;scroll-snap-align:start}
.nc-img{border-radius:20px;overflow:hidden;background:var(--bg-gray);aspect-ratio:4/5}
.nc-img img{width:100%;height:100%;object-fit:cover;display:block}
.nc-copy{font-family:var(--sans);font-size:14px;line-height:1.43;letter-spacing:-0.016em;color:var(--gray);margin:16px 4px 0}
.nc-copy strong{color:var(--ink);font-weight:600}
.nc-arrows{display:flex;gap:12px;justify-content:flex-end;margin-top:16px}
.nc-arrow{width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.06);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.nc-arrow:hover{background:rgba(0,0,0,.12)}

/* ---- (5) SOUND OF SCIENCE: pinned media + two scrub-synced side captions ---- */
section[aria-label="Audio performance"] .sos-wrap{display:flex;align-items:center;gap:48px;max-width:1280px;margin:0 auto;padding:0 22px;width:100%}
section[aria-label="Audio performance"] .sos-wrap .media-still{flex:1 1 auto;min-width:0;max-width:920px}
.sos-caps{position:relative;flex:0 0 300px;min-height:240px}
.sos-cap{position:absolute;inset:0;margin:0;font-family:var(--display);font-size:19px;font-weight:600;line-height:1.42;letter-spacing:0.011em;color:var(--ink-soft);opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.sos-cap.active{opacity:1;transform:none}

/* ---- (6) EXPERIENCE head: 48px gray eyebrow + 48px headline, LEFT (live pattern) ---- */
@media (min-width:834px){
  .magical-exp .mx-head{max-width:980px;text-align:left}
  .magical-exp .mx-head .eyebrow{font-size:48px;line-height:56px;letter-spacing:-0.24px;color:var(--gray);font-weight:600}
  .magical-exp .mx-head .display-56{text-align:left;font-size:48px;line-height:52px;letter-spacing:-0.144px}
  .magical-exp .mx-intro{margin-left:0;max-width:720px}
}

/* ---- (7) misc measured type (desktop) ---- */
.lnav-links a{font-weight:400}
.lnav-title{color:var(--ink)}

/* ---- (8) tablet ---- */
@media (max-width:833px){
  .lnav-title{font-size:21px;line-height:25px}
  .sos-caps{flex:0 0 260px}
}

/* ---- (9) mobile max-540 (LAST) ---- */
@media (max-width:540px){
  /* hero: live 390 plays the FILM with centered copy overlaid at the bottom (no static still) */
  .hero{height:80vh;min-height:600px;max-height:none;padding:0}
  .hero-media{position:absolute;inset:0;width:100%;height:100%;max-width:none}
  .hero-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
  .hero-still-m{display:none !important}
  .hero-pp{display:flex;top:auto;bottom:16px;right:16px}
  .hero-copy{position:absolute;left:0;right:0;bottom:30px;padding:0 22px;flex-direction:column;align-items:center;gap:12px}
  .hero .hero-cta{display:flex;justify-content:center;padding-bottom:0}
  .hero .hero-cta .price{font-size:17px;line-height:23.8px;letter-spacing:-0.374px;font-weight:400}

  /* closer look: stacked captions visible (visibility base rule must not hide them) */
  section[aria-label="Take a closer look"] .cl-cap{visibility:visible}
  .cl-ar{display:flex}

  /* noise: stat text sizes per live 390 */
  #noise .stat-card .cap{font-size:19px;line-height:26.6px;letter-spacing:-0.228px}
  #noise .stat-card .small{font-size:17px}
  .nc-card{flex:0 0 84vw}

  /* sound of science: captions flow under the media, both visible */
  section[aria-label="Audio performance"] .sos-wrap{flex-direction:column;gap:24px}
  .sos-caps{position:static;flex:none;min-height:0}
  .sos-cap{position:static;opacity:1;transform:none;margin:0 0 18px;font-size:17px;line-height:1.45}

  /* experience head: live 390 = 26px gray eyebrow + 32px headline, LEFT */
  .magical-exp .mx-head{text-align:left}
  .magical-exp .mx-head .eyebrow{font-size:26px;line-height:30px;color:var(--gray)}
  .magical-exp .mx-head .display-56{text-align:left}
  .magical-exp .mx-intro{margin-left:0}

  /* why-apple card body per live 390 */
  section[aria-label="Why Apple"] .wa-card p{font-size:17px;line-height:20.02px;letter-spacing:-0.374px}

  /* environment / values: centered columns on phone (live) */
  section[aria-label="Environment"] .three-col .col,section[aria-label="Our values"] .three-col .col{text-align:center}
  section[aria-label="Environment"] .three-col .col img,section[aria-label="Our values"] .three-col .col img{margin:0 auto 16px}
  section[aria-label="Environment"] .three-col .col h3,section[aria-label="Our values"] .three-col .col h3{line-height:1.4;letter-spacing:-0.105px}

  /* keep exploring: 21px Display link (live 390) */
  section[aria-label="Keep exploring AirPods"] .filmlink{font-family:var(--display);font-size:21px;line-height:25px;letter-spacing:0.011em}
}

/* === FABLE PASS 2026-07-04 — Audio performance "sound of science" pinned reveal ===
   Live Apple PINS this section: the heading + lead show first, then scroll up and fade out
   as the AirPods image RISES to center and displays large + full. Cramming the tall 96px
   heading + the 774px image into one static frame overflowed 100vh and clipped the image
   bottom (earlier a flex-start+cap fix squished it instead). Fix = two CENTERED states that
   crossfade on scroll — each independently fits 100vh, so nothing clips OR squishes.
   Desktop-only (min-width:834px); mobile un-pins & stacks (rules near line 496). */
@media (min-width:834px){
  section[aria-label="Audio performance"] .pin-sticky{ justify-content:center; padding-top:0; }
  section[aria-label="Audio performance"] .section-head{ position:relative; z-index:2; margin:0; will-change:transform,opacity; }
  section[aria-label="Audio performance"] .sos-wrap{
    position:absolute; inset:0; margin:0; display:flex; flex-direction:row;
    align-items:center; justify-content:center; gap:56px; padding:0 48px;
    opacity:0; pointer-events:none; will-change:opacity;
  }
  section[aria-label="Audio performance"] .media-still{ max-height:66vh; width:auto; max-width:720px; margin:0; }
  section[aria-label="Audio performance"] .sos-caps{ flex:0 0 300px; }
}

/* === FABLE PASS 2026-07-04 (round 2) — Trent eye-gate fixes, mobile === */

/* (A) Take a closer look — PIN on mobile too so the scrub animation plays out while
   you scroll through it (the un-pin at lines 493-498 collapsed the scroll range so it
   flew past). Re-pin the sticky stage, single active caption synced by JS (not the
   stacked list), hide the chip nav to fit one viewport. mp4 source (design-large.mp4)
   plays on iOS where the webm went black. */
@media (max-width:540px){
  /* .scrub[aria-label] (0,2,1) to outrank the mobile un-pin rule .scrub[style] (0,2,0),
     which otherwise forces height:auto and collapses the scrub range. */
  .scrub[aria-label="Take a closer look"]{ height:300vh !important; padding:0 !important; min-height:0 !important; }
  section[aria-label="Take a closer look"] .scrub-sticky{
    position:sticky !important; top:0 !important; height:100vh !important;
    padding:64px 0 0 !important; justify-content:flex-start !important; overflow:hidden !important;
  }
  /* full-width centered stage — the video bg is flattened to the section gray (#f5f5f7),
     so it reads as the AirPods floating on the light page, exactly like desktop. */
  section[aria-label="Take a closer look"] .scrub-stage{
    position:relative !important; height:48vh !important; width:100% !important; max-width:100% !important; margin:0 auto !important;
  }
  /* one caption at a time, synced by closerLookTour() — override the stacked-visible rule */
  section[aria-label="Take a closer look"] .cl-captions{ position:relative; min-height:150px; margin-top:18px; padding:0 22px; }
  section[aria-label="Take a closer look"] .cl-cap{ visibility:hidden !important; position:absolute; inset:0; padding:0 22px; opacity:0; transition:opacity .3s ease; }
  section[aria-label="Take a closer look"] .cl-cap.active{ visibility:visible !important; opacity:1; }
  section[aria-label="Take a closer look"] .cl-chips{ display:none !important; }
  section[aria-label="Take a closer look"] .cl-ar{ display:none !important; }

  /* (B) four-times-more cards (nc-img, native 744x1160) + Experience gallery
     (mx-media, native 2520x1220): box aspect != image aspect made object-fit:cover
     crop hard = "too zoomed in". Match each box to its image's native ratio so the
     WHOLE photo shows (zoom OUT, more visible), no crop, no letterbox. Mobile-scoped
     so the desktop (which Trent said is perfect) is untouched. */
  #noise .nc-img{ aspect-ratio:744 / 1160 !important; }
  .magical-exp .mx-media{ aspect-ratio:2520 / 1220 !important; }

}

/* === FABLE PASS 2026-07-04 — Highlights progress segments are clickable (jump to a
   highlight). Give the thin 4px bars / 7px dots a comfortable invisible hit area and a
   pointer cursor, without altering their appearance. === */
#hl-prog .seg{ cursor:pointer; overflow:visible; }
#hl-prog .seg::after{ content:""; position:absolute; top:-10px; bottom:-10px; left:-4px; right:-4px; }