.iphone-18-page-document,
.iphone-18-page-document body {
    min-height: 100%;
    margin: 0;
    background: #000;
}

.iphone-18-page {
    --iphone-18-nav-aligned-gutter: max(16px, calc((100vw - 1180px) / 2 + 8px));
    --iphone-18-nav-content-width: 1164px;
    box-sizing: border-box;
    min-height: 100vh;
    overflow: hidden;
    padding: 56px 24px 64px;
    background: #000;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.iphone-18-hero,
.iphone-18-introduction {
    width: 100%;
    max-width: var(--iphone-18-nav-content-width);
    margin-right: auto;
    margin-left: auto;
}

.iphone-18-hero {
    margin: 80px auto 0;
}

.iphone-18-page *,
.iphone-18-page *::before,
.iphone-18-page *::after {
    box-sizing: border-box;
}

.iphone-18-page :where(h1, h2, h3, p, li, a, button, span) {
    font-weight: 400 !important;
}

.iphone-18-hero h1,
.iphone-18-introduction h2 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.6px !important;
}

.iphone-18-hero > p,
.iphone-18-copy p {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}

.iphone-18-hero > p {
    margin: 13px 0 0;
    line-height: 1.45;
}

.iphone-18-hero-image {
    display: block;
    width: min(400px, 78vw);
    height: auto;
    margin: 72px auto 0;
    object-fit: contain;
}

.iphone-18-introduction {
    max-width: 700px;
    margin-top: 80px;
}

.iphone-18-copy {
    margin-top: 18px;
}

.iphone-18-copy p {
    margin: 0 auto 18px;
    line-height: 1.7;
    text-wrap: pretty;
}

.iphone-18-copy p:last-child {
    margin-bottom: 0;
}

.iphone-18-pro-section {
    width: calc(100% + 48px);
    margin: 80px 0 0 -24px;
    padding: 80px var(--iphone-18-nav-aligned-gutter) 0;
    /* background: #0d3651; */
}

.iphone-18-pro-card {
    position: relative;
    width: 100%;
    max-width: var(--iphone-18-nav-content-width);
    aspect-ratio: 2374 / 1160;
    margin: 0 auto;
    overflow: hidden;
    border-radius: clamp(28px, 2.5vw, 50px);
    color: #0c3451;
    text-align: left;
    isolation: isolate;
}

.iphone-18-pro-background,
.iphone-18-pro-tint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.iphone-18-pro-background {
    z-index: -2;
    object-fit: cover;
}

.iphone-18-pro-tint {
    z-index: -1;
    /* background: rgba(98, 169, 222, 0.48); */
}

.iphone-18-pro-header {
    position: absolute;
    top: 11.5%;
    left: 50%;
    width: 44%;
    transform: translateX(-50%);
    text-align: center;
}

.iphone-18-pro-header h2 {
    margin: 0;
    color: #0c3451;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.6px !important;
}

.iphone-18-pro-header p,
.iphone-18-pro-content,
.iphone-18-pro-content p,
.iphone-18-pro-content li {
    color: #0c3451;
    font-size: 14px;
    font-weight: 400;
}

.iphone-18-pro-header p {
    margin: 7px 0 0;
    line-height: 1.4;
}

.iphone-18-pro-content {
    position: absolute;
    top: 31.5%;
    right: 7.5%;
    width: 36.5%;
    line-height: 1.7;
}

.iphone-18-pro-content p {
    margin: 0 0 24px;
    line-height: 1.7;
}

.iphone-18-pro-content ul {
    display: grid;
    gap: 6px;
    margin: -2px 0 0;
    padding: 0;
    list-style: none;
}

.iphone-18-pro-content li {
    position: relative;
    padding-left: 20px;
    line-height: 1.55;
}

.iphone-18-pro-content li::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 8px;
    height: 8px;
    border: 2px solid #087fe8;
    border-radius: 50%;
    content: '';
}

.iphone-18-pro-max-section {
    width: calc(100% + 48px);
    margin: 0 0 80px -24px;
    padding: 80px var(--iphone-18-nav-aligned-gutter) 0;
    background: #000;
}

.iphone-18-pro-max-card {
    position: relative;
    width: 100%;
    max-width: var(--iphone-18-nav-content-width);
    aspect-ratio: 2374 / 1160;
    margin: 0 auto;
    overflow: hidden;
    border-radius: clamp(28px, 2.5vw, 50px);
    background: #202020;
    color: #fff;
    text-align: left;
    isolation: isolate;
}

