/* An expansive product gallery with a card-to-sheet spatial transition. */
.product-showcase {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#1d1d1f;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
  overflow:hidden;
}
.product-showcase[open] {display:grid;place-items:center;}
.product-showcase::backdrop {background:rgba(0,0,0,.64);animation:showcase-backdrop-in .5s ease both;}
.product-showcase.is-closing::backdrop {animation:showcase-backdrop-out .4s ease both;}
.showcase-shell {
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(1440px,calc(100vw - 48px));
  height:min(1050px,calc(100svh - 48px));
  isolation:isolate;
}
.showcase-surface {position:absolute;inset:0;z-index:-1;border-radius:30px;background:#f5f5f7;transform-origin:center;}
.showcase-bar {position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex:none;min-height:82px;padding:0 46px;z-index:2;}
.showcase-platform {margin:0;font-size:15px;line-height:1.25;letter-spacing:-.025em;}
.showcase-platform strong {font-weight:700;}
.showcase-tools {display:flex;align-items:center;gap:28px;}
.showcase-navigation {display:flex;align-items:center;gap:8px;}
.showcase-position {font-size:11px;letter-spacing:.04em;font-variant-numeric:tabular-nums;min-width:49px;text-align:center;color:#444446;}
.showcase-position>span {color:#9b9b9e;margin-left:4px;}
.showcase-arrow,.showcase-close {display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;color:#454547;background:transparent;transition:background .2s,color .2s;}
.showcase-arrow:hover:not(:disabled) {background:#e7e7ea;color:#000;}
.showcase-arrow:disabled {opacity:.25;cursor:default;}
.showcase-arrow svg {width:17px;height:17px;stroke-width:1.6;}
.showcase-close {width:38px;height:38px;background:#e6e6e9;}
.showcase-close:hover {background:#dcdce0;color:#000;}
.showcase-close svg {width:18px;height:18px;stroke-width:1.8;}
.product-showcase button:focus-visible {outline:2px solid #1d1d1f;outline-offset:4px;}
.showcase-scroll {position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9b9bf transparent;padding:0 64px 26px;border-radius:0 0 30px 30px;}
.showcase-hero {display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.4fr);align-items:center;gap:40px;min-height:clamp(400px,55svh,640px);padding:16px 0 26px;}
.showcase-copy {position:relative;z-index:1;padding:0 0 24px 0;}
.showcase-category {font-size:13px;line-height:1.4;font-weight:500;letter-spacing:.015em;margin:0 0 30px;color:#7a7a80;}
.showcase-title {font-size:clamp(58px,6.4vw,96px);font-weight:600;line-height:.97;letter-spacing:-.065em;margin:0;}
.showcase-title>span {display:block;}
.showcase-title .showcase-brand-name {font-size:clamp(24px,2.5vw,35px);line-height:1.2;font-weight:500;letter-spacing:-.045em;margin-bottom:10px;}
.showcase-description {font-size:clamp(18px,1.6vw,24px);font-weight:400;line-height:1.45;letter-spacing:-.025em;color:#77777d;margin:26px 0 0;max-width:360px;}
.showcase-media {display:grid;place-items:center;min-width:0;height:clamp(360px,51svh,610px);margin:0;position:relative;overflow:visible;}
.showcase-image {display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;transform-origin:center;user-select:none;-webkit-user-drag:none;}
.showcase-features {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:30px 0 27px;margin:0;gap:38px;border-top:1px solid #d6d6db;}
.showcase-feature {position:relative;min-width:0;}
.showcase-feature-number {display:block;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#929298;margin-bottom:13px;}
.showcase-feature h3 {font-size:18px;line-height:1.2;letter-spacing:-.025em;font-weight:600;margin:0 0 9px;color:#28282b;}
.showcase-feature p {font-size:14px;line-height:1.5;letter-spacing:-.012em;color:#85858b;margin:0;max-width:270px;}
.showcase-footer {display:flex;align-items:center;justify-content:space-between;gap:22px;padding-top:11px;min-height:44px;}
.showcase-back {display:inline-flex;align-items:center;gap:9px;padding:9px 0;background:transparent;border:0;color:#6f6f76;font-size:12px;white-space:nowrap;}
.showcase-back:hover {color:#1d1d1f;}
.showcase-back svg {width:15px;height:15px;stroke-width:1.5;}
.showcase-tabs {display:flex;align-items:center;gap:5px;}
.showcase-tab {position:relative;background:transparent;color:#85858b;border:0;border-radius:100px;padding:8px 12px;font-size:11px;font-weight:400;line-height:1.3;transition:color .2s,background .2s;}
.showcase-tab:hover {color:#1d1d1f;background:#eaeaec;}
.showcase-tab[aria-current="true"] {color:#fff;background:#1d1d1f;}
.showcase-status {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
body.product-showcase-open {overflow:hidden;}
@keyframes showcase-backdrop-in {from{opacity:0}to{opacity:1}}
@keyframes showcase-backdrop-out {from{opacity:1}to{opacity:0}}
@media(min-width:1700px){.showcase-scroll{padding-left:80px;padding-right:80px}.showcase-hero{gap:56px}.showcase-features{gap:60px}}
@media(max-width:1100px){
  .showcase-shell{width:calc(100vw - 32px);height:calc(100svh - 32px)}
  .showcase-bar{padding:0 32px;min-height:72px}
  .showcase-scroll{padding:0 38px 24px}
  .showcase-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:26px;min-height:clamp(355px,53svh,560px)}
  .showcase-title{font-size:clamp(56px,7vw,78px)}
  .showcase-media{height:clamp(330px,50svh,520px)}
  .showcase-category{margin-bottom:23px}
  .showcase-features{gap:28px;padding-top:25px}
  .showcase-feature h3{font-size:16px}
  .showcase-feature p{font-size:13px}
  .showcase-tabs{gap:2px}.showcase-tab{padding:8px 9px}
}
@media(max-width:760px){
  .showcase-shell{width:calc(100vw - 24px);height:calc(100svh - 24px)}
  .showcase-surface{border-radius:24px}
  .showcase-bar{padding:0 22px;min-height:68px;gap:10px}
  .showcase-platform{font-size:11px;max-width:130px;line-height:1.4}
  .showcase-tools{gap:10px}.showcase-navigation{gap:0}
  .showcase-arrow{width:29px;height:32px}.showcase-close{width:33px;height:33px}
  .showcase-position{min-width:42px;font-size:10px}
  .showcase-scroll{padding:0 26px 22px;border-radius:0 0 24px 24px}
  .showcase-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:16px;padding:28px 0 26px}
  .showcase-copy{padding:0}
  .showcase-category{font-size:11px;margin-bottom:19px}
  .showcase-title{font-size:clamp(48px,11.5vw,76px);line-height:1}
  .showcase-title .showcase-brand-name{font-size:24px;margin-bottom:5px}
  .showcase-description{font-size:18px;line-height:1.45;margin-top:19px;max-width:none}
  .showcase-media{height:clamp(260px,40svh,380px);width:100%;padding:4px 0}
  .showcase-features{grid-template-columns:1fr;padding:0;gap:0}
  .showcase-feature{padding:22px 0;border-bottom:1px solid #d6d6db}
  .showcase-feature-number{position:absolute;left:0;top:25px;font-size:9px;margin:0}
  .showcase-feature h3{font-size:17px;margin-left:31px;margin-bottom:7px}
  .showcase-feature p{font-size:14px;margin-left:31px;max-width:none}
  .showcase-footer{display:block;padding-top:22px}
  .showcase-back{font-size:12px}
  .showcase-tabs{display:flex;justify-content:space-between;gap:0;margin:20px -10px 0}
  .showcase-tab{font-size:10px;padding:8px 9px}
}
@media(max-width:370px){
  .showcase-bar{padding:0 17px}.showcase-platform{max-width:90px;font-size:10px}.showcase-tools{gap:6px}
  .showcase-scroll{padding-left:21px;padding-right:21px}
  .showcase-title{font-size:48px}.showcase-description{font-size:17px}
  .showcase-media{height:260px}.showcase-tab{font-size:9px;padding:8px}
}
@media(prefers-reduced-motion:reduce){.product-showcase::backdrop,.product-showcase.is-closing::backdrop{animation:none}.product-showcase *{transition:none!important}}
.showcase-image{position:absolute;inset:0;min-width:0;min-height:0}