/* Thin, even desktop screenshot frames; native rounded app corners retained. */
:root{--shot-frame:#292929;--shot-outline:#ffffff26}
:root[data-theme=light]{--shot-frame:#ececec;--shot-outline:#00000015}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--shot-frame:#ececec;--shot-outline:#00000015}}
.wide-shot,.feature-row>picture[data-product-shot],.feature-row>figure:has(picture[data-product-shot]),.bp-shot{padding:12px;background:var(--shot-frame);border:1px solid var(--line);border-radius:18px;overflow:visible}
.wide-shot picture[data-product-shot]{max-width:none}
picture[data-product-shot] img{display:block;width:100%;height:auto;border-radius:10px;outline:1px solid var(--shot-outline);outline-offset:-1px}
.wide-shot picture[data-product-shot],.feature-row picture[data-product-shot],.bp-shot picture[data-product-shot]{filter:drop-shadow(0 12px 18px #0002)}
.product-card:has(picture[data-product-shot]){height:auto}
.card-visual:has(picture[data-product-shot]){display:block;flex:none;padding:12px;background:var(--shot-frame)}
.card-visual picture[data-product-shot]{transform:none}
.card-visual.sequence picture:nth-child(2){left:12px;top:12px;width:calc(100% - 24px)}
.sequence picture:nth-child(2){width:calc(100% - 24px)}
.visual-menu-previews:has(picture[data-product-shot]){padding:8px;background:var(--shot-frame)}
.bp-hero:after{content:'';position:absolute;z-index:1;left:0;right:0;bottom:-1px;height:clamp(140px,24vh,240px);background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.bp-hero-inner{position:relative;z-index:2}
.bridge-page .bp-cta-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.bridge-page .bp-hero .bp-cta-row .button:not(.bp-btn--primary){display:inline-flex;visibility:visible;color:#fff;border:1px solid #ffffffa0;background:#0002}
.bp-phone-shot{max-width:310px;filter:drop-shadow(0 18px 30px #0003)}
.bp-phone-shot img{border:0;border-radius:44px;outline:1px solid #ffffff35;outline-offset:-1px;box-shadow:none}
html[data-input=pointer] .header :focus{outline:none!important;box-shadow:none!important}
html[data-input=keyboard] .header :focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.news-featured>a:has(picture[data-product-shot]),.news-recent article>a:first-child{display:block;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--shot-frame)}
.news-recent picture[data-product-shot]{display:block}
.news-recent h3{font-weight:400}
.post-chevron{display:inline-block;vertical-align:middle;margin-left:5px;opacity:.65;flex:none}
@media(max-width:800px){
 .wide-shot,.feature-row>picture[data-product-shot],.feature-row>figure:has(picture[data-product-shot]),.bp-shot{padding:8px;border-radius:14px}
 .header .mobile-access-menu>summary{padding:18px 14px!important;margin:0;font-size:17px;line-height:1.5;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--fg);min-height:56px}
 .news-recent{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:36px}
 .news-recent article{min-width:0}
 .news-recent article>a:first-child{width:100%;padding:0}
 .news-recent img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
 .news-recent .eyebrow{font-size:12px;font-weight:400;line-height:1.5;margin:16px 0 10px;letter-spacing:0;text-transform:none}
 .news-recent h3,.news-recent h3 a{font-size:22px!important;font-weight:400;line-height:1.35!important;margin:0}
 .news-featured h2{font-size:28px!important}
 .news-all h3{font-size:22px!important;line-height:1.35!important;font-weight:400}
 .news-all time{font-size:12px;color:var(--muted)}
 .reference-content :is(.help-collections,.help-collections-grid,.help-collection-grid,.help-popular-grid,.learn-grid,.docs-directory,.docs-minicards,.resource-grid,.guide-index){grid-template-columns:minmax(0,1fr)!important;gap:24px}
 .reference-content :is(.help-collection-card,.help-article-card,.docs-directory>article,.docs-minicards>a,.learn-card,.resource-card){padding:20px 16px;min-width:0;border-radius:16px}
 .reference-content :is(.help-collection-card h2,.help-article-card h3,.docs-directory h2,.docs-minicards h3,.learn-card h2,.resource-card h2){font-size:22px!important;line-height:1.35!important;font-weight:400}
 .bp-phone-shot{max-width:270px}
}
/* Closing CTA follows the page theme; its buttons share the same color context. */
.bridge-page .bp-close{background:var(--bg);color:var(--fg);border-top-color:var(--line)}
.bridge-page .bp-close p{color:var(--muted)}
.bridge-page .bp-close .bp-btn{color:var(--fg);border-color:currentColor;background:transparent}
.bridge-page .bp-close .bp-btn--primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}