/* Desktop: scroll drives steps. Pager buttons are mobile-only. */
/* ============================================================
   v2.24 — Simplified: core rules only.
   Grid layout, sticky positioning, and nav offset are now handled
   exclusively by styles-main.css v2.24 (loaded last, wins cascade).
   ============================================================ */
@media (min-width: 901px) {
  /* ===== xp-sticky-stage 必須是普通流 ===== */
  #experience .xp-sticky-stage {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  /* ===== 隱藏 #experience 內的殘留 xp-scroll-track / xp-pin ===== */
  #experience .xp-scroll-track,
  #experience .xp-pin {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  /* ===== 零售商區塊保持原有 sticky 行為 ===== */
  #retail-dashboard .xp-sticky-stage,
  #retail-dashboard .dash-sticky-stage {
    position: sticky !important;
    top: var(--xp-nav-offset, 80px) !important;
    transform: none !important;
    contain: none !important;
    overflow: visible !important;
  }

  /* ===== 零售商區塊內的 scroll-track 保持正常 ===== */
  #retail-dashboard .xp-scroll-track {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* ===== 零售商區塊內的 pin 保持正常 ===== */
  #retail-dashboard .xp-pin {
    display: block !important;
    height: 68vh !important;
    min-height: 68vh !important;
  }

  /* ===== 步驟導航按鈕：桌面隱藏 ===== */
  #experience .xp-step-nav,
  #retail-dashboard .xp-step-nav {
    display: none !important;
  }

  /* ===== 步進點樣式 ===== */
  .xp-dot-label,
  .xp-dot-num {
    display: none !important;
  }

  .xp-progress {
    gap: 10px !important;
    padding-bottom: 0 !important;
  }

  .xp-dot,
  .dash-dot {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    border-radius: 999px !important;
    border: 1.5px solid rgba(18, 22, 42, 0.35) !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .xp-dot.is-done,
  .dash-dot.is-done {
    background: color-mix(in srgb, var(--accent) 40%, transparent) !important;
    border-color: var(--accent) !important;
  }

  .xp-dot.is-active,
  .dash-dot.is-active,
  .xp-dot[aria-current="true"],
  .dash-dot[aria-current="true"] {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent) !important;
  }
}

/* Mobile step pager: natural document flow (no cramped sticky viewport). */

