/* Scroll choreography: upright hero devices, a pinned left-hand phone stack,
   and flowing copy. Native sticky positioning keeps scrolling on the browser. */
.hero .app-name{margin:5px 0 12px}
.hero-devices{gap:30px;max-width:759px;margin-top:84px;padding-bottom:90px}
.hero-devices .device,.hero-devices .hero-center{width:calc((100% - 60px)/3);max-width:none;flex:none;transform:none}
.hero-left,.hero-right{transform:translateY(50px)}
.scroll-enhanced .hero-devices .device{will-change:transform,opacity}
.cosmos{background:#000}
#starfield{z-index:0}
.nebula{z-index:1;background:radial-gradient(ellipse 75% 52% at 50% 38%,#ed147365,transparent 73%),radial-gradient(ellipse 65% 58% at 84% 24%,#74244048,transparent 65%);filter:blur(26px)}
.cosmos:after{z-index:2;background:linear-gradient(180deg,#0000 28%,#0003 100%)}
.scroll-story{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:100px;align-items:start;margin-top:-100px;padding-block:90px 0}
/* The track alone determines the pin duration. The image leaves with its
   section, rather than remaining over the following full-width background. */
.story-visual{position:sticky;top:58px;height:calc(100svh - 58px);display:flex;align-items:center;justify-content:center;pointer-events:none}
.story-phones{position:relative;width:min(100%,425px,calc(80svh * 1142 / 2329));aspect-ratio:1142/2329;isolation:isolate}
.story-phones:before{content:'';position:absolute;inset:15% -35%;background:radial-gradient(ellipse,#ed14730d,transparent 65%);z-index:-1}
.story-phone{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s cubic-bezier(.65,0,.35,1);filter:drop-shadow(0 18px 25px #0005)}
.story-phone.is-active{opacity:1}
.story-track{position:relative;min-width:0;padding-block:35svh}
.story-step{display:flex;align-items:center;padding:0}
.story-step+.story-step{margin-top:50svh}
.story-copy{max-width:475px;will-change:translate,opacity}
.story-copy h2{color:var(--pink);font-size:clamp(38px,3.6vw,50px);line-height:1.06;margin-bottom:28px;letter-spacing:-.045em}
.story-copy>p:last-child{font-size:21px;line-height:1.4;color:#f2eaf0;font-weight:500;margin-bottom:0}
.story-copy .eyebrow{color:#f6b9d3}
.abilities.wrap{position:relative;width:100%;padding:120px max(32px,calc((100% - 1060px)/2));background:#1d1d1f;isolation:isolate}
.ability-grid p{color:#d2d2d7}
.auction-showcase .device,.mastery-showcase .device,.wide-showcase .device{transform:none}
.details-section .showcase-grid{display:block}
.details-section .showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:85px;min-height:670px;padding:85px 0;border:0;border-radius:0;background:none;overflow:visible}
.details-section .showcase-copy{grid-column:2;grid-row:1;padding:0}
.details-section .showcase .device{grid-column:1;grid-row:1;width:min(340px,100%);max-width:100%;margin:0 auto;transform:none}
.details-section .showcase h3{font-size:clamp(38px,4vw,54px);max-width:460px}
.details-section .showcase p:not(.eyebrow){font-size:19px;line-height:1.5;max-width:440px}
.details-section .mastery-showcase,.details-section .wide-showcase{background:none}
.nebula{opacity:.85}
@media(max-width:1000px){.scroll-story{gap:65px}.story-copy h2{font-size:43px}.story-copy>p:last-child{font-size:19px}.details-section .showcase{gap:50px;min-height:610px}.details-section .showcase .device{width:min(290px,100%)}}
@media(max-width:734px){
  .hero{padding-top:35px}
  .hero-devices{position:relative;left:50%;width:739px;max-width:none;margin:71px 0 0;padding:0 0 110px;gap:20px;transform:translateX(-50%)}
  .hero-devices .device,.hero-devices .hero-center{width:233px;max-width:none;flex:0 0 233px}
  .abilities.wrap{padding:80px 20px}
  .details-section .showcase{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:30px;padding:75px 0}
  .details-section .showcase h3{font-size:36px}
  .details-section .showcase p:not(.eyebrow){font-size:16px}
  .details-section .showcase .device{width:min(245px,75vw);margin:0 auto}
}
/* Portrait uses the browser's compositor for the phone pin. JS-driven
   transforms visibly judder during momentum scrolling on iPhone. */
@media(max-width:734px) and (orientation:portrait){
  .scroll-story.wrap{display:grid;grid-template-columns:minmax(0,1fr);width:100%;margin-top:0;padding:120px 0 0}
  .story-visual{grid-area:1/1;position:sticky;top:44svh;align-self:start;width:70%;height:100svh;margin:330px 0 0 15%;z-index:3;align-items:center;transform:none}
  .story-phones{width:90%;height:auto;margin-top:10svh}
  .story-track{grid-area:1/1;padding:0 0 95svh}
  .story-step{min-height:0;padding:0;justify-content:center}
  .story-step+.story-step{margin-top:15svh}
  .story-copy{width:85%;max-width:none;margin:0;text-align:left;transition:opacity .5s cubic-bezier(.65,0,.35,1)}
  .story-copy h2{font-size:34px;line-height:44px;letter-spacing:-.015em;margin-bottom:25px}
  .story-copy>p:last-child{font-size:18px;line-height:32px;font-weight:600}
  .story-copy .eyebrow{font-size:10px;margin-bottom:16px}
}
@media(max-height:650px) and (min-width:735px){.story-copy h2{font-size:36px}.story-copy>p:last-child{font-size:17px}}

/* FAQ: a light chevron and a measured tray, matching the Apple accordion. */
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-right:2px}
.faq summary::after{content:'';position:static;flex:none;width:11px;height:11px;margin-right:4px;border-right:2px solid #86868b;border-bottom:2px solid #86868b;transform:rotate(45deg) translateY(-2px);transition:transform .32s cubic-bezier(.2,1,.68,1),border-color .18s;transform-origin:center}
.faq details[open] summary::after{content:''}
.faq details.is-expanded summary::after{transform:rotate(225deg) translateY(-2px)}
.faq summary:hover::after{border-color:#d2d2d7}
.faq-answer{display:flow-root;overflow:hidden}
.faq-answer p{margin:17px 0 10px;max-width:92%}

/* Apple puts its region choice at the foot of the page. */
.footer-locale{display:flex;justify-content:flex-end;margin:12px 0 25px}
.locale-selector{position:relative}
.locale-selector button{font:inherit;color:#d2d2d7;background:none;border:0;cursor:pointer}
#language{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:4px 0;font-size:12px}
#language:hover,.locale-menu button:hover{color:#fff}
.locale-globe{position:relative;width:15px;height:15px;border:1px solid currentColor;border-radius:50%;font-size:0}
.locale-globe::before{content:'';position:absolute;inset:-1px 3px;border:1px solid currentColor;border-radius:50%}
.locale-globe::after{content:'';position:absolute;left:0;right:0;top:6px;border-top:1px solid currentColor}
.locale-chevron{width:6px;height:6px;margin:0 2px 3px 3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
#language[aria-expanded="true"] .locale-chevron{transform:rotate(225deg);margin-top:5px;margin-bottom:0}
.locale-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:25;min-width:190px;max-height:min(320px,70vh);overflow-y:auto;padding:6px;background:#2d2d30;border:1px solid #ffffff2b;border-radius:10px;box-shadow:0 14px 35px #0008}
.locale-menu[hidden]{display:none}
.locale-menu button{display:block;width:100%;padding:9px 12px;text-align:left;font-size:13px;border-radius:6px}
.locale-menu button[aria-pressed="true"]{color:#fff;background:#424247}
@media(max-width:700px){.footer-locale{justify-content:flex-start;margin:20px 0}}
@media(max-width:734px) and (orientation:portrait){.story-copy h2{overflow-wrap:anywhere}.story-copy>p:last-child{overflow-wrap:break-word}}

/* ImageGen artwork is used as a luminance mask, so its black canvas is invisible. */
.button{color:#fff}
.feature-symbol{display:block;width:48px;height:48px;margin:0 0 22px;background:#f5f5f7;-webkit-mask-image:var(--icon-image);mask-image:var(--icon-image);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-mode:luminance;mask-mode:luminance}
.ability-grid h3,.details-section .showcase h3{color:var(--pink)}
.weekly-link{display:inline-block;margin-top:16px;color:#ff96c5;font-size:14px;font-weight:700;text-underline-offset:4px;text-decoration:underline}.weekly-link:hover{color:#fff}
.details-section{padding-top:95px;padding-bottom:0}
.details-section .section-title{margin-bottom:56px}
.details-section .showcase-grid{display:block}
.details-section .showcase{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:80px;min-height:700px;padding:52px 0;border:0;border-radius:0;background:transparent;overflow:visible}
.details-section .showcase:nth-child(odd){z-index:0;background:#1d1d1f}
.details-section .showcase:nth-child(odd)::before{content:"";position:absolute;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);background:#1d1d1f;z-index:-1}
.details-section .showcase-copy{grid-row:1;padding:0}
.details-section .auction-showcase .showcase-copy,.details-section .wide-showcase .showcase-copy{grid-column:1}
.details-section .mastery-showcase .showcase-copy{grid-column:2}
.details-section .showcase .device{grid-row:1;width:min(315px,100%);height:600px;max-width:100%;margin:0 auto;object-fit:contain;transform:none}
.details-section .auction-showcase .device,.details-section .wide-showcase .device{grid-column:2}
.details-section .mastery-showcase .device{grid-column:1}
.details-section .showcase h3{font-size:clamp(38px,4vw,52px);max-width:460px}
.details-section .showcase p:not(.eyebrow){color:#e5e5e7;font-size:19px;line-height:1.5;max-width:440px}
@media(max-width:1000px){.details-section .showcase{gap:45px;min-height:640px}.details-section .showcase .device{width:min(280px,100%);height:550px}}
@media(max-width:734px){
  .feature-symbol{width:44px;height:44px;margin-bottom:18px}
  .details-section{padding-top:70px}
  .details-section .section-title{margin-bottom:36px}
  .details-section .showcase{display:flex;flex-direction:column;align-items:center;gap:34px;min-height:0;padding:72px 0 0}
  .details-section .showcase-copy{width:100%;padding:0 6px;text-align:center}
  .details-section .showcase h3{font-size:clamp(31px,8.3vw,39px);margin-inline:auto}
  .details-section .showcase p:not(.eyebrow){font-size:17px;line-height:1.45;margin-inline:auto}
  .details-section .showcase .device{width:min(245px,75vw);height:440px;margin:0 auto;object-fit:cover;object-position:top}
}