:root {
    --color-primary: #234A91;
    --color-primary-dark: #1E355E;
    --color-cta: #3167D5;
    --color-cta-hover: #2857BC;
    --color-text: #333333;
    --color-muted: #67727b;
    --color-line: #dfe4e7;
    --color-surface: #ffffff;
    --color-soft: #f4f6f7;
    --font-family-base: "Inter", "Segoe UI", Arial, sans-serif;
    --shadow: 0 18px 45px rgba(35, 74, 145, 0.10);
    --radius-large: 24px;
    --radius-medium: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-soft); }
body { margin: 0; color: var(--color-text); background: var(--color-soft); font-family: var(--font-family-base); line-height: 1.6; -webkit-tap-highlight-color: rgba(35, 74, 145, .18); }
img { display: block; width: 100%; max-width: 100%; }

.article-hero img.b2b-real-guide-image,
.article-page > header img.b2b-real-guide-image,
.article-page .quick-reference > img.b2b-real-guide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #e7ecef;
}

/* Retire former multi-panel inventory collages across older article templates.
   Their original source files have been removed; render only single-scene
   photography wherever an older page still contains one of these paths. */
img[src$="inventory-left.png"] { content: url("../../images/home/real-used-iphone/warehouse-bins.png"); }
img[src$="inventory-right.png"] { content: url("../../images/home/real-used-iphone/technician-check.png"); }

/* Shared documentary photography for the matching information blocks on every
   iPhone collection page.  These selectors preserve each page's responsive
   frame while keeping the visual language consistent from the 17 Series to X. */
.collection-oem .collection-duo > img { content: url("../../images/product-detail/shared/oem-inventory-cartons.png"); object-position: center 48%; }
.collection-applications .collection-heading > img { width:440px !important; height:250px !important; content: url("../../images/product-collection/shared/collection-applications-showroom.png"); object-fit:cover; object-position: 76% 54%; }
.collection-checklist .collection-heading > img { content: url("../../images/product-collection/shared/collection-checklist-basket.jpg"); object-position: center 51%; }
.collection-quality .collection-duo > img { content: url("../../images/product-collection/shared/collection-quality-wrapped.jpg"); object-position: center 54%; }
.collection-evidence .collection-duo > img { content: url("../../images/product-collection/shared/collection-evidence-handset.jpg"); object-position: center 52%; }
.collection-faq .faq-image > img { content: url("../../images/product-collection/shared/collection-faq-stock.jpg"); object-position: center 56%; }
.collection-types .collection-heading > img { content: url("../../images/product-collection/collection-model-color-selection.png"); object-position: center 60%; }
.collection-problems .collection-heading > img, .collection-problems .collection-series-landscape > img { content: url("../../images/product-collection/shared/collection-problems-inventory.png") !important; object-position: center 56%; }
.collection-support .support-board > img { content: url("../../images/product-collection/shared/collection-support-highres.png"); object-position: center 54%; }
.collection-inquiry__backdrop { content: url("../../images/product-collection/shared/collection-inquiry-discussion.png"); object-position: center 49%; }

/* Shared on-site inventory photography for the repeated information modules on
   every current product-detail page. The images stay documentary and the
   individual module layouts retain their existing responsive frames. */
.risk-section .image-heading > img { content: url("../../images/product-detail/shared/risk-sourcing-questions.png"); object-position: center 48%; }
.risk-reduction .split-layout > img { content: url("../../images/product-detail/shared/commercial-preparation-device.png"); object-position: center 48%; }
.oem-section .split-layout > img { object-position: center 44%; }
.process-intro > img { content: url("../../images/product-detail/shared/customization-inventory-room.png"); object-position: center 44%; }
.quality-section .split-layout > img { content: url("../../images/product-detail/shared/quality-control-device.png"); object-position: center 44%; }
.use-cases .image-heading > img { content: url("../../images/article/real-large-inventory-room.jpg"); object-position: center 54%; }
.chooser .split-layout > img { content: url("../../images/product-detail/shared/purchasing-checklist-device.png"); object-position: center 50%; }
.buyer-section .split-layout > img { content: url("../../images/product-detail/shared/business-discussion.png"); object-position: center 48%; }
main#main-content > .tws-hero ~ .faq-section .faq-image > img,
.faq-section > .container > img { object-position: center 53%; }
.faq-section .image-heading > img { object-position: center 53%; }
.final-inquiry > img { content: url("../../images/product-detail/shared/project-inquiry-discussion.png"); object-position: center 50%; }
.final-inquiry .split-layout > img { content: url("../../images/product-detail/shared/project-inquiry-discussion.png"); object-position: center 50%; }