@media (max-width: 900px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 64px;
  }

  #experience,
  #retail-dashboard {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 56px;
  }

  /* Don't force a tall sticky runway — pager mode is button-driven */
  html:not(.xp-static) #experience .xp-sticky-root,
  html:not(.dash-static) #retail-dashboard .xp-sticky-root {
    min-height: 0 !important;
  }

  html:not(.xp-static) #experience .xp-sticky-stage,
  html:not(.dash-static) #retail-dashboard .xp-sticky-stage,
  html:not(.dash-static) #retail-dashboard .dash-sticky-stage {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 10px 0 36px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    contain: none !important;
  }

  #experience .sec-head-xp,
  #retail-dashboard .sec-head-dash {
    margin-bottom: 4px !important;
    gap: 6px !important;
    position: relative;
    z-index: 2;
  }

  #experience .sec-head-xp h2,
  #experience .sec-head-xp h2 .zh-b,
  #retail-dashboard .sec-head-dash h2,
  #retail-dashboard .sec-head-dash h2 .zh-b {
    white-space: normal !important;
    font-size: clamp(20px, 5.6vw, 26px) !important;
    line-height: 1.25 !important;
  }

  #experience .xp-layout,
  #retail-dashboard .dash-layout {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  #experience .xp-phone-col,
  #retail-dashboard .dash-device-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative;
    z-index: 1;
  }

  #retail-dashboard .dash-device-col {
    max-width: min(100%, 420px);
  }

  #retail-dashboard .laptop-frame {
    max-width: min(calc(100% - 96px), 280px) !important;
  }

  #experience .xp-phone-frame,
  #experience .iphone-frame.xp-phone-frame,
  #retail-dashboard .laptop-frame {
    order: 2;
    flex: 0 1 auto;
    position: relative;
    overflow: hidden !important;
  }

  #experience .xp-step-nav,
  #retail-dashboard .xp-step-nav {
    display: contents !important;
    max-width: none !important;
    margin: 0 !important;
    width: auto !important;
  }

  #experience .xp-nav-btn,
  #retail-dashboard .xp-nav-btn {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 999px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: color-mix(in srgb, var(--paper, #f4f1e8) 92%, white);
    box-shadow: 0 1px 0 rgba(18, 22, 42, 0.06);
  }

  #experience .xp-nav-prev,
  #retail-dashboard .xp-nav-prev {
    order: 1;
  }

  #experience .xp-nav-next,
  #retail-dashboard .xp-nav-next {
    order: 3;
  }

  #experience .xp-nav-btn .en,
  #experience .xp-nav-btn .zh-b,
  #retail-dashboard .xp-nav-btn .en,
  #retail-dashboard .xp-nav-btn .zh-b {
    display: none !important;
  }

  #experience .xp-nav-prev::before,
  #retail-dashboard .xp-nav-prev::before {
    content: "‹";
  }

  #experience .xp-nav-next::before,
  #retail-dashboard .xp-nav-next::before {
    content: "›";
  }

  #experience .xp-phone-frame,
  #experience .iphone-frame.xp-phone-frame {
    max-width: min(210px, 52vw) !important;
  }

  /* Keep placeholder badge from spilling onto the step chip */
  #experience .xp-ph-badge,
  #retail-dashboard .xp-ph-badge {
    display: none !important;
  }

  #experience .xp-copy,
  #retail-dashboard .xp-copy {
    order: 2;
    padding-top: 4px;
    min-width: 0;
  }

  #experience .xp-step-status,
  #retail-dashboard .xp-step-status {
    margin: 0 0 12px !important;
    font-size: 12.5px !important;
    padding: 7px 12px !important;
    max-width: 100%;
  }

  #experience .xp-beats,
  #retail-dashboard .xp-beats,
  #retail-dashboard .dash-beats {
    min-height: 120px !important;
    margin-bottom: 4px;
  }

  #experience .xp-beat h3,
  #retail-dashboard .xp-beat h3 {
    font-size: clamp(22px, 6vw, 28px) !important;
    margin-bottom: 8px !important;
  }

  #experience .xp-beat-desc,
  #retail-dashboard .xp-beat-desc {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
    max-width: none !important;
  }

  #experience .xp-beat-kicker,
  #retail-dashboard .xp-beat-kicker {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  #experience .xp-progress,
  #retail-dashboard .xp-progress {
    margin-top: 20px !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    justify-content: flex-start;
    gap: 12px !important;
  }

  #experience .xp-highlight,
  #retail-dashboard .xp-highlight {
    margin-top: 4px;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html {
    scroll-snap-type: none;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  html.xp-static #experience .xp-sticky-root,
  html.dash-static #retail-dashboard .xp-sticky-root {
    min-height: 0;
  }
}