.iphone-18-pro-max-background {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iphone-18-pro-max-header {
    position: absolute;
    top: 11.5%;
    left: 50%;
    width: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.iphone-18-pro-max-header h2 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.6px !important;
}

.iphone-18-pro-max-header p,
.iphone-18-pro-max-content,
.iphone-18-pro-max-content p,
.iphone-18-pro-max-content li {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}

.iphone-18-pro-max-header p {
    margin: 7px 0 0;
    line-height: 1.4;
}

.iphone-18-pro-max-content {
    position: absolute;
    top: 33%;
    left: 11.5%;
    width: 31.5%;
    line-height: 1.7;
}

.iphone-18-pro-max-content p {
    margin: 0 0 24px;
    line-height: 1.7;
    text-wrap: pretty;
}

.iphone-18-pro-max-content ul {
    display: grid;
    gap: 6px;
    margin: -2px 0 0;
    padding: 0;
    list-style: none;
}

.iphone-18-pro-max-content li {
    position: relative;
    padding-left: 20px;
    line-height: 1.55;
}

.iphone-18-pro-max-content li::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 8px;
    height: 8px;
    border: 2px solid #087fe8;
    border-radius: 50%;
    content: '';
}

.iphone-18-ultra-section {
    width: calc(100% + 48px);
    margin: 0 0 0 -24px;
    padding: 80px var(--iphone-18-nav-aligned-gutter) 0;
    background: #000;
    color: #fff;
    text-align: center;
}

.iphone-18-ultra-header h2 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.6px !important;
}

.iphone-18-ultra-header p,
.iphone-18-ultra-content,
.iphone-18-ultra-content p,
.iphone-18-ultra-content li {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}

.iphone-18-ultra-header p {
    margin: 7px 0 0;
    line-height: 1.4;
}

.iphone-18-ultra-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 3vw, 58px);
    min-height: 460px;
    /* margin: 38px auto 0; */
}

.iphone-18-ultra-side-image {
    display: block;
    width: auto;
    height: 450px;
    object-fit: contain;
}

.iphone-18-ultra-main-image {
    display: block;
    width: 400px;
    height: auto;
    object-fit: contain;
}

.iphone-18-ultra-content {
    max-width: 820px;
    margin: 44px auto 0;
}

.iphone-18-ultra-content p {
    margin: 0 0 8px;
    line-height: 1.6;
}

.iphone-18-ultra-content ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 54px;
    max-width: 500px;
    margin: 24px auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.iphone-18-ultra-content li {
    position: relative;
    padding-left: 20px;
    line-height: 1.55;
}

.iphone-18-ultra-content li::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 8px;
    height: 8px;
    border: 2px solid #087fe8;
    border-radius: 50%;
    content: '';
}

.iphone-18-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.25vw, 34px);
    width: 100%;
    max-width: var(--iphone-18-nav-content-width);
    margin: 78px auto 0;
}

.iphone-18-feature-card {
    position: relative;
    aspect-ratio: 548 / 790;
    overflow: hidden;
    border: 1px solid #656565;
    border-radius: 26px;
    background: #060606;
    isolation: isolate;
}

.iphone-18-feature-card > img {
    display: block;
    width: 100%;
    height: 100%;
    background: #060606;
    object-fit: cover;
    mix-blend-mode: lighten;
}

.iphone-18-feature-card > header {
    position: absolute;
    top: 20px;
    right: 14px;
    left: 14px;
    z-index: 1;
    text-align: center;
}

.iphone-18-feature-card h3 {
    margin: 0;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.6px !important;
}

.iphone-18-feature-card p {
    margin: 7px 0 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.iphone-18-wholesale-section {
    position: relative;
    width: calc(100% + 48px);
    margin: 0 0 0px -24px;
    padding: 80px var(--iphone-18-nav-aligned-gutter) 0;
    background: #000;
    color: #fff;
    text-align: center;
}

.iphone-18-wholesale-header {
    max-width: var(--iphone-18-nav-content-width);
    margin: 0 auto;
}

.iphone-18-wholesale-header h2,
.iphone-18-preorder-content h2,
.iphone-18-priority-list h2 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.6px !important;
}

.iphone-18-wholesale-header > img {
    display: block;
    width: min(600px, 82vw);
    height: auto;
    margin: 30px auto 0;
}

