/* ⭐ The support portal's own iPhone design (2026-10-10). Written into a page by
   server/phone_next.js ONLY with the preview key (or once PHONE_NEXT=1 launches it), and it acts
   only at 760px and under: the desktop layout is untouched. html.pp-next scopes every rule so it
   outranks the pages' own <style> without !important where it can.
   Shape: compact top bar (logo) · large left title · iOS grouped lists in place of the stacked
   desktop cards · bottom tab bar (Support, Track, Tickets, Request, More) · 44px taps · safe areas.
   Light only, like the rest of the portal (portal.css: DJI palette, light-only). */
.pp-tabs, .pp-sheet, .pp-scrim, .pp-mini { display: none; }

@media (max-width: 760px) {
  html.pp-next { background: #F2F2F7; -webkit-text-size-adjust: 100%; }
  html.pp-next body { background: #F2F2F7; padding-bottom: calc(66px + env(safe-area-inset-bottom)); overflow-x: hidden; }

  /* ── top bar: the logo, and the page name once the large title scrolls away ── */
  html.pp-next .topstack { position: sticky; top: 0; z-index: 60; }
  html.pp-next .bar { background: rgba(242,242,247,.86); border-bottom: .5px solid rgba(0,0,0,.12);
    padding-top: env(safe-area-inset-top); }
  html.pp-next .bar-in { padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); min-height: 48px; }
  html.pp-next .bar-nav, html.pp-next .subbar, html.pp-next .brand-sub { display: none !important; }
  html.pp-next .brand { min-height: 44px; min-width: 44px; padding: 0 4px; }
  html.pp-next .brand img { height: 20px; }
  html.pp-next .pp-mini { display: block; flex: 1; text-align: center; font: 600 16px/1.2 -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1D1D1F; opacity: 0; transition: opacity .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 52px; }
  html.pp-next.pp-scrolled .pp-mini { opacity: 1; }
  html.pp-next footer.pvs-apple-footer { display: none !important; }   /* the store footer: its links are in More */

  /* ── large titles, left aligned, iOS sizes ── */
  html.pp-next h1 { text-align: left !important; }
  html.pp-next .hero { background: none !important; min-height: 0 !important; height: auto !important; padding: 0 !important; aspect-ratio: auto !important; }
  html.pp-next .hero-img, html.pp-next .hero picture { display: none !important; }
  html.pp-next .hero-in { display: block !important; padding: 14px 16px 6px !important; height: auto !important; min-height: 0 !important; text-align: left !important; }
  html.pp-next .hero-copy { max-width: none !important; }
  html.pp-next .hero h1, html.pp-next .hero-in h1 { font-size: 34px !important; line-height: 1.12 !important; font-weight: 700 !important;
    letter-spacing: -.02em; color: #1D1D1F !important; margin: 0 0 4px !important; text-shadow: none !important; }
  html.pp-next .hero p, html.pp-next .hero .sub { color: #6E6E73 !important; font-size: 15px !important; margin: 0 0 12px !important; text-align: left !important; text-shadow: none !important; }
  html.pp-next h2.dji { font-size: 22px; font-weight: 700; text-align: left; margin: 30px 4px 4px; line-height: 1.2; }
  html.pp-next .dji-sub, html.pp-next .sec-lead { font-size: 15px; text-align: left; margin: 2px 4px 0; color: #6E6E73; }
  html.pp-next .dji-gap { height: 10px; }
  html.pp-next .sec { padding: 0 16px; }
  html.pp-next .sec-more { text-align: left; margin: 10px 4px 0; }
  html.pp-next .sec-more a, html.pp-next .dji-viewall { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }

  /* the other pages' photo heroes (service plans, warranty) become the same plain large title */
  html.pp-next :is(.phero, .st-page .st-hero) { background: none !important; aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; }
  html.pp-next .st-page .st-hero::after, html.pp-next .st-page .st-hero::before { display: none !important; }
  html.pp-next :is(.phero, .st-hero) picture, html.pp-next :is(.phero-img, .st-hero-img) { display: none !important; }
  html.pp-next :is(.phero-in, .st-page .st-hero-in) { position: static !important; display: block !important; height: auto !important; padding: 14px 16px 6px !important; text-align: left !important; }
  html.pp-next :is(.phero-in > div, .st-hero-copy) { max-width: none !important; text-align: left !important; }
  html.pp-next :is(.phero h1, .st-page .st-hero-title) { font-size: 34px !important; line-height: 1.12 !important; font-weight: 700 !important; color: #1D1D1F !important; margin: 0 0 6px !important; }
  html.pp-next :is(.phero p, .st-page .st-hero-sub) { font-size: 15px !important; color: #6E6E73 !important; text-align: left !important; margin: 0 !important; max-width: none !important; }
  /* section headings and their lead lines: left, iOS sizes */
  html.pp-next :is(h2.sp, h2.dji, h3.dji-h3, h3.sp-sub, .st-page .st-section-heading) { font-size: 22px !important; font-weight: 700 !important; text-align: left !important; margin: 30px 4px 4px !important; line-height: 1.2 !important; }
  html.pp-next :is(h3.sp-sub, h3.dji-h3) { font-size: 19px !important; margin-top: 18px !important; }
  html.pp-next :is(.sp-lead, .sec-lead, .why, .st-lead) { text-align: left !important; margin-top: 2px !important; font-size: 15px !important; margin-left: 4px !important; margin-right: 4px !important; }
  html.pp-next :is(.icard, .scard) { text-align: left !important; min-height: 0 !important; padding: 18px 16px !important; border-radius: 14px !important; background: #fff !important; }
  /* ── search: the iOS search field ── */
  html.pp-next .search-row { background: rgba(118,118,128,.12); border-radius: 12px; overflow: hidden; }
  html.pp-next .search input { height: 44px !important; border: 0 !important; background: transparent !important; font-size: 17px !important; border-radius: 0 !important; padding-left: 40px !important; }
  html.pp-next .search-row svg.mag { left: 12px; color: #8E8E93; }
  html.pp-next .search-btn { height: 44px !important; border-radius: 0 !important; background: transparent !important; color: #0070D5 !important; font-weight: 600; }
  html.pp-next .search .clr { right: 80px; width: 44px; height: 44px; }
  html.pp-next .hero-quick { justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px !important;
    margin: 12px -16px 0 !important; padding: 0 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html.pp-next .hero-quick::-webkit-scrollbar { display: none; }
  html.pp-next .hero-quick a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px;
    background: #fff; color: #1D1D1F !important; font-size: 15px !important; font-weight: 500; text-shadow: none !important; box-shadow: 0 .5px 0 rgba(0,0,0,.06); }

  /* ── the desktop card grids become iOS grouped lists: icon, title, one line, chevron ── */
  html.pp-next :is(.cards4, .cards3, .cards2, .contact) { display: block !important; background: #fff; border-radius: 14px; overflow: hidden; margin: 0; }
  html.pp-next .djicard { display: grid !important; grid-template-columns: 30px minmax(0,1fr) 14px; grid-template-areas: "ic t go" "ic d go";
    align-items: center; column-gap: 14px; text-align: left !important; padding: 12px 16px !important; min-height: 64px; margin: 0 !important;
    background: #fff !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; position: relative; height: auto !important; }
  html.pp-next .djicard:not(:has(.ic)) { grid-template-columns: minmax(0,1fr) 14px; grid-template-areas: "t go" "d go"; }
  html.pp-next .djicard + .djicard::before { content: ""; position: absolute; top: 0; right: 0; left: 60px; border-top: .5px solid rgba(60,60,67,.2); }
  html.pp-next .djicard:not(:has(.ic)) + .djicard::before, html.pp-next .djicard:not(:has(.ic))::before { left: 16px; }
  html.pp-next .djicard .ic { grid-area: ic; margin: 0 !important; color: #0070D5; align-self: center; }
  html.pp-next .djicard .ic svg { width: 28px; height: 28px; }
  html.pp-next .djicard b { grid-area: t; font-size: 17px !important; font-weight: 600; margin: 0 !important; line-height: 1.3; }
  html.pp-next .djicard > span:not(.ic) { grid-area: d; font-size: 14px !important; margin: 2px 0 0 !important; line-height: 1.35 !important; color: #6E6E73 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html.pp-next .djicard em { display: none !important; }
  html.pp-next .djicard::after { content: ""; grid-area: go; width: 8px; height: 8px; border: solid #C4C4C7; border-width: 2px 2px 0 0; transform: rotate(45deg); justify-self: end; }
  html.pp-next .djicard:active { background: #E5E5EA !important; }

  /* product support: filter chips that scroll, then a list with a small photo */
  html.pp-next .pills { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 4px; scrollbar-width: none; }
  html.pp-next .pills::-webkit-scrollbar { display: none; }
  html.pp-next .pill { flex: none; background: #fff; }
  html.pp-next .pill.is-on { background: #1D1D1F; }
  html.pp-next .cats { display: block !important; background: #fff; border-radius: 14px; overflow: hidden; margin-top: 12px; }
  html.pp-next .cat:not([hidden]) { display: flex !important; align-items: center; gap: 14px; padding: 10px 16px; background: #fff !important; min-height: 72px; position: relative; border-radius: 0 !important; }
  html.pp-next .cat + .cat::before { content: ""; position: absolute; top: 0; right: 0; left: 94px; border-top: .5px solid rgba(60,60,67,.2); }
  html.pp-next .cat img { width: 64px !important; height: 48px !important; border-radius: 8px; flex: none; }
  html.pp-next .cat .cb { padding: 0 !important; text-align: left !important; flex: 1; min-width: 0; }
  html.pp-next .cat .ct { font-size: 17px !important; margin: 0 !important; }
  html.pp-next .cat .cd { font-size: 14px !important; margin: 2px 0 0 !important; color: #6E6E73 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html.pp-next .cat .cl { display: none !important; }
  html.pp-next .cat::after { content: ""; width: 8px; height: 8px; border: solid #C4C4C7; border-width: 2px 2px 0 0; transform: rotate(45deg); flex: none; }

  /* newsroom rows */
  html.pp-next .newsbox { background: #fff; border-radius: 14px; padding: 0 16px; margin-top: 12px; }
  html.pp-next .newsrow { min-height: 52px; align-items: center; padding: 12px 0; }
  html.pp-next .newsrow .nt { font-size: 16px; }
  html.pp-next .newsrow .nd { font-size: 13px; }

  /* ── Track My Order + Check a ticket (the p-util template): grouped form card, full-width button ── */
  html.pp-next body.p-util .wrap { padding: 4px 16px 24px !important; }
  html.pp-next body.p-util .hero { padding: 0 !important; }
  html.pp-next body.p-util .card { background: #fff; border-radius: 14px; padding: 16px; }
  html.pp-next body.p-util input:not([type=checkbox]):not([type=radio]) { min-height: 48px; font-size: 17px; border-radius: 10px; }
  html.pp-next body.p-util button[type=submit], html.pp-next body.p-util .card button:not(.link):not([aria-label]), html.pp-next body.p-util .btn { min-height: 50px; width: 100%; border-radius: 12px; font-size: 17px; justify-content: center; }
  html.pp-next body.p-util a.back { min-height: 44px; display: inline-flex; align-items: center; }
  html.pp-next .ordhead h1.ordno { font-size: 30px; font-weight: 700; }

  /* generic: every control is a 44px target */
  html.pp-next :is(button, select, input[type=submit], input[type=button]) { min-height: 44px; }
  html.pp-next .wrap a.link, html.pp-next .note a { display: inline-flex; align-items: center; min-height: 44px; }

  /* service plans: the "See the Full Terms" style links are 44px rows */
  html.pp-next :is(.icard, .scard) a.more, html.pp-next a.more { display: inline-flex; align-items: center; min-height: 44px; }
  /* download centre: the product list is a grouped list with 44px rows */
  html.pp-next #filter { min-height: 44px; font-size: 17px; }
  html.pp-next summary { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; padding-top: 8px; padding-bottom: 8px; }
  html.pp-next .tree { background: #fff; border-radius: 14px; padding: 4px 0; }
  html.pp-next .tree > a, html.pp-next .tree .nav-sub a, html.pp-next .tree .nav-head { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; }
  html.pp-next body.p-util :is(.btn, button[type=submit]) { box-sizing: border-box; max-width: 100%; }

  /* ── the tab bar ── */
  html.pp-next .pp-tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(249,249,251,.9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: .5px solid rgba(0,0,0,.16); padding: 5px max(6px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right)); }
  html.pp-next .pp-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px;
    border: 0; background: none; padding: 0; color: #8E8E93; font: 500 10.5px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; text-decoration: none; cursor: pointer; }
  html.pp-next button.pp-tab { margin: 0; width: auto; height: auto; border-radius: 0; background: none; color: #8E8E93; box-shadow: none;
    font: 500 10.5px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0; }
  html.pp-next button.pp-tab.is-on { color: #0070D5; }
  html.pp-next .pp-tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html.pp-next .pp-tab.is-on { color: #0070D5; }

  /* ── More: a bottom sheet ── */
  html.pp-next .pp-scrim { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .2s; }
  html.pp-next .pp-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; background: #F2F2F7; border-radius: 14px 14px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .25s ease, visibility 0s .25s; visibility: hidden; max-height: 85vh; overflow-y: auto; }
  html.pp-next.pp-more .pp-scrim { opacity: 1; pointer-events: auto; }
  html.pp-next.pp-more .pp-sheet { transform: none; visibility: visible; transition: transform .25s ease; }
  html.pp-next .pp-grab { width: 36px; height: 5px; border-radius: 3px; background: #C7C7CC; margin: 0 auto 10px; }
  html.pp-next .pp-sheet h2 { margin: 0 4px 10px; font: 700 22px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; color: #1D1D1F; display: flex; align-items: center; }
  html.pp-next .pp-sheet h2 button#pp-more-x { margin: 0 0 0 auto; padding: 0 4px; width: auto; min-width: 44px; height: 44px; border-radius: 8px; background: none; color: #0070D5; font: 600 17px -apple-system, sans-serif; }
  html.pp-next .pp-sheet h2 button { margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: #0070D5; font: 600 17px -apple-system, sans-serif; }
  html.pp-next .pp-list { background: #fff; border-radius: 14px; overflow: hidden; margin: 0 0 14px; }
  html.pp-next .pp-list a { display: flex; align-items: center; min-height: 50px; padding: 0 16px; color: #1D1D1F; text-decoration: none; font-size: 17px; position: relative; }
  html.pp-next .pp-list a + a::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid rgba(60,60,67,.2); }
  html.pp-next .pp-list a::after { content: ""; margin-left: auto; width: 8px; height: 8px; border: solid #C4C4C7; border-width: 2px 2px 0 0; transform: rotate(45deg); }
  html.pp-next .pp-list a[target]::after { border: 0; transform: none; width: auto; height: auto; content: "\2197"; color: #C4C4C7; font-size: 15px; }
}