/* 3D and interactive parts of the product pages. Uses the tokens from site.css. --acc is set per page. */
.dev-pixel.r916 img{aspect-ratio:9/16}

/* A store picture has its own headline, so it shows without a device frame */
.dev.plain{background:none;box-shadow:none;border-radius:0}
.dev.plain::before,.dev.plain::after{display:none}
.dev.plain img,.dev.plain .screen img{width:100%;margin:0;aspect-ratio:auto;object-fit:contain;border-radius:14px;box-shadow:0 26px 50px -24px rgba(5,10,30,.55),0 0 0 1px rgba(14,23,48,.08)}
.dev-mac.plain .screen{padding:0;background:none;box-shadow:none;border-radius:0}
.dev-mac.plain .base{display:none}

/* Feature phones: a soft glow behind, tilt with the pointer, swing in on scroll */
.feature .f-media{perspective:1200px}
.feature .f-media::before{content:'';position:absolute;width:min(420px,84%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc,var(--hub)) 26%,transparent),transparent 68%);pointer-events:none}
.feature .f-media .dev{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.feature .f-media.mo-pre .dev{transform:rotateY(32deg) translateY(36px) scale(.94)}
.feature.flip .f-media.mo-pre .dev{transform:rotateY(-32deg) translateY(36px) scale(.94)}

/* Tour: buttons on one side, a phone that turns on the other */
.tour{background:var(--surface);overflow:hidden}
.tour-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.tour-list{display:grid;gap:8px;margin-top:1.6rem}
.tour-btn{position:relative;display:block;width:100%;text-align:left;font:inherit;color:inherit;background:transparent;border:1px solid transparent;border-radius:var(--radius);padding:13px 18px;cursor:pointer;overflow:hidden;transition:background .25s,border-color .25s}
.tour-btn b{display:block;font-size:1.08rem;font-weight:600}
.tour-btn span{display:block;color:var(--ink-2);font-size:.95rem;line-height:1.45;margin-top:2px}
.tour-btn:hover{background:rgba(255,255,255,.65)}
.tour-btn[aria-selected=true]{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.tour-btn[aria-selected=true] b{color:var(--acc,var(--hub))}
.tour-btn:focus-visible{outline:2px solid var(--acc,var(--hub));outline-offset:2px}
.tour-btn .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--acc,var(--hub));transform:scaleX(0);transform-origin:left;display:none}
.tour.auto .tour-btn[aria-selected=true] .bar{display:block;animation:tourbar 5.5s linear forwards}
.tour.paused .tour-btn .bar{animation-play-state:paused}
@keyframes tourbar{to{transform:scaleX(1)}}
.tour-stage{position:relative;display:grid;place-items:center;perspective:1300px;padding:18px 0}
.tour-stage::before{content:'';position:absolute;width:min(480px,96%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc,var(--hub)) 30%,transparent),transparent 68%)}
.tour-phone{width:min(310px,72%);transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) - 9deg));transition:transform .5s var(--ease);transform-style:preserve-3d}
.tour-screen{position:relative;width:94%;margin:3%;aspect-ratio:9/16;overflow:hidden;border-radius:8.5%/4.8%;background:#ECEFF2}
.tour-phone.dev img{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;border-radius:0;opacity:0;transform:translateX(9%) scale(.97);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.tour-phone.dev img.on{opacity:1;transform:none}

/* Language chips */
.tour-langs .tour-list{display:flex;flex-wrap:wrap;gap:8px}
.tour-langs .tour-btn{width:auto;padding:8px 16px;border-color:var(--line);background:#fff;border-radius:999px}
.tour-langs .tour-btn b{font-size:1rem}
.tour-langs .tour-btn .bar{display:none!important}
.tour-langs .tour-btn[aria-selected=true]{background:var(--acc,var(--hub));border-color:transparent;box-shadow:none}
.tour-langs .tour-btn[aria-selected=true] b{color:#fff}
.lang-all{margin-top:1.3rem;color:var(--ink-2);font-size:.98rem;line-height:1.7;max-width:60ch}

/* PassB looks */
.looks-sec{background:linear-gradient(150deg,#241A2E,#4A3460);color:#fff;overflow:hidden}
.looks-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.looks-sec h2{color:#fff}.looks-sec .lead{color:rgba(255,255,255,.82)}
.look-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:1.6rem}
.look-pick{display:flex;align-items:center;gap:10px;font:inherit;font-weight:500;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 12px;cursor:pointer;transition:background .2s,border-color .2s}
.look-pick i{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.look-pick:hover{background:rgba(255,255,255,.15)}
.look-pick[aria-pressed=true]{background:rgba(255,255,255,.2);border-color:#D4B5EF}
.look-pick:focus-visible,.look-shape button:focus-visible,.look-card:focus-visible{outline:2px solid #fff;outline-offset:3px}
.look-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:1.1rem}
.look-shape{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.1)}
.look-shape button{font:inherit;color:#fff;background:none;border:0;border-radius:999px;padding:7px 18px;cursor:pointer}
.look-shape button[aria-pressed=true]{background:#fff;color:#2c2038}
.look-plan{font-size:.95rem;color:#D4B5EF}
.look-stage{display:grid;place-items:center;perspective:1400px;min-height:clamp(380px,44vw,520px)}
.look-card{position:relative;display:block;width:min(500px,100%);aspect-ratio:560/350;padding:0;background:none;border:0;cursor:pointer;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s var(--ease),width .5s var(--ease);transform-style:preserve-3d}
.look-card.tall{width:min(320px,74%);aspect-ratio:420/600}
.look-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .85s var(--ease)}
.look-card.flipped .look-in{transform:rotateY(180deg)}
.look-in img{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;box-shadow:0 44px 70px -30px rgba(0,0,0,.65)}
.look-in .look-back{transform:rotateY(180deg)}
.look-hint{text-align:center;margin-top:1rem;font-size:.92rem;color:rgba(255,255,255,.75)}

.yt{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,#1F2A35,var(--acc,#7B5A9E));box-shadow:var(--shadow)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font:inherit;font-weight:600;font-size:1.1rem;color:#fff;background:none;border:0;cursor:pointer}
.yt-play i{width:76px;height:76px;border-radius:50%;background:#fff;clip-path:circle(50%);position:relative}
.yt-play i::after{content:'';position:absolute;left:31px;top:23px;border-style:solid;border-width:15px 0 15px 24px;border-color:transparent transparent transparent #4A3460}
.yt-play:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.yts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.yts.one{max-width:880px}
.yt-item{margin:0}
.yt-item figcaption{margin-top:.7rem;font-weight:600;color:var(--ink)}
.yt-item figcaption a{color:inherit}
.yt-note{margin-top:.8rem;font-size:.9rem;color:var(--ink-3)}

.watch-pic{position:relative;width:min(300px,70%)}
.watch-pic img{display:block;width:100%;height:auto;border-radius:22%;box-shadow:var(--shadow)}

/* Home ring */
.whatsnew{background:linear-gradient(160deg,#101a2b,#1f2a35 55%,#2a3744);color:#fff;overflow:hidden}
.whatsnew h2{color:#fff}.whatsnew .lead{color:rgba(255,255,255,.8)}
.ring-stage{--w:clamp(150px,17vw,205px);position:relative;height:calc(var(--w) * 1.92);perspective:1300px;margin:2.4rem 0 1.4rem;cursor:grab;touch-action:pan-y;user-select:none}
.ring-stage:active{cursor:grabbing}
.ring{position:absolute;left:50%;top:0;width:0;height:100%;transform-style:preserve-3d}
.ring-item{position:absolute;left:calc(var(--w) / -2);top:0;width:var(--w);display:block}
.ring-item:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:12%}
.ring-item .dev{pointer-events:none}
.ring-foot{display:flex;align-items:center;justify-content:center;gap:18px;text-align:center}
.ring-cap{flex:0 1 560px;min-height:6.2rem}
.ring-cap b{display:block;font-size:1.3rem;font-weight:600}
.ring-cap span{display:block;color:rgba(255,255,255,.8);margin:.25rem 0 .4rem}
.ring-cap a{color:var(--cyan);font-weight:500}
.ring-btn{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:1.25rem;line-height:1;cursor:pointer}
.ring-btn:hover{background:rgba(255,255,255,.18)}
.ring-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:860px){
  .tour-grid,.looks-grid{grid-template-columns:minmax(0,1fr)}
  .tour-stage{order:-1}
  .tour-phone{width:min(240px,62%)}
  .tour:not(.tour-langs) .tour-list{display:flex;gap:10px;overflow-x:auto;padding:0 2px 8px;scroll-snap-type:x proximity}
  .tour:not(.tour-langs) .tour-btn{flex:none;width:230px;scroll-snap-align:start;border-color:var(--line);background:#fff}
  .look-stage{min-height:330px;order:-1}
  .look-picks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ring-foot{flex-wrap:wrap}.ring-cap{order:-1;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .feature .f-media .dev,.tour-phone,.tour-phone.dev img,.look-in,.look-card{transition:none}
}