.iphone-18-wholesale-header p,
.iphone-18-preorder-content p,
.iphone-18-preorder-content li {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}

.iphone-18-wholesale-header p {
    margin: 20px 0 0;
    line-height: 1.7;
}

.iphone-18-wholesale-header .iphone-18-wholesale-tagline {
    margin-top: 24px;
}

.iphone-18-preorder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 54px;
    max-width: var(--iphone-18-nav-content-width);
    margin: 94px auto 0;
    text-align: left;
}

.iphone-18-preorder-visual img {
    display: block;
    width: min(100%, 420px);
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.iphone-18-preorder-content p {
    max-width: 440px;
    margin: 18px 0 0;
    line-height: 1.7;
}

.iphone-18-preorder-content ul {
    display: grid;
    gap: 7px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.iphone-18-preorder-content li {
    position: relative;
    padding-left: 20px;
    line-height: 1.55;
}

.iphone-18-preorder-content li::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 8px;
    height: 8px;
    border: 2px solid #087fe8;
    border-radius: 50%;
    content: '';
}

.iphone-18-priority-list {
    max-width: 410px;
    margin: 76px auto 0;
}

.iphone-18-priority-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 320px);
    min-height: 50px;
    margin: 25px auto 0;
    border-radius: 12px;
    background: #087fe8;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 180ms ease, transform 180ms ease;
}

.iphone-18-priority-list a:hover,
.iphone-18-priority-list a:focus-visible {
    background: #2495f6;
    color: #fff;
    transform: translateY(-1px);
}