a { color: inherit; text-decoration: none; transition: color .25s ease, opacity .25s ease; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(3rem, 6vw, 5.8rem); }
h2 { font-size: clamp(2.25rem, 4vw, 3.75rem); }
h3 { font-size: 1.35rem; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 112px 0; }
.section--soft { background: var(--color-soft); }
.section--dark { color: #ffffff; background: var(--color-text); }
.eyebrow { margin-bottom: 12px; color: var(--color-primary); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow--light { color: #d7e6ed; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 24px; border: 1px solid var(--color-cta); border-radius: 999px; color: #ffffff; background: var(--color-cta); font-size: .85rem; font-weight: 800; letter-spacing: .03em; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.button:hover { background: var(--color-cta-hover); box-shadow: 0 10px 24px rgba(49, 103, 213, .28); transform: translateY(-2px); }
.button--light { border-color: #ffffff; color: var(--color-primary); background: #ffffff; }
.button--light:hover { color: #ffffff; background: transparent; }
.quote-trigger, .button--light.quote-trigger { position: relative; overflow: hidden; border: 0; color: #ffffff; background: linear-gradient(120deg, #2f63d2 0%, var(--color-cta) 52%, #4a7bea 100%); box-shadow: 0 10px 24px rgba(35, 74, 145, .24), inset 0 1px 0 rgba(255, 255, 255, .24); isolation: isolate; }
.quote-trigger::before { position: absolute; inset: 0 auto 0 -130%; width: 64%; content: ''; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent); transform: skewX(-22deg); transition: left .55s ease; z-index: -1; }
.quote-trigger:hover { background: linear-gradient(120deg, #234a91 0%, #3167d5 58%, #5a89ef 100%); box-shadow: 0 14px 30px rgba(35, 74, 145, .34); transform: translateY(-3px); }
.quote-trigger:hover::before { left: 150%; }
.quote-trigger:focus-visible { outline: 3px solid rgba(35, 74, 145, .32); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .quote-trigger, .quote-trigger::before { transition: none; } }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; color: var(--color-primary); background: transparent; font-weight: 800; line-height: 1.45; text-align: left; text-decoration: none; appearance: none; -webkit-appearance: none; transition: color .25s ease; }
.text-link span { display: inline-block; transition: transform .25s ease; }
.text-link:hover { color: var(--color-primary-dark); }
.text-link:hover span { transform: translateX(4px); }
.site-header a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(35, 74, 145, .48); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 100; left: 16px; top: -100px; padding: 12px 16px; color: #fff; background: var(--color-primary); }
.skip-link:focus { top: 16px; }
.section-reveal { opacity: 1; transform: none; }
.section-reveal.is-visible { opacity: 1; transform: translateY(0); }
.model-accurate-image { object-fit: contain !important; object-position: center; background: #ffffff; }
/* Preserve complete handset renders when editorial figures use square source art. */
.article-page img[data-fit="contain"] { object-fit: contain !important; object-position: center !important; background: #f6f8fb; }
/* Quick-reference cards sit on a dark blue surface. Keep table content readable
   even when a page-specific article-table rule sets the default body ink. */
.quick-reference .article-table { overflow-x: auto; }
.quick-reference .article-table table { min-width: 0; color: #fff; }
.quick-reference .article-table th,
.quick-reference .article-table td { border-color: rgba(255,255,255,.52); }
.quick-reference .article-table thead { background: rgba(7,34,91,.28); }
.quick-reference .article-table thead th,
.quick-reference .article-table tbody th { color: #fff; }
.quick-reference .article-table tbody td { color: #dbeaff; }
/* Hero reference cards are information panels, not image galleries. Keeping
   their table full-width prevents three-column checks from collapsing into
   unreadable word-by-word stacks. */
.article-hero .quick-reference { grid-template-columns: minmax(0, 1fr); }
.article-hero .quick-reference > img { display: none; }
.article-hero .quick-reference > div { padding: clamp(24px, 3vw, 34px); }
.article-hero .quick-reference h2 { color: #fff; font-size: clamp(1.55rem, 2.1vw, 2.2rem); line-height: 1.12; }
.article-hero .quick-reference .article-table table { min-width: 520px; }
@media (max-width: 620px) { .article-hero .quick-reference .article-table table { min-width: 480px; } }
/* Keep long summary headlines in the same compact editorial rhythm as the
   updated article templates, rather than letting them dominate the whole card. */
.article-summary h2 { font-size: clamp(2rem, 3vw, 3.35rem); line-height: 1.08; }
.model-specification-image { padding: 20px; object-fit: cover !important; object-position: 38% 38%; background: var(--color-soft); box-shadow: inset 0 0 0 1px rgba(35,74,145,.08); }
.model-specification-image--side { padding: 20px; object-fit: contain !important; object-position: center !important; background: var(--color-soft); }
/* Product-definition panels must show the full handset, including light edges
   and camera bumps.  Page-specific templates previously applied a card crop
   and could cut off the iPhone Air / Pro Max artwork. */
.explain-section .split-layout > img.model-definition-image {
    display: block;
    width: 100%;
    height: clamp(340px, 39vw, 570px) !important;
    padding: clamp(36px, 4vw, 64px) !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #edf3f8 !important;
    border: 1px solid rgba(35, 74, 145, .10);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}

/* OEM images originate from a real packaging photograph.  Defining the
   dimensions here prevents a missing legacy source from collapsing this
   repeated module on newer product-detail templates. */
.oem-section .split-layout > img {
    display: block;
    width: 100%;
    height: clamp(280px, 34vw, 480px) !important;
    min-height: 0;
    object-fit: cover !important;
    object-position: center 52% !important;
    border-radius: var(--radius-large);
    background: #e8edf0;
    box-shadow: var(--shadow);
}

/* Some current templates place the FAQ image directly below the heading.
   Keep that documentary image wide and compact instead of letting its source
   aspect ratio become an oversized visual block. */
.faq-section > .container > img {
    display: block;
    width: min(100%, 820px) !important;
    height: clamp(250px, 27vw, 380px) !important;
    margin: 28px auto 42px !important;
    object-fit: cover !important;
    object-position: center 53% !important;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}
.faq-section .image-heading > img {
    height: clamp(220px, 21vw, 310px) !important;
    object-fit: cover !important;
    object-position: center 53% !important;
}

/* Use-case cards mix portrait warehouse shots and a landscape storefront.
   Fix their media frame so all four columns align regardless of source ratio. */
.use-cases .six-grid.four-grid > a > article > img {
    display: block;
    width: 100%;
    height: 245px !important;
    object-fit: cover !important;
    object-position: center !important;
}
.comparison-section .series-comparison-image { padding: 12px !important; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -10px 24px rgba(0,0,0,.22); object-fit: contain !important; object-position: center; background: linear-gradient(145deg, #505050 0%, #424242 48%, #383838 100%) !important; }
.collection-specs .collection-duo > img.series-specification-image {
    padding: 14px;
    object-fit: contain !important;
    object-position: center !important;
    background: #f5f7f9;
    border: 1px solid #e1e7eb;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 0 -1px 0 rgba(210,220,227,.7),
        0 18px 38px rgba(16,37,69,.13);
    mix-blend-mode: normal;
}
.collection-types .collection-heading > img.series-planning-image {
    content: normal !important;
    width: 440px !important;
    height: 250px !important;
    padding: 12px;
    object-fit: contain !important;
    object-position: center !important;
    background: #f5f7f9;
    border: 1px solid #e1e7eb;
    border-radius: var(--radius-medium);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 0 -1px 0 rgba(210,220,227,.7),
        0 14px 28px rgba(16,37,69,.11);
}
.collection-types .collection-heading > img.real-planning-image {
    width:440px !important;
    height:250px !important;
    padding:0;
    object-fit:cover !important;
    object-position:center 50% !important;
    border:1px solid #e1e7eb;
    border-radius:var(--radius-medium);
    box-shadow:0 14px 28px rgba(16,37,69,.11);
}
@media (max-width: 600px) {
    .collection-types .collection-heading > img.series-planning-image,
    .collection-types .collection-heading > img.real-planning-image { width: 100% !important; height: auto !important; aspect-ratio: 1.76; }
}
.collection-compare .compare-title > img.series-comparison-image { padding: 0 !important; object-fit: contain !important; object-position: center !important; background: #ffffff !important; box-shadow: 0 18px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.product-gallery__main img.gallery-image--front-rear { object-fit: contain !important; object-position: center !important; }
.product-gallery__main img.gallery-image--display { object-fit: cover !important; object-position: 78% 52% !important; }
.product-gallery__main img.gallery-image--camera,
.product-gallery__main img.gallery-image--side,
.product-gallery__thumbs img.gallery-image--side,
.product-gallery__thumbs img.gallery-image--front-rear,
.product-gallery__thumbs img.gallery-image--display,
.product-gallery__thumbs img.gallery-image--camera {
    object-fit: contain !important;
    object-position: center !important;
}
.series-accurate-image { object-fit: cover; object-position: center; }
.collection-models .model-accurate-image,
.collection-types .model-accurate-image,
.model-tile .model-accurate-image,
.type-strip .model-accurate-image { background: transparent; }

/* Product renders keep their full silhouette and original finish on the same soft ground as the page. */
.product-gallery__main,
.product-gallery__thumbs button,
.range-card > img,
.model-tile:not(.model-tile--feature) > img,
.type-strip article > img { background: var(--color-soft) !important; }
.product-gallery__main img,
.product-gallery__thumbs img,
.range-card > img,
.model-tile:not(.model-tile--feature) > img,
.type-strip article > img {
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
    mix-blend-mode: normal;
}

/* Use the relevant coloured product render wherever a model card points to that detail page. */
a:is(.model-tile,.range-card)[href*="/iphone-17-pro-max"] > img { content: url('../../images/product-detail/iphone-17-pro-max-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-17-pro"] > img { content: url('../../images/product-detail/iphone-17-pro-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-17/"] > img { content: url('../../images/product-detail/iphone-17-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-16e"] > img { content: url('../../images/product-detail/iphone-16e-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-16-pro-max"] > img { content: url('../../images/product-detail/iphone-16-pro-max-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-16-pro"] > img { content: url('../../images/product-detail/iphone-16-pro-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-16-plus"] > img { content: url('../../images/product-detail/iphone-16-plus-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-16/"] > img { content: url('../../images/product-detail/iphone-16-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-15-pro-max"] > img { content: url('../../images/product-detail/iphone-15-pro-max-main-new.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-15-pro"] > img { content: url('../../images/product-detail/iphone-15-pro-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-15-plus"] > img { content: url('../../images/product-detail/iphone-15-plus-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-15/"] > img { content: url('../../images/product-detail/iphone-15-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-14-pro-max"] > img { content: url('../../images/product-detail/iphone-14-pro-max-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-14-pro"] > img { content: url('../../images/product-detail/iphone-14-pro-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-14-plus"] > img { content: url('../../images/product-detail/iphone-14-plus-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-14/"] > img { content: url('../../images/product-detail/iphone-14-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-13-pro-max"] > img { content: url('../../images/product-detail/iphone-13-pro-max-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-13-pro"] > img { content: url('../../images/product-detail/iphone-13-pro-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-13-mini"] > img { content: url('../../images/product-detail/iphone-13-mini-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-13/"] > img { content: url('../../images/product-detail/iphone-13-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-12-pro-max"] > img { content: url('../../images/product-detail/iphone-12-pro-max-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-12-pro"] > img { content: url('../../images/product-detail/iphone-12-pro-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-12-mini"] > img { content: url('../../images/product-detail/iphone-12-mini-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-12/"] > img { content: url('../../images/product-detail/iphone-12-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-11-pro-max"] > img { content: url('../../images/product-detail/iphone-11-pro-max-gold-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-11-pro"] > img { content: url('../../images/product-detail/iphone-11-pro-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-11/"] > img { content: url('../../images/product-detail/iphone-11-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-xs-max"] > img { content: url('../../images/product-detail/iphone-xs-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-xs/"] > img { content: url('../../images/product-detail/iphone-xs-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-xr"] > img { content: url('../../images/product-detail/iphone-xr-red-main.png'); }
a:is(.model-tile,.range-card)[href*="/iphone-x/"] > img { content: url('../../images/product-detail/iphone-x-main.png'); }
html.js #main-content > :not(nav) { opacity:1; transform:none; }
html.js #main-content > :not(nav).is-visible { opacity:1; transform:translateY(0); }
/* Article templates may contain a complete article as the top-level main child.
   Keep that content visible even when the global reveal observer is unavailable. */
html.js #main-content > .article-page { opacity:1; transform:none; }
dialog { border: 0; overscroll-behavior: contain; }
dialog::backdrop { background: rgba(23, 31, 36, .72); backdrop-filter: blur(4px); }
@media (max-width: 760px) { .container { width: min(100% - 32px, 1180px); } .section { padding: 78px 0; } .collection-applications .collection-heading > img { width:100% !important; height:230px !important; } .use-cases .six-grid.four-grid > a > article > img { height:220px !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js #main-content > :not(nav) { opacity:1; transform:none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }