/* Shared matte phone shell, including both phones on the first screen. */
.phone,.hero-phones .phone{aspect-ratio:402/852;padding:5px;border:1px solid #626a73;border-radius:14% / 6.6%;background:#262b31;box-shadow:inset 0 0 0 1px #ffffff16,inset 0 0 0 3px #101317,0 12px 24px #0004;isolation:isolate}
.phone::before{content:'';position:absolute;left:-3px;top:17%;width:2px;height:26%;border-radius:2px;background:linear-gradient(to bottom,#626a73 0 8%,transparent 8% 20%,#626a73 20% 45%,transparent 45% 55%,#626a73 55% 80%,transparent 80%);pointer-events:none}
.phone .phone-screen{border:1px solid #080b0e;border-radius:12.5% / 5.9%;background:#101317}
@media(max-width:1024px){.phone-screen>img{--cover-zoom:var(--zt,var(--zoom,1));--cover-x:var(--xt,var(--x,0));--cover-y:var(--yt,var(--y,0))}}
@media(max-width:600px){.phone-screen>img{--cover-zoom:var(--zm,var(--zoom,1));--cover-x:var(--xm,var(--x,0));--cover-y:var(--ym,var(--y,0))}}
.featured-carousel{container-type:inline-size;min-width:0;width:100%;--visible:1;--card-gap:24px}
.featured-viewport{width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:16px 0 8px;outline-offset:4px}
.featured-carousel .featured-track,.featured-carousel .featured-track[data-count="1"]{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(5,auto);grid-auto-columns:calc((100% - (min(var(--visible),var(--design-count)) - 1)*var(--card-gap))/min(var(--visible),var(--design-count)));width:100%;max-width:none;column-gap:var(--card-gap);row-gap:14px;margin:0;align-items:stretch}
.featured-carousel .featured-track>.design-card{grid-row:1 / span 5;grid-column:auto;scroll-snap-align:start;scroll-snap-stop:normal;padding-bottom:12px;min-width:0}
.featured-carousel .featured-track .card-art{height:440px;padding:12px 6px;width:100%}
.featured-carousel .featured-track .card-art .phone{width:196px;max-width:100%}
.featured-carousel .featured-track h3{font-size:clamp(24px,2vw,29px)}
.featured-navigation{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:18px;min-height:48px}.featured-navigation[hidden]{display:none}
.featured-navigation button{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #b49a8680;border-radius:50%;background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer}.featured-navigation button:hover{background:#b49a8624}.featured-navigation button:disabled{opacity:.4;cursor:default}.featured-position{min-width:50px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
@container(min-width:540px){.featured-viewport{--visible:2}}
@container(min-width:800px){.featured-viewport{--visible:3}}
@container(min-width:1080px){.featured-viewport{--visible:4}}
@supports not (grid-template-rows:subgrid){.featured-carousel .featured-track{grid-template-rows:auto}.featured-carousel .featured-track>.design-card{grid-row:1;display:flex;flex-direction:column}.featured-carousel .featured-track .links{margin-top:auto}}
@media print{.featured-navigation{display:none}.featured-viewport{overflow:visible}.featured-track>[data-carousel-clone]{display:none}}