.iphone-18-motion-enabled [data-iphone-18-reveal] {
    opacity: 0;
    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--iphone-18-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.iphone-18-motion-enabled [data-iphone-18-reveal="up"] {
    transform: translate3d(0, 34px, 0);
}

.iphone-18-motion-enabled [data-iphone-18-reveal="left"] {
    transform: translate3d(-42px, 0, 0);
}

.iphone-18-motion-enabled [data-iphone-18-reveal="right"] {
    transform: translate3d(42px, 0, 0);
}

.iphone-18-motion-enabled [data-iphone-18-reveal="scale"] {
    transform: translate3d(0, 20px, 0) scale(0.97);
}

.iphone-18-motion-enabled [data-iphone-18-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    [data-iphone-18-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (min-width: 768px) {
    .iphone-18-page-document footer .footer-container {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .iphone-18-page {
        padding: 42px 16px 0px;
    }

    .iphone-18-hero h1,
    .iphone-18-introduction h2 {
        font-size: 30px;
    }

    .iphone-18-hero {
        margin: 80px auto 0;
    }

    .iphone-18-hero > p {
        max-width: 330px;
        margin-right: auto;
        margin-left: auto;
    }

    .iphone-18-hero-image {
        width: min(68vw, 250px);
        margin-top: 38px;
    }

    .iphone-18-keep-together {
        white-space: nowrap;
    }

    .iphone-18-introduction {
        margin-top: 52px;
    }

    .iphone-18-copy {
        margin-top: 20px;
    }

    .iphone-18-copy p {
        max-width: 520px;
        margin-bottom: 20px;
        line-height: 1.65;
    }

    .iphone-18-desktop-break {
        display: none;
    }

    .iphone-18-pro-section {
        width: calc(100% + 32px);
        margin: 52px 0 0 -16px;
        padding: 0;
    }

    .iphone-18-pro-card {
        width: 100%;
        max-width: none;
        min-height: 760px;
        aspect-ratio: auto;
        margin: 0;
        border-radius: 0;
        background: #202020;
    }

    .iphone-18-pro-background {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        /* width: min(82vw, 360px); */
        height: auto;
        transform: translateX(-50%);
        object-fit: contain;
        object-position: center bottom;
    }

    .iphone-18-pro-tint {
        display: none;
    }

    .iphone-18-pro-header {
        top: 28px;
        width: calc(100% - 32px);
    }

    .iphone-18-pro-header h2,
    .iphone-18-pro-header p,
    .iphone-18-pro-content,
    .iphone-18-pro-content p,
    .iphone-18-pro-content li {
        color: #fff;
    }

    .iphone-18-pro-content {
        position: absolute;
        top: 112px;
        right: 26px;
        left: 26px;
        width: auto;
        margin: 0;
        text-align: left;
    }

    .iphone-18-pro-content p {
        margin-bottom: 16px;
        line-height: 1.55;
    }

    .iphone-18-pro-content ul {
        gap: 4px;
    }

    .iphone-18-pro-max-section {
        width: calc(100% + 32px);
        margin: 0 0 52px -16px;
        padding: 0;
    }

    .iphone-18-pro-max-card {
        width: 100%;
        max-width: none;
        min-height: 760px;
        aspect-ratio: auto;
        margin: 0;
        border-radius: 0;
        background: #d9d9d9;
    }

    .iphone-18-pro-max-background {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        /* width: min(82vw, 360px); */
        height: auto;
        transform: translateX(-50%);
        object-fit: contain;
        object-position: center bottom;
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 12%,
            rgba(0, 0, 0, 0.35) 24%,
            #000 38%,
            #000 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 12%,
            rgba(0, 0, 0, 0.35) 24%,
            #000 38%,
            #000 100%
        );
    }

    .iphone-18-pro-max-header {
        top: 28px;
        width: calc(100% - 32px);
    }

    .iphone-18-pro-max-header h2,
    .iphone-18-pro-max-header p,
    .iphone-18-pro-max-content,
    .iphone-18-pro-max-content p,
    .iphone-18-pro-max-content li {
        color: #202020;
    }

    .iphone-18-pro-max-content {
        position: absolute;
        top: 112px;
        right: 26px;
        left: 26px;
        width: auto;
        margin: 0;
        text-align: left;
    }

    .iphone-18-pro-max-content p {
        margin-bottom: 16px;
        line-height: 1.55;
    }

    .iphone-18-pro-max-content ul {
        gap: 4px;
    }

    .iphone-18-ultra-section {
        width: calc(100% + 32px);
        margin: 0 0 0 -16px;
        padding: 52px 20px 0;
    }

    .iphone-18-ultra-visual {
        gap: 14px;
        min-height: 0;
        margin-top: 38px;
    }

    .iphone-18-ultra-side-image {
        width: auto;
        height: min(62vw, 290px);
    }

    .iphone-18-ultra-main-image {
        width: min(58vw, 300px);
    }

    .iphone-18-ultra-content {
        margin-top: 46px;
    }

    .iphone-18-ultra-content ul {
        grid-template-columns: 1fr;
        gap: 9px;
        max-width: 320px;
        margin-top: 24px;
    }

    .iphone-18-feature-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: clamp(220px, 68vw, 280px);
        gap: 16px;
        width: calc(100% + 40px);
        max-width: none;
        margin: 58px -20px 0;
        padding: 0 20px 16px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 20px;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .iphone-18-feature-grid::-webkit-scrollbar {
        display: none;
    }

    .iphone-18-feature-grid:focus-visible {
        outline: 2px solid #087fe8;
        outline-offset: 4px;
    }

    .iphone-18-feature-card {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .iphone-18-wholesale-section {
        width: calc(100% + 32px);
        margin: 0 0 52px -16px;
        padding: 52px 20px 0;
    }

    .iphone-18-wholesale-header h2 {
        max-width: 270px;
        margin-right: auto;
        margin-left: auto;
    }

    .iphone-18-wholesale-header > img {
        width: min(68vw, 250px);
        margin-top: 28px;
    }

    .iphone-18-preorder-layout {
        grid-template-columns: 1fr;
        gap: 42px;
        max-width: 520px;
        margin-top: 70px;
    }

    .iphone-18-preorder-visual img {
        width: min(68vw, 250px);
        margin: 0 auto;
    }

    .iphone-18-preorder-content {
        text-align: center;
    }

    .iphone-18-preorder-content p {
        margin-right: auto;
        margin-left: auto;
    }

    .iphone-18-preorder-content ul {
        max-width: 340px;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .iphone-18-priority-list {
        margin-top: 62px;
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .iphone-18-pro-content {
        top: 28%;
        right: 5%;
        width: 42%;
    }

    .iphone-18-pro-content p {
        margin-bottom: 14px;
        line-height: 1.5;
    }

    .iphone-18-pro-content ul {
        gap: 2px;
    }

    .iphone-18-pro-max-content {
        top: 28%;
        left: 6%;
        width: 40%;
    }

    .iphone-18-pro-max-content p {
        margin-bottom: 14px;
        line-height: 1.5;
    }

    .iphone-18-pro-max-content ul {
        gap: 2px;
    }

    .iphone-18-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
    }
}