/* Phone: #experience fits one screen. Desktop and retail dashboard stay as-is. */
@media (max-width: 900px) {
  #experience {
    --xp-fit-nav: 64px;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    scroll-margin-top: var(--xp-fit-nav);
    display: flex !important;
    flex-direction: column !important;
  }

  #experience .xp-sticky-root {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #experience .xp-sticky-stage {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    /* ★ 90px = 70px 導航列 + 20px 呼吸空間，避開頂部 nav */
    padding: 90px 0 84px !important;
    gap: 4px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
  }

  /* Ensure phone scroll controls are visible and not blocked by FAB */
  #experience .phone-scroll-controls {
    position: relative;
    z-index: 10;
    margin-bottom: 20px !important;
  }

  #experience .xp-sticky-stage > .container:first-child {
    flex: 0 0 auto !important;
  }

  #experience .sec-head-xp {
    margin-bottom: 0 !important;
    gap: 2px !important;
  }

  #experience .sec-head-xp .kicker {
    font-size: 11px !important;
  }

  #experience .sec-head-xp h2,
  #experience .sec-head-xp h2 .zh-b {
    font-size: clamp(16px, 4.4vw, 20px) !important;
    line-height: 1.15 !important;
  }

  #experience .xp-layout {
    /* ★ fixed 浮層已脫離文檔流，xp-layout 改回 block
       讓 .phone-scroll-container（300vh）自然撐滿整個區塊高度 */
    flex: 0 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 0 !important;
    overflow: visible !important;
    display: block !important;
    position: relative !important;
  }

  #experience .xp-phone-col {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
  }

  #experience .phone-scroll-container {
    /* 行動端保留 300vh 滾動跑道（給 4 個畫面切換的距離） */
    height: 300vh !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* phone 自己 sticky 在跑道內：手機固定在 viewport，滾動期間持續可見
     ★ 使用 dvh 動態視口單位，適配 iPhone/Android 地址列展開/收起
     上下各留空間給 .xp-copy 與 .xp-highlight 浮動卡片 */
  #experience .phone-scroll-sticky {
    position: sticky !important;
    top: calc(70px + 16dvh + 10px) !important;                                      /* nav + copy(16dvh) + 10px 間距 */
    height: auto !important;                                                         /* 動態高度 */
    max-height: calc(100dvh - 70px - 16dvh - 10px - 100px) !important;               /* 100dvh - 各區間距 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* ★ v3.6：移除 min-height 限制，改用 margin-top:auto 強迫 iPhone 整組
       內容下沉至 sticky 容器底部，徹底消除 iPhone 下方的空白帶 */
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* ★ v3.6：把整個 iPhone 群組（frame + 進度條 + 分頁圓點）
     用 margin-top:auto 強推到底，與底部重點卡貼合 */
  #experience .phone-scroll-sticky > .iphone-frame,
  #experience .phone-scroll-sticky > .xp-phone-frame,
  #experience .phone-scroll-sticky > .phone-scroll-stage,
  #experience .phone-scroll-sticky > .phone-screen-track,
  #experience .phone-scroll-sticky > .phone-progress,
  #experience .phone-scroll-sticky > .phone-scroll-pager {
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }

  /* ★ v3.6：iPhone + 進度圓點整體底部呼吸空間（避開 FAB / 重點卡）
     ★ v3.7：從 110px → 72px，iPhone 整體上移約 40px */
  #experience .phone-scroll-sticky {
    padding-bottom: clamp(72px, 9dvh, 88px) !important;
  }

  #experience .xp-phone-frame,
  #experience .iphone-frame.xp-phone-frame {
    /* ★ 核心修正：使用 min() 將寬度限制在 max-width 與 max-height 換算的寬度之間 */
    /* 這樣當高度受限時，寬度會自動縮小，嚴格保持 9:19 比例不變形 */
    width: min(160px, 40vw, calc(55dvh * 9 / 19)) !important;
    height: auto !important;
    aspect-ratio: 9 / 19 !important;
    max-height: none !important; /* 移除 max-height 避免衝突 */
    max-width: none !important;  /* 移除 max-width 避免衝突 */
    margin: 0 auto !important;
  }

  #experience .xp-copy {
    /* v3.2 已用 fixed 浮動卡片處理，此處留最小 reset */
    flex: 0 0 auto !important;
    padding-top: 0 !important;
  }

  /* ★ 由 v3.2 的 fixed 區塊接管字體設定，此處保留極簡 base */
  #experience .xp-step-status {
    margin: 0 0 4px !important;
    padding: 3px 10px !important;
  }

  #experience .xp-beats {
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  #experience .xp-beat.is-active {
    position: relative !important;
    inset: auto !important;
  }

  /* 由 v3.2 fixed 區塊接管字體大小 */
  #experience .xp-beat-kicker,
  #experience .xp-beat h3,
  #experience .xp-beat-desc {
    /* reset only — sizes handled by v3.2 fixed section */
  }

  #experience .xp-progress {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    gap: 8px !important;
  }

  #experience .xp-highlight {
    /* v3.2 已用 fixed 浮動卡片處理，此處留最小 reset */
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #experience .xp-highlight-label {
    flex: 0 0 auto;
    margin: 0 0 4px 0 !important;
    white-space: nowrap;
  }

  #experience .xp-highlight-text {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    line-height: 1.4 !important;
    min-width: 0;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* ============================================================
     v3.2 — 手機：Step 浮於手機上方、Key Point 浮於下方
     ============================================================
     改用 position: fixed 浮動卡片：
     - .xp-copy    固定在 top: 70px（導航列下方）
     - .xp-highlight 固定在 bottom: 0
     - .phone-scroll-sticky 在兩者之間留 200px 空間並垂直居中
     - 用 .xp-mobile-float-active class 控制顯隱
       （由 main.js 的 IntersectionObserver 加上 / 移除）。
     ============================================================ */

  #experience .xp-copy {
    /* ★ 固定在導航列下方，覆蓋整個寬度 */
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: rgba(244, 241, 232, 0.95) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    box-shadow: 0 4px 12px rgba(18, 22, 42, 0.08) !important;
    border-bottom: 1px solid rgba(18, 22, 42, 0.1) !important;
    margin: 0 !important;
    /* ★ v3.8：縮小容器內距 */
    padding: 5px 12px 6px !important;
    flex: 0 0 auto !important;
    /* ★ v3.8：縮小至 16dvh，內容同步緊湊 */
    max-height: 16dvh !important;
    overflow-y: auto !important;
    /* ★ 內部滾動不影響外層頁面 */
    overscroll-behavior: contain !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }

  /* 內部按鈕恢復可點 */
  #experience .xp-copy .xp-nav-btn {
    pointer-events: auto !important;
  }

  /* 浮層啟用時才顯示 */
  html:not(.xp-mobile-float-active) #experience .xp-copy {
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
  }

  /* ★ v3.8：全套緊湊化，配合 16dvh max-height */
  #experience .xp-copy .xp-step-status {
    font-size: 9px !important;
    padding: 2px 7px !important;
    margin: 0 0 3px !important;
    letter-spacing: .03em !important;
    line-height: 1.25 !important;
  }

  #experience .xp-copy .xp-beat-kicker {
    font-size: 10px !important;
    margin: 0 0 2px !important;
    letter-spacing: .04em !important;
    line-height: 1.25 !important;
  }

  #experience .xp-copy .xp-beat-kicker .bi {
    font-size: 10px !important;
    margin-right: 3px !important;
  }

  #experience .xp-copy .xp-beat h3 {
    font-size: clamp(12px, 3.2vw, 14px) !important;
    line-height: 1.2 !important;
    margin: 0 0 3px !important;
    letter-spacing: -.005em !important;
  }

  #experience .xp-copy .xp-beat-desc {
    font-size: 10px !important;
    line-height: 1.35 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    max-height: 4em;
  }

  #experience .xp-copy .xp-progress {
    margin: 4px 0 0 !important;
    gap: 5px !important;
    padding-bottom: 0 !important;
  }

  #experience .xp-copy .xp-dot,
  #experience .xp-copy .dash-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
  }

  #experience .xp-copy .xp-dot.is-active,
  #experience .xp-copy .dash-dot.is-active {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
  }

  #experience .xp-copy .xp-beats {
    max-height: none !important;
    overflow: visible !important;
  }

  /* ============================================================
     .xp-highlight 浮動卡片：固定於底部
     ============================================================ */
  #experience .xp-highlight {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: rgba(244, 241, 232, 0.95) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    box-shadow: 0 -4px 12px rgba(18, 22, 42, 0.08) !important;
    border-top: 1px solid rgba(18, 22, 42, 0.1) !important;
    margin: 0 !important;
    /* ★ v3.7：略壓縮 padding，保持與上方 iPhone 的平衡 */
    padding: 3px 12px 5px !important;
    flex: 0 0 auto !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }

  /* 浮層未啟用時隱藏 */
  html:not(.xp-mobile-float-active) #experience .xp-highlight {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
  }

  /* highlight 內部字級微調 */
  #experience .xp-highlight .xp-highlight-label {
    font-size: 11px !important;
    margin: 0 0 2px 0 !important;
  }

  #experience .xp-highlight .xp-highlight-text {
    font-size: clamp(11px, 3.2vw, 13px) !important;
    line-height: 1.35 !important;
  }
}

