/* Root Variables */
:root {
    --r-globalnav-height: 44px;
    --r-localnav-height: 52px;
    --r-localnav-text-zoom-factor: 1;
    --ribbon-height: 52px;
}

@media only screen and (max-width: 833px) {
    :root {
        --r-globalnav-height: 48px;
        --r-localnav-height: 48px;
        --ribbon-height: 72px;
    }
}

/* Hero Section Styles */
.section-hero,
.section-hero .landing-hero__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-hero {
    --tile-width: 352px;
    --tile-padding: 58px 50px 50px;
    --tile-gap: 25px;
    --yStart: 70;
    --yEnd: 0;
    padding-top: 20px;
    overflow: visible;
}

.section-hero .landing-hero__header {
    min-height: calc(85vh - var(--r-localnav-height) - var(--r-globalnav-height));
    max-height: 900px;
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 0 50px;
    box-sizing: border-box;
    overflow: visible;
}

@media only screen and (max-width: 1068px) {
    .section-hero .landing-hero__header {
        min-height: calc(85vh - var(--r-localnav-height) - var(--r-globalnav-height));
        max-height: none;
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .landing-hero__header {
        min-height: calc(90vh - var(--r-localnav-height) - var(--r-globalnav-height));
        max-height: none;
    }
}

html.no-js .section-hero .landing-hero__header,
html.no-overview-parallax .section-hero .landing-hero__header,
html.reduced-motion .section-hero .landing-hero__header {
    height: auto;
    padding: 70px 0;
}

body.invites-2025 .section-hero .landing-hero__header {
    margin-top: var(--ribbon-height);
}

@media only screen and (max-width: 1068px) {
    .section-hero {
        --tile-width: 237px;
        --tile-padding: 50px 35px;
    }
}

@media only screen and (max-width: 734px) {
    .section-hero {
        --tile-width: 350px;
        --tile-padding: 50px 40px;
    }
}

/* Hero Icons Container - DEPRECATED (using hero-logos-container now) */
/* Commented out to avoid conflicts with new implementation
.section-hero .landing-hero__icons {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 60px;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}
*/

@media only screen and (max-width: 1068px) {
    .section-hero .landing-hero__icons {
        max-width: 600px;
        margin-bottom: 55px;
    }

    /* Symmetric layout for tablet - Top left */
    .section-hero .landing-hero__icons .landing-hero__icon--photos {
        --y-offset: 40px;
        --x-offset: 18%;
    }

    /* Symmetric layout for tablet - Bottom right */
    .section-hero .landing-hero__icons .landing-hero__icon--numbers {
        --y-offset: 220px;
        --x-offset: 62%;
    }

    /* Symmetric layout for tablet - Bottom left */
    .section-hero .landing-hero__icons .landing-hero__icon--notes {
        --y-offset: 220px;
        --x-offset: 18%;
    }

    /* Symmetric layout for tablet - Top right */
    .section-hero .landing-hero__icons .landing-hero__icon--memoji-1 {
        --y-offset: 40px;
        --x-offset: 62%;
    }

    /* Symmetric layout for tablet - Middle left */
    .section-hero .landing-hero__icons .landing-hero__icon--memoji-2 {
        --y-offset: 130px;
        --x-offset: 8%;
    }

    /* Symmetric layout for tablet - Middle right */
    .section-hero .landing-hero__icons .landing-hero__icon--backup {
        --y-offset: 130px;
        --x-offset: 72%;
    }

    /* Symmetric layout for tablet - Bottom center */
    .section-hero .landing-hero__icons .landing-hero__icon--files {
        --y-offset: 240px;
        --x-offset: 40%;
    }

    /* Symmetric layout for tablet - Top center */
    .section-hero .landing-hero__icons .landing-hero__icon--messages {
        --y-offset: 20px;
        --x-offset: 40%;
    }

    /* Symmetric layout for tablet - CENTER */
    .section-hero .landing-hero__icons .landing-hero__icon--cloud {
        --y-offset: 110px;
        --x-offset: 35%;
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .landing-hero__icons {
        max-width: 400px;
        margin-bottom: 50px;
    }

    /* Symmetric layout for mobile - Top left */
    .section-hero .landing-hero__icons .landing-hero__icon--photos {
        --y-offset: 30px;
        --x-offset: 20%;
    }

    /* Symmetric layout for mobile - Bottom right */
    .section-hero .landing-hero__icons .landing-hero__icon--numbers {
        --y-offset: 180px;
        --x-offset: 58%;
    }

    /* Symmetric layout for mobile - Bottom left */
    .section-hero .landing-hero__icons .landing-hero__icon--notes {
        --y-offset: 180px;
        --x-offset: 20%;
    }

    /* Symmetric layout for mobile - Top right */
    .section-hero .landing-hero__icons .landing-hero__icon--memoji-1 {
        --y-offset: 30px;
        --x-offset: 58%;
    }

    /* Symmetric layout for mobile - Middle left */
    .section-hero .landing-hero__icons .landing-hero__icon--memoji-2 {
        --y-offset: 105px;
        --x-offset: 10%;
    }

    /* Symmetric layout for mobile - Middle right */
    .section-hero .landing-hero__icons .landing-hero__icon--backup {
        --y-offset: 105px;
        --x-offset: 68%;
    }

    /* Symmetric layout for mobile - Bottom center */
    .section-hero .landing-hero__icons .landing-hero__icon--files {
        --y-offset: 200px;
        --x-offset: 39%;
    }

    /* Symmetric layout for mobile - Top center */
    .section-hero .landing-hero__icons .landing-hero__icon--messages {
        --y-offset: 10px;
        --x-offset: 39%;
    }

    /* Symmetric layout for mobile - CENTER */
    .section-hero .landing-hero__icons .landing-hero__icon--cloud {
        --y-offset: 90px;
        --x-offset: 32%;
    }
}

/* Base Picture Styles */
.section-hero .landing-hero__icons picture {
    --x-offset: 0px;
    --y-offset: 0px;
    display: flex;
    justify-content: center;
    position: absolute;
    top: var(--y-offset);
    left: var(--x-offset);
}

/* Animation Styles */
.section-hero .anim-fade-in-0,
.section-hero .anim-fade-in-1,
.section-hero .anim-fade-in-2,
.section-hero .anim-fade-in-3,
.section-hero .anim-fade-in-4 {
    --final-opacity: 1;
}

/* Calendar Icon (ical) */
.landing-hero__icon--ical {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 85px;
    --p-height: 83px;
}

@media only screen and (max-width: 1068px) {
    .landing-hero__icon--ical {
        --p-width: 73px;
        --p-height: 73px;
    }
}

.section-hero .landing-hero__icon--ical {
    --final-opacity: 0.6;
}

.section-hero .landing-hero__icons .landing-hero__icon--ical,
.section-hero .landing-hero__icons .landing-hero__icon--mail {
    --y-offset: var(--y-offset-tier-4);
    --x-offset: var(--x-offset-tier-4);
}

@media only screen and (max-width: 1112px) {
    .section-hero .landing-hero__icons .landing-hero__icon--ical,
    .section-hero .landing-hero__icons .landing-hero__icon--ical img,
    .section-hero .landing-hero__icons .landing-hero__icon--mail,
    .section-hero .landing-hero__icons .landing-hero__icon--mail img {
        display: none;
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .landing-hero__icons .landing-hero__icon--ical,
    .section-hero .landing-hero__icons .landing-hero__icon--ical img,
    .section-hero .landing-hero__icons .landing-hero__icon--mail,
    .section-hero .landing-hero__icons .landing-hero__icon--mail img {
        display: none;
    }
}

/* Photos Icon */
.landing-hero__icon--photos {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 85px;
    --p-height: 83px;
}

@media only screen and (max-width: 1068px) {
    .landing-hero__icon--photos {
        --p-width: 73px;
        --p-height: 73px;
    }
}

@media only screen and (max-width: 734px) {
    .landing-hero__icon--photos {
        --p-width: 65px;
        --p-height: 63px;
    }
}

/* Symmetric layout - Top left */
.section-hero .landing-hero__icons .landing-hero__icon--photos {
    --y-offset: 50px;
    --x-offset: 15%;
}

/* Numbers Icon */
.landing-hero__icon--numbers {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 85px;
    --p-height: 83px;
}

@media only screen and (max-width: 1068px) {
    .landing-hero__icon--numbers {
        --p-width: 73px;
        --p-height: 73px;
    }
}

@media only screen and (max-width: 734px) {
    .landing-hero__icon--numbers {
        --p-width: 65px;
        --p-height: 63px;
    }
}

/* Symmetric layout - Bottom right */
.section-hero .landing-hero__icons .landing-hero__icon--numbers {
    --y-offset: 280px;
    --x-offset: 65%;
}

/* Notes Icon */
.landing-hero__icon--notes {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 85px;
    --p-height: 83px;
}

@media only screen and (max-width: 1068px) {
    .landing-hero__icon--notes {
        --p-width: 73px;
        --p-height: 73px;
    }
}

@media only screen and (max-width: 734px) {
    .landing-hero__icon--notes {
        --p-width: 65px;
        --p-height: 63px;
    }
}

/* Symmetric layout - Bottom left */
.section-hero .landing-hero__icons .landing-hero__icon--notes {
    --y-offset: 280px;
    --x-offset: 15%;
}

/* Memoji Icons */
.landing-hero__icon--memoji-1,
.landing-hero__icon--memoji-2 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 135px;
    --p-height: 132px;
}

@media only screen and (max-width: 1068px) {
    .landing-hero__icon--memoji-1,
    .landing-hero__icon--memoji-2 {
        --p-width: 110px;
        --p-height: 107px;
    }
}

@media only screen and (max-width: 734px) {
    .landing-hero__icon--memoji-1,
    .landing-hero__icon--memoji-2 {
        --p-width: 92px;
        --p-height: 90px;
    }
}

/* Symmetric layout - Top right */
.section-hero .landing-hero__icons .landing-hero__icon--memoji-1 {
    --y-offset: 50px;
    --x-offset: 65%;
}

/* Symmetric layout - Middle left */
.section-hero .landing-hero__icons .landing-hero__icon--memoji-2 {
    --y-offset: 165px;
    --x-offset: 5%;
}

/* Backup Icon */
.landing-hero__icon--backup {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 85px;
    --p-height: 83px;
}

@media only screen and (max-width: 1068px) {
    .landing-hero__icon--backup {
        --p-width: 73px;
        --p-height: 73px;
    }
}

@media only screen and (max-width: 734px) {
    .landing-hero__icon--backup {
        --p-width: 65px;
        --p-height: 63px;
    }
}

/* Symmetric layout - Middle right */
.section-hero .landing-hero__icons .landing-hero__icon--backup {
    --y-offset: 165px;
    --x-offset: 75%;
}

/* Files Icon */
.landing-hero__icon--files {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 85px;
    --p-height: 83px;
}

@media only screen and (max-width: 1068px) {
    .landing-hero__icon--files {
        --p-width: 73px;
        --p-height: 73px;
    }
}

@media only screen and (max-width: 734px) {
    .landing-hero__icon--files {
        --p-width: 65px;
        --p-height: 63px;
    }
}

/* Symmetric layout - Bottom center */
.section-hero .landing-hero__icons .landing-hero__icon--files {
    --y-offset: 300px;
    --x-offset: 40%;
}

/* Mail Icon */
.landing-hero__icon--mail {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 85px;
    --p-height: 83px;
}

@media only screen and (max-width: 1068px) {
    .landing-hero__icon--mail {
        --p-width: 73px;
        --p-height: 73px;
    }
}

/* Messages Icon */
.landing-hero__icon--messages {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 85px;
    --p-height: 83px;
}

@media only screen and (max-width: 1068px) {
    .landing-hero__icon--messages {
        --p-width: 73px;
        --p-height: 73px;
    }
}

@media only screen and (max-width: 734px) {
    .landing-hero__icon--messages {
        --p-width: 65px;
        --p-height: 63px;
    }
}

/* Symmetric layout - Top center */
.section-hero .landing-hero__icons .landing-hero__icon--messages {
    --y-offset: 30px;
    --x-offset: 40%;
}

/* iCloud Icon */
.landing-hero__icon--cloud {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 185px;
    --p-height: 180px;
}

@media only screen and (max-width: 1068px) {
    .landing-hero__icon--cloud {
        --p-width: 148px;
        --p-height: 144px;
    }
}

@media only screen and (max-width: 734px) {
    .landing-hero__icon--cloud {
        --p-width: 130px;
        --p-height: 126px;
    }
}

/* Symmetric layout - CENTER (logo10) */
.section-hero .landing-hero__icons .landing-hero__icon--cloud {
    --y-offset: 140px;
    --x-offset: 35%;
}

/* Z-index layers */
.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

/* New Hero Logos Container - Clean implementation */
.hero-logos-container {
    position: relative;
    z-index: 1;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

/* Ensure proper spacing and no overlap */
.hero-logos-container img {
    position: relative;
    z-index: 1;
    max-height: 450px;
}

/* Desktop specific adjustments */
@media only screen and (min-width: 1280px) {
    .hero-logos-container img {
        max-height: 400px;
    }
}

/* Additional responsive adjustments */
@media only screen and (max-width: 768px) {
    .hero-logos-container {
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
    }

    .hero-logos-container img {
        max-height: 380px;
    }
}

@media only screen and (max-width: 480px) {
    .hero-logos-container {
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
    }

    .hero-logos-container img {
        max-height: 320px;
    }
}

/* Images responsive */
.section-hero .landing-hero__icons picture img {
    width: 100%;
    height: auto;
    display: block;
}