/* Same glass surface, rounded corners and circular flags as the feature menu. */
.language-menu{position:relative;margin-left:8px;flex:none}
.language-menu summary{display:flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:4px 0;list-style:none;cursor:pointer;color:inherit}
.language-menu summary::-webkit-details-marker{display:none}
.language-menu .flag{display:block;box-sizing:border-box;flex:0 0 32px;width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(0,0,0,.22)}
.language-menu summary svg{flex:0 0 16px;transition:transform .2s ease}
.language-menu[open] summary svg{transform:rotate(180deg)}
.language-menu__links{box-sizing:border-box;position:absolute;z-index:70;top:100%;right:-12px;width:420px;max-width:calc(100vw - 32px);max-height:min(560px,70dvh);overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:12px 16px;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-sm,16px);background:rgba(33,24,61,.9);backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);box-shadow:0 12px 32px rgba(0,0,0,.3)}
body.sip .language-menu__links{background:rgba(14,43,87,.9)}
body.opsino .language-menu__links{background:rgba(50,41,12,.9)}
body.studio .language-menu__links{background:rgba(25,27,31,.94)}
.language-menu__links>a,.language-menu__links>.language-pending{display:flex!important;align-items:center;gap:10px;min-height:48px;padding:6px 4px!important;line-height:1.3;white-space:normal!important;font-size:15px;text-decoration:none;border-radius:8px;min-width:0;color:inherit}
.language-menu__links>a:hover,.language-menu__links>a[aria-current]{background:rgba(255,255,255,.12);text-decoration:none}
.language-menu__links>a[aria-current]{font-weight:700}
.language-pending{opacity:.48;cursor:default}
.language-menu summary:focus-visible,.language-menu__links>a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:900px){
 body:not(.studio) .language-menu{width:100%;margin-left:0}
 body:not(.studio) .language-menu__links{box-sizing:border-box;position:static;width:100%;max-width:100%;max-height:320px;grid-template-columns:1fr;padding:4px 12px;margin:0 0 8px;border-radius:var(--radius-sm,14px)}
}
@media(max-width:760px){
 body.studio .language-menu{width:100%;margin-left:0}
 body.studio .language-menu__links{box-sizing:border-box;position:static;width:100%;max-width:100%;max-height:320px;grid-template-columns:1fr}
 body.studio .nav-links.open{max-height:calc(100dvh - 110px);overflow:auto}
}
@media(prefers-reduced-motion:reduce){.language-menu summary svg{transition:none}}

/* Translated navigation can wrap at tablet widths; keep space beside the brand. */
html:not(:lang(de)):not(:lang(en)) body > header .nav{column-gap:20px}

/* Display contours from Xcode's iPhone 17/18 Pro and Pro Max framebuffer masks.
   Only website rendering is clipped; the full-resolution captures stay rectangular. */
html img[data-iphone-screen] {
  border-radius: 0;
  -webkit-mask-image: var(--iphone-display-mask);
  mask-image: var(--iphone-display-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}
html img[data-iphone-screen="pro"] { --iphone-display-mask: url('/assets/device-masks/iphone-pro.svg'); }
html img[data-iphone-screen="pro-max"] { --iphone-display-mask: url('/assets/device-masks/iphone-pro-max.svg'); }

/* Let native screen contours define the silhouette, including hover overlays. */
html .phone:has(> img[data-iphone-screen]),
html .screenshot:has(> img[data-iphone-screen]) {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.35));
}
html :is(.phone,.screenshot):has(> img[data-iphone-screen="pro"]) {
  aspect-ratio: 1206 / 2622;
  --iphone-display-mask: url('/assets/device-masks/iphone-pro.svg');
}
html :is(.phone,.screenshot):has(> img[data-iphone-screen="pro-max"]) {
  aspect-ratio: 1320 / 2868;
  --iphone-display-mask: url('/assets/device-masks/iphone-pro-max.svg');
}
html .screenshot:has(> img[data-iphone-screen]) .screenshot-text {
  border-radius: 0;
  -webkit-mask-image: var(--iphone-display-mask);
  mask-image: var(--iphone-display-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
html .screenshot:has(> img[data-iphone-screen]):focus-visible {
  outline: 3px solid var(--ring, #fff);
  outline-offset: 5px;
}