/* ============================================================
   v3.8 — 防禦性樣式：極窄螢幕（≤ 380px）
   ============================================================
   iPhone SE (375px)、Galaxy A55 (360px) 等小螢幕下，
   xp-copy 同步緊湊化，iPhone sticky top 隨之調高。 */
@media (max-width: 380px) {
  #experience .xp-copy {
    /* ★ v3.8：從 22dvh 縮小至 18dvh */
    max-height: 18dvh !important;
    padding: 4px 10px 5px !important;
  }
  #experience .phone-scroll-sticky {
    /* ★ v3.8：xp-copy 從 22dvh → 18dvh，top 可從 16dvh → 12dvh */
    top: calc(70px + 12dvh + 8px) !important;
    max-height: calc(100dvh - 70px - 12dvh - 8px - 80px) !important;
    padding-bottom: clamp(64px, 8dvh, 80px) !important;
  }

  /* ★ v3.6：極窄螢幕下 iPhone 群組同樣推底 */
  #experience .phone-scroll-sticky > .iphone-frame,
  #experience .phone-scroll-sticky > .xp-phone-frame,
  #experience .phone-scroll-sticky > .phone-scroll-stage,
  #experience .phone-scroll-sticky > .phone-screen-track,
  #experience .phone-scroll-sticky > .phone-progress,
  #experience .phone-scroll-sticky > .phone-scroll-pager {
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
  #experience .xp-phone-frame,
  #experience .iphone-frame.xp-phone-frame {
    /* ★ 核心修正：使用 min() 將寬度限制在 max-width 與 max-height 換算的寬度之間 */
    /* 這樣當高度受限時，寬度會自動縮小，嚴格保持 9:19 比例不變形 */
    width: min(130px, 34vw, calc(50dvh * 9 / 19)) !important;
    max-width: none !important;
  }
  /* ★ v3.8：極窄螢幕字體同步 */
  #experience .xp-copy .xp-beat h3 {
    font-size: 12px !important;
  }
  #experience .xp-copy .xp-beat-desc {
    font-size: 9.5px !important;
    max-height: 3.8em !important;
  }
}

