/* The archived Apps page uses a 1220px content rail, with the banner ratio
   and four-column card grid defined by archive-apps-os.css. */
.wrapper.apps>.main{width:100%;max-width:none;margin-left:auto!important;margin-right:auto!important}
.wrapper.apps>.main>[ng-view]{display:block;width:100%;margin-left:auto!important;margin-right:auto!important}
.wrapper.apps .smart-wrapper,.wrapper.apps .container,.wrapper.apps .app-list,.wrapper.apps .app-major{margin-left:auto!important;margin-right:auto!important}
html.responsive .apps .container:not([data-apps-tabs-container]){width:1220px!important;margin-left:auto!important;margin-right:auto!important}
@media(max-width:1252px){html.responsive .apps .container:not([data-apps-tabs-container]){width:calc(100% - 32px)!important}}
/* Preserve the archive's original page canvas and list resets. */
html,body,.wrapper.apps{background:#f5f5f5!important}
body{margin:0!important;padding:0!important}
.wrapper.apps ul:not(.nav):not(.archive-apps-gallery *),.wrapper.apps ol:not(.archive-apps-gallery *){margin:0!important;padding:0!important;list-style:none!important}
/* Keep the original Apps secondary navigation's 90px bar and link spacing. */
.wrapper.apps .apps-topnav:not([data-apps-tabs]) .nav{margin:0!important;padding:37px 0 0!important;list-style:none!important}

/* Match the Chinese homepage App-card hover shadow without replacing card content. */
html.cn .home .apps li{box-shadow:inset 0 0 0 rgba(0,0,0,0);-webkit-transition:box-shadow .1s cubic-bezier(.4,0,1,1);transition:box-shadow .1s cubic-bezier(.4,0,1,1)}
html.cn .home .apps li:hover{box-shadow:inset 0 0 38px rgba(0,0,0,.08);-webkit-transition:box-shadow .2s ease-out .15s;transition:box-shadow .2s ease-out .15s}
html.cn .home .apps li .app-content{display:block!important;opacity:1!important}

/* Keep the first six legacy app tiles compact and consistent on phones only. */
@media screen and (max-width:736px) {
  html.cn .wrapper.apps .home .apps .container > ul > li:nth-child(-n+6) {
    display:flex;
    align-items:center;
    justify-content:center;
    width:50%;
    height:auto;
    aspect-ratio:1 / 1;
    box-sizing:border-box;
    padding:12px;
  }
  html.cn .wrapper.apps .home .apps .container > ul > li:nth-child(-n+6) .app-content {
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    gap:7px;
  }
  html.cn .wrapper.apps .home .apps .container > ul > li:nth-child(-n+6) .app-content > .icon-home {
    margin:0;
  }
  html.cn .wrapper.apps .home .apps .container > ul > li:nth-child(-n+6) .app-content > h3 {
    margin:0;
    text-align:center;
  }
  html.cn .wrapper.apps .home .apps .container > ul > li:nth-child(-n+6) .app-content > h3 span::after,
  html.cn .wrapper.apps .home .apps .container > ul > li:nth-child(-n+6) .app-content > p,
  html.cn .wrapper.apps .home .apps .container > ul > li:nth-child(-n+6) .app-content > .platform {
    display:none!important;
  }
}

/* Compact only the desktop legacy Apps grid; the mobile square-tile rules above stay intact. */
@media screen and (min-width:737px) {
  html.cn .wrapper.apps .home .apps .container > ul {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:1fr;
  }
  html.cn .wrapper.apps .home .apps .container > ul > li:nth-child(-n+6) {
    display:flex;
    flex-direction:column;
    justify-content:center;
    float:none;
    width:auto;
    height:auto;
    padding:58px 18px;
    box-sizing:border-box;
  }
  html.cn .wrapper.apps .home .apps .container > ul > li:nth-child(-n+6) .app-content {
    display:block!important;
    width:100%;
  }
  html.cn .wrapper.apps .home .apps .container > ul > li:nth-child(-n+6) .platform-icon {
    display:none!important;
  }
  html.cn .wrapper.apps .home .apps .container > ul > li.comming-2 {
    display:flex;
    grid-column:span 2;
    align-items:center;
    justify-content:center;
    float:none;
    width:auto;
    height:auto;
    padding:24px 48px;
    box-sizing:border-box;
  }
  html.cn .wrapper.apps .home .apps .container > ul > li.comming-2 .icon-comming {
    float:none;
    margin:0;
  }
  html.cn .wrapper.apps .home .apps .container > ul > li.comming-2 .content {
    float:none;
    margin:0 0 0 10px;
  }
}

/* Apple Apps Communication gallery: source rules isolated from the archived Apps UI. */
.archive-apps-gallery {
  --viewport-content-padding-lg: 90px;
  --viewport-content-lg: calc(100% - var(--viewport-content-padding-lg) * 2);
  --viewport-content: 87.5vw;
  --content-max-width: 1680px;
  --apps-margin-inline-end: 40px;
  --sk-body-text-color: #1d1d1f;
  --sk-headline-text-color: #1d1d1f;
  --sk-focus-color: #0071e3;
  --sk-link-disabled-opacity: .42;
  --sk-paddlenav-diameter: 36px;
  --sk-paddlenav-background: #e8e8ed;
  --sk-paddlenav-background-hover: #ececf0;
  --sk-paddlenav-background-active: #dfdfe3;
  --sk-paddlenav-arrow-color: #1d1d1f;
  --sk-paddlenav-arrow-color-hover: #000;
  --sk-paddlenav-arrow-color-active: #000;
  --sk-tile-border-radius-large: 28px;
  --sk-tile-padding-large: 25px;
  --sk-tile-padding-xsmall: 20px;
  background: #f5f5f7;
  color: #1d1d1f;
  font: 17px/1.47059 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.022em;
}
.archive-apps-gallery button, .archive-apps-gallery h2, .archive-apps-gallery h3, .archive-apps-gallery h4, .archive-apps-gallery li, .archive-apps-gallery p, .archive-apps-gallery ul { margin: 0px; padding: 0px; }
.archive-apps-gallery button { background: none; border: 0px; box-sizing: initial; color: inherit; cursor: pointer; font: inherit; overflow: visible; vertical-align: inherit; }
.archive-apps-gallery button:disabled { cursor: default; }
.archive-apps-gallery button { font-synthesis: none; -webkit-font-smoothing: antialiased; }
.archive-apps-gallery h2, .archive-apps-gallery h3, .archive-apps-gallery h4 { font-weight: 600; color: var(--sk-headline-text-color,rgb(29,29,31)); }
.archive-apps-gallery h4 + * { margin-top: var(--sk-headline-plus-first-element-margin,0.8em); }
.archive-apps-gallery ul { margin-inline-start: 1.17647em; }
.archive-apps-gallery strong { font-weight: 600; }
.archive-apps-gallery a { color: var(--sk-body-link-color,rgb(0,102,204)); letter-spacing: inherit; }
.archive-apps-gallery .visuallyhidden { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0px; border: 0px; }
.archive-apps-gallery sup { position: relative; font-size: var(--sk-footnote-font-size,0.6em); vertical-align: initial; }
.archive-apps-gallery sup { top: var(--sk-footnote-offset-top,-0.5em); }
.archive-apps-gallery .large-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .medium-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery .small-12 { flex-basis: 100%; max-width: 100%; }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery .xsmall-hide { display: none; }
}
.archive-apps-gallery .paddlenav { --sk-paddlenav-diameter: 36px; --sk-paddlenav-arrow-color: rgba(0,0,0,0.56); --sk-paddlenav-arrow-color-hover: rgba(0,0,0,0.64); --sk-paddlenav-arrow-color-active: rgba(0,0,0,0.64); --sk-paddlenav-background: transparent; --sk-paddlenav-background-hover: transparent; --sk-paddlenav-background-active: transparent; --sk-paddlenav-focus-offset-color: rgb(255,255,255); }
.archive-apps-gallery .paddlenav, .archive-apps-gallery .paddlenav ul { margin: 0px; list-style: none; display: flex; justify-content: center; }
.archive-apps-gallery .paddlenav .paddlenav-arrow { background: var(--sk-paddlenav-background); color: var(--sk-paddlenav-arrow-color); display: block; width: var(--sk-paddlenav-diameter); height: var(--sk-paddlenav-diameter); border-radius: var(--sk-paddlenav-diameter); font-style: normal; overflow: hidden; position: absolute; text-align: center; line-height: 1; transition: background 100ms linear, color 100ms linear, opacity 100ms linear; }
.archive-apps-gallery .paddlenav .paddlenav-arrow-next, .archive-apps-gallery .paddlenav .paddlenav-arrow-previous { margin-top: calc(var(--sk-paddlenav-diameter)*-0.5); }
.archive-apps-gallery .paddlenav .paddlenav-arrow-next, .archive-apps-gallery .paddlenav .paddlenav-arrow-previous { top: 50%; }
.archive-apps-gallery .paddlenav .paddlenav-arrow svg path { fill: var(--sk-paddlenav-arrow-color); transition: fill 100ms linear; }
.archive-apps-gallery .paddlenav .paddlenav-arrow:hover { background: var(--sk-paddlenav-background-hover); color: var(--sk-paddlenav-arrow-color-hover); text-decoration: none; }
.archive-apps-gallery .paddlenav .paddlenav-arrow:hover svg path { fill: var(--sk-paddlenav-arrow-color-hover); }
.archive-apps-gallery .paddlenav .paddlenav-arrow:active { background: var(--sk-paddlenav-background-active); color: var(--sk-paddlenav-arrow-color-active); }
.archive-apps-gallery .paddlenav .paddlenav-arrow:active svg path { fill: var(--sk-paddlenav-arrow-color-active); }
.archive-apps-gallery .paddlenav .paddlenav-arrow:focus-visible { outline: 2px solid var(--sk-focus-color); outline-offset: 3px; }
.archive-apps-gallery .paddlenav .paddlenav-arrow:disabled { pointer-events: none; opacity: var(--sk-link-disabled-opacity,0.42); }
html.touch .archive-apps-gallery .paddlenav .paddlenav-arrow:disabled { opacity: 0; }
.archive-apps-gallery .paddlenav .paddlenav-arrow-previous { inset-inline-start: 18px; }
.archive-apps-gallery .paddlenav .paddlenav-arrow-next { inset-inline-end: 18px; }
.archive-apps-gallery .paddlenav-alpha { --sk-paddlenav-background: rgba(210,210,215,0.64); --sk-paddlenav-background-hover: rgba(223,223,227,0.6976); --sk-paddlenav-background-active: rgba(193,193,198,0.6544); }
.archive-apps-gallery .paddlenav-side-aligned .paddlenav-arrow-next, .archive-apps-gallery .paddlenav-side-aligned .paddlenav-arrow-previous { top: 100%; margin-top: calc(var(--sk-paddlenav-diameter)*-1 + -18px); }
html:not([dir="rtl"]) .archive-apps-gallery .paddlenav-side-aligned .paddlenav-arrow-previous { left: auto; right: calc(var(--sk-paddlenav-diameter) + 36px); }
html:not([dir="rtl"]) .archive-apps-gallery .paddlenav-side-aligned .paddlenav-arrow-next { right: 18px; }
.archive-apps-gallery .paddlenav-side-aligned.paddlenav-outside .paddlenav-arrow-next, .archive-apps-gallery .paddlenav-side-aligned.paddlenav-outside .paddlenav-arrow-previous { top: 100%; margin-top: 18px; }
html:not([dir="rtl"]) .archive-apps-gallery .paddlenav-side-aligned.paddlenav-outside .paddlenav-arrow-previous { left: auto; right: calc(var(--sk-paddlenav-diameter) + 18px); }
html:not([dir="rtl"]) .archive-apps-gallery .paddlenav-side-aligned.paddlenav-outside .paddlenav-arrow-next { right: 0px; }
.archive-apps-gallery .with-paddlenav { position: relative; }
html.no-touch .archive-apps-gallery .with-paddlenav-onhover .paddlenav-arrow:focus-visible { opacity: 1; }
html.no-touch .archive-apps-gallery .with-paddlenav-onhover .paddlenav-arrow:disabled { opacity: 0; }
.archive-apps-gallery .with-paddlenav-visuallyhidden .paddlenav-arrow:focus-visible, .archive-apps-gallery .with-paddlenav-visuallyhidden .paddlenav-arrow:hover { clip: auto; clip-path: none; }
.archive-apps-gallery .footnote a { vertical-align: inherit; color: inherit; }
.archive-apps-gallery .footnote-number { position: relative; vertical-align: initial; font-feature-settings: "numr"; font-size: 1em; }
.archive-apps-gallery sup.footnote-number { top: auto; }
.archive-apps-gallery .tile { margin-inline: auto; --sk-tile-box-shadow: initial; --sk-tile-background: rgb(255,255,255); --sk-tile-focus-outline-color: rgb(255,255,255); --sk-tile-button-background: rgba(210,210,215,0.64); --sk-tile-button-background-hover: rgba(223,223,227,0.6976); --sk-tile-button-background-active: rgba(193,193,198,0.6544); --sk-tile-button-icon-color: rgba(0,0,0,0.56); --sk-tile-button-icon-color-hover: rgba(0,0,0,0.64); box-sizing: border-box; height: 100%; position: relative; overflow: hidden; background: var(--sk-tile-background); box-shadow: var(--sk-tile-box-shadow); }
.archive-apps-gallery .tile-content { --sk-tile-padding-large: var(--sk-tile-padding,60px 8.3333333333%); --sk-tile-padding-xlarge: var(--sk-tile-padding,var(--sk-tile-padding-large)); --sk-tile-padding-medium: var(--sk-tile-padding,var(--sk-tile-padding-large)); --sk-tile-padding-small: var(--sk-tile-padding,var(--sk-tile-padding-large)); --sk-tile-padding-xxlarge: var(--sk-tile-padding,var(--sk-tile-padding-large)); --sk-tile-padding-xsmall: var(--sk-tile-padding,var(--sk-tile-padding-large)); --sk-tile-padding-xxsmall: var(--sk-tile-padding,var(--sk-tile-padding-large)); padding: var(--sk-tile-padding-large); }
@media only screen and (min-width: 1441px) {
.archive-apps-gallery .tile-content { padding: var(--sk-tile-padding-xlarge); }
}
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .tile-content { padding: var(--sk-tile-padding-medium); }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery .tile-content { padding: var(--sk-tile-padding-small); }
}
@media only screen and (min-width: 1920px) {
.archive-apps-gallery .tile-content { padding: var(--sk-tile-padding-xxlarge); }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery .tile-content { padding: var(--sk-tile-padding-xsmall); }
}
@media only screen and (max-width: 360px) {
.archive-apps-gallery .tile-content { padding: var(--sk-tile-padding-xxsmall); }
}
.archive-apps-gallery .tile-rounded { --sk-tile-border-radius-large: var(--sk-tile-border-radius,18px); --sk-tile-border-radius-xlarge: var(--sk-tile-border-radius,var(--sk-tile-border-radius-large)); --sk-tile-border-radius-medium: var(--sk-tile-border-radius,var(--sk-tile-border-radius-large)); --sk-tile-border-radius-small: var(--sk-tile-border-radius,var(--sk-tile-border-radius-large)); --sk-tile-border-radius-xxlarge: var(--sk-tile-border-radius,var(--sk-tile-border-radius-large)); --sk-tile-border-radius-xsmall: var(--sk-tile-border-radius,var(--sk-tile-border-radius-large)); --sk-tile-border-radius-xxsmall: var(--sk-tile-border-radius,var(--sk-tile-border-radius-large)); border-radius: var(--sk-tile-border-radius-large); }
@media only screen and (min-width: 1441px) {
.archive-apps-gallery .tile-rounded { border-radius: var(--sk-tile-border-radius-xlarge); }
}
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .tile-rounded { border-radius: var(--sk-tile-border-radius-medium); }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery .tile-rounded { border-radius: var(--sk-tile-border-radius-small); }
}
@media only screen and (min-width: 1920px) {
.archive-apps-gallery .tile-rounded { border-radius: var(--sk-tile-border-radius-xxlarge); }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery .tile-rounded { border-radius: var(--sk-tile-border-radius-xsmall); }
}
@media only screen and (max-width: 360px) {
.archive-apps-gallery .tile-rounded { border-radius: var(--sk-tile-border-radius-xxsmall); }
}
.archive-apps-gallery .theme-dark { --sk-glyph: rgb(255,255,255); --sk-glyph-gray: rgb(245,245,247); --sk-glyph-gray-alpha: rgba(255,255,255,0.92); --sk-glyph-gray-secondary: rgb(134,134,139); --sk-glyph-gray-secondary-alpha: rgba(255,255,255,0.56); --sk-glyph-gray-secondary-alt: rgb(210,210,215); --sk-glyph-gray-secondary-alt-alpha: rgba(255,255,255,0.8); --sk-glyph-gray-tertiary: rgb(110,110,115); --sk-glyph-gray-tertiary-alpha: rgba(255,255,255,0.4); --sk-glyph-blue: rgb(41,151,255); --sk-glyph-orange: rgb(255,121,27); --sk-glyph-green: rgb(3,161,14); --sk-glyph-red: rgb(255,48,55); --sk-fill: rgb(0,0,0); --sk-fill-secondary: rgb(22,22,23); --sk-fill-tertiary: rgb(29,29,31); --sk-fill-gray: rgb(245,245,247); --sk-fill-gray-alpha: rgba(255,255,255,0.92); --sk-fill-gray-secondary: rgb(110,110,115); --sk-fill-gray-secondary-alpha: rgba(255,255,255,0.4); --sk-fill-gray-tertiary: rgb(66,66,69); --sk-fill-gray-tertiary-alpha: rgba(255,255,255,0.24); --sk-fill-gray-quaternary: rgb(51,51,54); --sk-fill-gray-quaternary-alpha: rgba(255,255,255,0.2); --sk-fill-orange-secondary: rgb(41,13,0); --sk-fill-green-secondary: rgb(0,43,3); --sk-fill-red: rgb(255,48,55); --sk-fill-red-secondary: rgb(51,0,0); --sk-fill-yellow: rgb(173,130,0); --sk-fill-yellow-secondary: rgb(43,32,0); --sk-enviro-neutral: rgb(0,0,0); --sk-focus-outline-offset: rgb(0,0,0); --sk-body-background-color: rgb(0,0,0); --sk-body-text-color: rgb(245,245,247); --sk-headline-text-color: rgb(245,245,247); --sk-body-link-color: rgb(41,151,255); --sk-link-disabled-opacity: 0.36; --sk-focus-color-alt: rgb(255,255,255); }
.archive-apps-gallery .tile-dark { --sk-tile-background: rgb(0,0,0); --sk-tile-button-icon-color: rgba(255,255,255,0.8); --sk-tile-button-background: rgba(66,66,69,0.72); --sk-tile-button-icon-color-hover: rgb(255,255,255); --sk-tile-button-background-hover: rgba(73,73,76,0.7256); --sk-tile-button-background-active: rgba(57,57,60,0.7424); --sk-tile-focus-outline-color: rgb(0,0,0); }
.archive-apps-gallery p { color: var(--sk-body-text-color); }
.archive-apps-gallery section { --section-padding: 96px; padding-block: var(--section-padding); }
@media only screen and (max-width: 1068px) {
.archive-apps-gallery section { --section-padding: 80px; }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery section { --section-padding: 72px; }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery section { --section-padding: 64px; }
}
.archive-apps-gallery .section-headline { margin-bottom: 40px; }
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .section-headline { margin-bottom: 36px; }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery .section-headline { margin-bottom: 32px; }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery .section-headline { margin-bottom: 28px; }
}
.archive-apps-gallery .section-headline.duo-tone { color: rgb(134, 134, 139); }
.archive-apps-gallery .section-headline.duo-tone strong { color: rgb(29, 29, 31); }
.archive-apps-gallery .section-more-bottom-pad { padding-block-end: 150px; }
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .section-more-bottom-pad { padding-block-end: 134px; }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery .section-more-bottom-pad { padding-block-end: 124px; }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery .section-more-bottom-pad { padding-block-end: 118px; }
}
.archive-apps-gallery .section-content { margin-inline: auto; width: 100%; max-width: var(--content-max-width); position: relative; }
@media only screen and (min-width: 1441px) {
.archive-apps-gallery .section-content { margin-inline: auto; width: calc(100% - 240px); }
}
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .section-content { margin-inline: auto; width: calc(100% - 134px); }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery .section-content { margin-inline: auto; width: 87.5%; }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery .section-content { margin-inline: auto; width: calc(100% - 44px); }
}
@media only screen and (min-width: 1069px) and (max-width: 1440px) {
.archive-apps-gallery .section-content { width: var(--viewport-content-lg); }
}
.archive-apps-gallery .paddlenav { --sk-paddlenav-background: rgb(210,210,215); --sk-paddlenav-background-hover: rgba(0,0,0,0.16); --sk-paddlenav-background-active: rgba(0,0,0,0.16); }
html.touch .archive-apps-gallery .paddlenav .paddlenav-arrow:disabled { opacity: var(--sk-link-disabled-opacity,0.42); }
.archive-apps-gallery .paddlenav-arrow-previous svg { transform: rotate(180deg); }
.archive-apps-gallery .footnote a { text-decoration: none; }
.archive-apps-gallery .typography-eyebrow-elevated { font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: 0.007em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; }
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .typography-eyebrow-elevated { font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: 0.009em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery .typography-eyebrow-elevated { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: 0.011em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; }
}
.archive-apps-gallery .typography-body-reduced-tight { font-size: 14px; line-height: 1.28577; font-weight: 400; letter-spacing: -0.016em; font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.archive-apps-gallery .typography-section-headline { font-size: 48px; line-height: 1.08349; font-weight: 600; letter-spacing: -0.003em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; }
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .typography-section-headline { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery .typography-section-headline { font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: 0.004em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery .typography-section-headline { font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: 0.007em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; }
}
.archive-apps-gallery .typography-card-copy { font-size: 17px; line-height: 1.23536; font-weight: 400; letter-spacing: -0.022em; font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; }
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .typography-card-copy { font-size: 14px; line-height: 1.28577; font-weight: 400; letter-spacing: -0.016em; font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; }
}
.archive-apps-gallery [class*="typography-eyebrow"] { display: block; margin-bottom: 0.4em; }
.archive-apps-gallery .section-hero .paddlenav-side-aligned.paddlenav-outside.paddlenav .paddlenav-arrow:focus-visible { outline-offset: 1px; }
.archive-apps-gallery { background-color: #e5e5e5; padding-block: 87px 0px; --viewport-content: var(--viewport-content-lg); }
@media only screen and (min-width: 1441px) {
.archive-apps-gallery { --viewport-content: calc(100% - 240px); }
}
@media only screen and (max-width: 1068px) {
.archive-apps-gallery { --viewport-content: calc(100% - 134px); }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery { --viewport-content: 87.5%; }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery { --viewport-content: calc(100% - 44px); }
}
@media only screen and (max-width: 1068px) {
.archive-apps-gallery { padding-block-start: 71px; }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery { padding-block-start: 62px; }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery { padding-block-start: 54px; }
}
@media only screen and (min-width: 1441px) {
.archive-apps-gallery .section-headline { max-width: 100%; }
}
@media only screen and (max-width: 360px) {
.archive-apps-gallery .section-headline { width: 95%; }
}
.archive-apps-gallery { --gallery-card-height: 680px; }
@media only screen and (min-width: 1441px) {
  .archive-apps-gallery { --gallery-card-height: 740px; }
}
@media only screen and (max-width: 1068px) {
  .archive-apps-gallery { --gallery-card-height: 628px; }
}
@media only screen and (max-width: 734px) {
  .archive-apps-gallery { --gallery-card-height: 562px; }
}
@media only screen and (max-width: 480px) {
  .archive-apps-gallery { --gallery-card-height: 510px; }
}
.archive-apps-gallery .gallery-content { display: none; }
.archive-apps-gallery .gallery-content:first-of-type { padding-top: 40px; margin-top: -7px; }
.archive-apps-gallery .gallery-content.active { display: block; }
.archive-apps-gallery .item-container { display: inline-grid; margin-bottom: 22px; gap: 20px; grid-template-rows: var(--gallery-card-height); grid-auto-flow: column; width: fit-content; padding-inline-start: calc(50% - var(--viewport-content)/2); margin-inline-end: var(--apps-margin-inline-end); margin-inline-start: 0px; }
@media only screen and (min-width: 1920px) {
.archive-apps-gallery .item-container { padding-inline-start: calc(50% - var(--content-max-width)/2); }
}
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .item-container { margin-bottom: 18px; }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery .item-container { margin-bottom: 16px; padding-inline-end: calc(50% - var(--viewport-content)/2); }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery .item-container { margin-bottom: 10px; }
}
.archive-apps-gallery .scroll-container { overflow: scroll; will-change: transform; scroll-snap-type: x mandatory; scroll-padding: calc(50% - var(--viewport-content)/2); scrollbar-width: none; }
@media only screen and (min-width: 1920px) {
.archive-apps-gallery .scroll-container { scroll-padding: calc(50% - var(--content-max-width)/2); }
}
.archive-apps-gallery .card { --sk-tile-border-radius-large: 28px; --sk-tile-background: transparent; --card-width: 372px; --card-height: 680px; --chiclet-shadow-offset: -10px; --chiclet-shadow-offset-bottom: -18px; width: var(--card-width); height: var(--card-height); min-height: var(--card-height); box-sizing: border-box; position: relative; overflow: hidden; background-color: var(--card-bg-color); flex-direction: column; display: none; scroll-snap-align: start; }
@media only screen and (min-width: 1441px) {
.archive-apps-gallery .card { --card-width: 405px; --card-height: 740px; }
}
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .card { --card-width: 344px; --card-height: 628px; --chiclet-shadow-offset: -8px; --chiclet-shadow-offset-bottom: -15px; }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery .card { --card-width: 304px; --card-height: 562px; }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery .card { --card-width: 280px; --card-height: 510px; }
}
.archive-apps-gallery .card.active { display: flex; }
.archive-apps-gallery .card .tile-content { --sk-tile-padding-large: 25px; --sk-tile-padding-xsmall: 20px; --sk-tile-padding-xxsmall: var(--sk-tile-padding-xsmall); display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; box-sizing: border-box; z-index: 2; width: 100%; padding-bottom: 25px; gap: 15px; }
@media only screen and (min-width: 1441px) {
.archive-apps-gallery .card .tile-content { padding-bottom: 25px; }
}
@media only screen and (max-width: 1068px) {
.archive-apps-gallery .card .tile-content { padding-bottom: 25px; padding-right: 19px; gap: 10px; }
}
@media only screen and (max-width: 734px) {
.archive-apps-gallery .card .tile-content { padding-bottom: 25px; padding-right: 15px; }
}
@media only screen and (max-width: 480px) {
.archive-apps-gallery .card .tile-content { padding-bottom: 25px; }
}
@media only screen and (min-width: 1069px) and (max-width: 1440px) {
.archive-apps-gallery .card.l-wider .tile-content { padding-right: 20px; }
}
.archive-apps-gallery .card-header { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.archive-apps-gallery .card-heading { position: relative; display: block; flex: 1 1 auto; min-width: 0; height: 99px; margin-bottom: var(--chiclet-shadow-offset-bottom); }
.archive-apps-gallery .card-header .app-name { position: absolute; top: 50%; right: 0; left: 0; margin: 0; transform: translateY(-50%); }
.archive-apps-gallery .card-chiclet { margin-top: ; margin-right: ; margin-left: ; margin-bottom: var(--chiclet-shadow-offset-bottom); }
.archive-apps-gallery .card .comp { position: absolute; right: 0; bottom: 9px; left: 0; max-width: 100%; }
.archive-apps-gallery .card .comp-label { font-weight: 600; margin: 0px; }
.archive-apps-gallery .card .comp-copy { margin: 0px; }
.archive-apps-gallery .card .comp-copy { color: #86868b; }
.archive-apps-gallery .card .typography-card-copy { position: relative; top: 8px; }
.archive-apps-gallery .card.card-facetime::after { content: ""; position: absolute; background-color: rgb(52, 199, 89); border-radius: 10px; width: 10px; height: 10px; right: 20px; top: 20px; }
.archive-apps-gallery .featured-apps-panel-avp .card .comp { right: 0; left: 0; }
.archive-apps-gallery .featured-apps-panel-avp .card-facetime .comp { right: auto; }
.archive-apps-gallery .theme-dark .paddlenav button:disabled .svg-icon, .archive-apps-gallery .theme-dark .paddlenav button:disabled:hover .svg-icon { fill: rgb(110, 110, 115); }
/* Preserve the original chiclet slot without downloading Apple artwork. */
.archive-apps-gallery .card-chiclet { flex: 0 0 auto; width: 90px; height: 99px; }
.archive-apps-gallery .card-chiclet > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.archive-apps-gallery .card:not(.card-specmail) .tile-content { padding-bottom: 12px; }
.archive-apps-gallery .card:not(.card-specmail):not(.card-drivekit):not(.card-bulletMessage) .card-demo-image {
  position: relative;
  align-self: center;
  display: block;
  z-index: 0;
  flex: 1 1 0%;
  width: 76%;
  max-width: none;
  height: 0;
  min-height: 0;
  margin: 0;
  object-fit: contain;
  object-position: bottom center;
}
/* Match the specmail card's full-width, bottom-anchored natural-ratio image layer. */
.archive-apps-gallery .card-drivekit > .card-demo-image,
.archive-apps-gallery .card-bulletMessage > .card-demo-image {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  min-height: 0;
}
.archive-apps-gallery .card-demo-image.app-image-rotator {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
}
.archive-apps-gallery .app-image-rotator > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease-in-out;
}
.archive-apps-gallery .app-image-rotator > img.is-visible { opacity: 1; }
.archive-apps-gallery .tile-content { position: relative; z-index: 2; }
.archive-apps-gallery .card-bg { position: absolute; left: 0; bottom: 0; z-index: 0; display: block; width: 100%; height: auto; line-height: 0; }
.archive-apps-gallery .card-bg img { display: block; width: 100%; height: auto; max-width: none; }
.archive-apps-gallery .card-specmail .card-demo-video { position: absolute; left: 0; top: 50%; z-index: 3; display: block; width: 100%; max-width: none; height: auto; margin: 0; transform: translateY(-50%); object-fit: contain; opacity: 0; transition: opacity 180ms ease-out; }
.archive-apps-gallery .card-demo-video[hidden] { display: none; }
.archive-apps-gallery .card-demo-video.is-playing { opacity: 1; }
.archive-apps-gallery .card-specmail { isolation: isolate; background-color: transparent; background-image: none; }
@media (prefers-reduced-motion: reduce) {
  .archive-apps-gallery .app-image-rotator > img { transition-duration: 0ms; }
}
@media (max-width: 1068px) {
  .archive-apps-gallery .card-chiclet { width: 72px; height: 79px; }
  .archive-apps-gallery .card-heading { height: 79px; }
}
@media (max-width: 734px) {
  .archive-apps-gallery { --apps-margin-inline-end: 0px; }
}

/* This page's legacy footer containers keep a 1220px fixed width above 736px. */
@media only screen and (min-width: 737px) and (max-width: 1220px) {
  body:has(.archive-apps-gallery) .footer .container,
  body:has(.archive-apps-gallery) .footer .siteinfo { width: 100%; max-width: 100%; }
}

/* Four logo-derived colour blooms per card; translucent overlap blends into a tinted base. */
.archive-apps-gallery .card-clock {
  background-color: #e4c9c3;
  background-image: radial-gradient(ellipse 88% 70% at 5% 4%, rgba(213, 63, 72, .58) 0%, rgba(213, 63, 72, .28) 34%, transparent 78%), radial-gradient(ellipse 78% 84% at 94% 13%, rgba(83, 94, 104, .42) 0%, rgba(83, 94, 104, .18) 42%, transparent 82%), radial-gradient(ellipse 92% 75% at 74% 96%, rgba(177, 104, 98, .34) 0%, rgba(177, 104, 98, .14) 40%, transparent 80%), radial-gradient(ellipse 68% 82% at 21% 77%, rgba(129, 151, 163, .32) 0%, rgba(129, 151, 163, .12) 44%, transparent 82%);
}
.archive-apps-gallery .card-mover {
  background-color: #d5e0d5;
  background-image: radial-gradient(ellipse 83% 74% at 3% 4%, rgba(46, 139, 216, .54) 0%, rgba(46, 139, 216, .24) 38%, transparent 80%), radial-gradient(ellipse 78% 82% at 96% 18%, rgba(244, 155, 69, .48) 0%, rgba(244, 155, 69, .20) 40%, transparent 82%), radial-gradient(ellipse 92% 70% at 77% 100%, rgba(66, 190, 194, .40) 0%, rgba(66, 190, 194, .16) 42%, transparent 82%), radial-gradient(ellipse 74% 86% at 19% 77%, rgba(109, 157, 221, .38) 0%, rgba(109, 157, 221, .15) 42%, transparent 82%);
}
.archive-apps-gallery .card-specmail {
  background-color: #dfd3c7;
  background-image: radial-gradient(ellipse 88% 72% at 0% 2%, rgba(47, 137, 208, .52) 0%, rgba(47, 137, 208, .22) 38%, transparent 80%), radial-gradient(ellipse 78% 82% at 96% 12%, rgba(238, 153, 81, .48) 0%, rgba(238, 153, 81, .2) 40%, transparent 82%), radial-gradient(ellipse 92% 76% at 74% 100%, rgba(118, 170, 194, .40) 0%, rgba(118, 170, 194, .16) 42%, transparent 82%), radial-gradient(ellipse 72% 88% at 20% 72%, rgba(203, 177, 126, .36) 0%, rgba(203, 177, 126, .14) 44%, transparent 82%);
}
.archive-apps-gallery .card-bbs {
  background-color: #e6c9bd;
  background-image: radial-gradient(ellipse 86% 72% at 5% 2%, rgba(199, 42, 48, .56) 0%, rgba(199, 42, 48, .25) 36%, transparent 80%), radial-gradient(ellipse 82% 82% at 96% 17%, rgba(239, 125, 91, .48) 0%, rgba(239, 125, 91, .20) 42%, transparent 82%), radial-gradient(ellipse 92% 74% at 76% 100%, rgba(172, 73, 76, .34) 0%, rgba(172, 73, 76, .14) 42%, transparent 82%), radial-gradient(ellipse 72% 88% at 17% 75%, rgba(229, 176, 135, .42) 0%, rgba(229, 176, 135, .17) 44%, transparent 82%);
}
.archive-apps-gallery .card-backup {
  background-color: #d7d8d2;
  background-image: radial-gradient(ellipse 86% 72% at 1% 5%, rgba(42, 133, 212, .54) 0%, rgba(42, 133, 212, .23) 38%, transparent 80%), radial-gradient(ellipse 82% 82% at 96% 11%, rgba(241, 158, 69, .52) 0%, rgba(241, 158, 69, .22) 40%, transparent 82%), radial-gradient(ellipse 90% 76% at 74% 100%, rgba(55, 185, 198, .42) 0%, rgba(55, 185, 198, .16) 42%, transparent 82%), radial-gradient(ellipse 72% 88% at 18% 76%, rgba(117, 147, 199, .38) 0%, rgba(117, 147, 199, .15) 44%, transparent 82%);
}
.archive-apps-gallery .card-drivekit {
  background-color: #d4deda;
  background-image: radial-gradient(ellipse 86% 72% at 2% 2%, rgba(54, 181, 203, .52) 0%, rgba(54, 181, 203, .23) 38%, transparent 80%), radial-gradient(ellipse 80% 84% at 97% 14%, rgba(77, 118, 151, .44) 0%, rgba(77, 118, 151, .18) 42%, transparent 82%), radial-gradient(ellipse 92% 74% at 75% 100%, rgba(106, 188, 164, .38) 0%, rgba(106, 188, 164, .15) 42%, transparent 82%), radial-gradient(ellipse 74% 88% at 18% 76%, rgba(79, 147, 197, .38) 0%, rgba(79, 147, 197, .15) 44%, transparent 82%);
}
.archive-apps-gallery .card-dockclock {
  background-color: #dedac4;
  background-image: radial-gradient(ellipse 86% 74% at 2% 4%, rgba(161, 171, 74, .48) 0%, rgba(161, 171, 74, .20) 38%, transparent 80%), radial-gradient(ellipse 80% 82% at 97% 12%, rgba(69, 79, 75, .36) 0%, rgba(69, 79, 75, .14) 42%, transparent 82%), radial-gradient(ellipse 92% 76% at 75% 100%, rgba(207, 170, 85, .42) 0%, rgba(207, 170, 85, .17) 40%, transparent 82%), radial-gradient(ellipse 72% 88% at 18% 75%, rgba(109, 157, 110, .34) 0%, rgba(109, 157, 110, .13) 44%, transparent 82%);
}
.archive-apps-gallery .card-bulletMessage {
  background-color: #d6d9ec;
  background-image: radial-gradient(ellipse 88% 72% at 4% 2%, rgba(35, 139, 240, .56) 0%, rgba(35, 139, 240, .24) 38%, transparent 80%), radial-gradient(ellipse 80% 82% at 97% 14%, rgba(110, 92, 207, .42) 0%, rgba(110, 92, 207, .17) 42%, transparent 82%), radial-gradient(ellipse 92% 76% at 74% 100%, rgba(82, 195, 239, .44) 0%, rgba(82, 195, 239, .17) 42%, transparent 82%), radial-gradient(ellipse 72% 88% at 17% 74%, rgba(90, 124, 222, .40) 0%, rgba(90, 124, 222, .16) 44%, transparent 82%);
}
.archive-apps-gallery .chiclet-sprite { background: url("/apps/assets/images/home/original-app-icon-sprite.jpg") -90px -270px / 540px 360px no-repeat; }
@media (max-width: 1068px) { .archive-apps-gallery .chiclet-sprite { background-position: -72px -216px; background-size: 432px 288px; } }