/* ============================================================
   v3.7 — 最終防禦：覆蓋 styles-main.css 中 .phone-scroll-sticky 的
   legacy 規則（max-width:560 / 768 / 900），確保 flex-start + margin-top:auto
   在所有行動端斷點生效。
   ============================================================ */
@media (max-width: 900px) {
  #experience .phone-scroll-sticky {
    justify-content: flex-start !important;
    padding-bottom: clamp(72px, 9dvh, 88px) !important;
    padding-top: 0 !important;
  }

  #experience .phone-scroll-sticky > .iphone-frame,
  #experience .phone-scroll-sticky > .xp-phone-frame,
  #experience .phone-scroll-sticky > .phone-scroll-stage,
  #experience .phone-scroll-sticky > .phone-screen-track,
  #experience .phone-scroll-sticky > .phone-progress,
  #experience .phone-scroll-sticky > .phone-scroll-pager {
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
}

/* ============================================================
   v3.9 — 手機版：iPhone 與下方「可選：…YouTube」段落之間
   預留足夠的釋放緩衝，避免 sticky 手機的 box-shadow + 邊框
   與 demo-quiet 文字視覺重疊（iPhone SE 375×667 尤為明顯）。
   ============================================================ */
@media (max-width: 900px) {
  #experience .xp-demo-quiet {
    margin-top: 56px !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
    position: relative;
    z-index: 10;
    text-align: center;
  }

  /* 極窄螢幕需要更多緩衝（iPhone SE 375px 以下） */
  @media (max-width: 380px) {
    #experience .xp-demo-quiet {
      margin-top: 64px !important;
    }
  }
}

/* ============================================================
   v4.0 — 與 styles-main.css 對齊：反 S 曲線過渡
   防禦性規則，確保即使載入順序變動，
   手機版 .phone-screen-track 仍套用新的 0.5s 曲線，
   不會退回舊版瞬間跳過的行為。
   ============================================================ */
@media (max-width: 900px) {
  #xpScreenTrack,
  #dashScreenTrack,
  .xp-screen-track,
  .dash-screen-track {
    transition: transform .5s cubic-bezier(.87, 0, .13, 1) !important;
  }
}