/* Shared accessibility foundation. Preserve the storefront's visual identity. */
:root{--muted:#a9b7c1}
html{scroll-padding-bottom:130px}
main:focus{outline:none}
:focus-visible{outline:3px solid #b9edff;outline-offset:3px}
a,button,input,select,summary,[tabindex]{scroll-margin-block:170px 140px}
.skip-link{z-index:1000;min-height:44px}
button,input,select,summary{min-height:44px}
.icon-button,.compare-toggle,.circle-link{min-width:44px;min-height:44px}
input::placeholder{color:#a9b7c1;opacity:1}
input,select{border-color:#607381}
.accordion summary,.text-button,.text-link{min-height:44px}
.fine-print{font-size:.8125rem;color:#b0bec8}
.media-description{font-size:1rem;line-height:1.7;margin-bottom:20px;color:#d0dbe2}
.media-description+video{width:100%;max-height:65vh}
.accessibility-statement{max-width:900px;padding-top:0}
.accessibility-statement h2{font-size:1.6rem;margin:32px 0 14px}
.accessibility-statement p,.accessibility-statement li{font-size:1rem;line-height:1.75;max-width:70ch}
.accessibility-statement p+p{margin-top:16px}
.accessibility-statement li{margin:10px 0}
.accessibility-statement a{text-decoration:underline;text-underline-offset:4px}
.comparison-identity .motion-toggle{font:12px MGDisplay,Arial,sans-serif;letter-spacing:0;text-transform:none;border:1px solid #526978;border-radius:4px;padding:7px 12px;min-height:44px;color:#d8e6ee;white-space:normal}
.comparison-desktop-copy{color:#a7bbc8}
.comparison-description{padding:22px 28px;background:#111b23;color:#c7d7e1;max-width:1363px;margin:auto;line-height:1.7}
.comparison-description h3{font-size:16px;color:#f1f4f5;margin-bottom:8px}
.comparison-description p{font-size:14px;max-width:90ch}
.comparison-description p+p{margin-top:8px}
.table-scroll{max-width:100%;overflow:auto}
.dialog{overflow:auto;overscroll-behavior:contain}
.dialog-head{position:relative}
.dialog-head h2{overflow-wrap:anywhere}
.dialog-head .icon-button{flex-shrink:0}
body.motion-off *,body.motion-off *:before,body.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.motion-off .reveal{opacity:1!important;transform:none!important}
@media(max-width:740px){
 .comparison-identity .comparison-desktop-copy{display:none}
 .site-comparison-bar{padding-inline:8px;gap:5px;grid-template-columns:auto 1fr auto}
 .comparison-switch{justify-self:center}
 .comparison-switch button{min-width:76px;min-height:44px;font-size:11px}
 .comparison-identity .motion-toggle{font-size:11px;padding:5px 7px;max-width:75px}
 .comparison-live{min-width:28px}
 .site-comparison-bar{height:60px}
 :root{--comparison-height:60px}
 .header{padding-inline:12px;gap:8px}
 .header-actions{gap:0}
 .logo img{width:120px}
 .account-action{display:none}
 .hero h1{white-space:normal}
 .hero-buttons{flex-wrap:wrap;gap:12px}
 .film-button{font-size:12px;min-height:44px;text-align:left}
 .catalog-toolbar,.catalog-meta,.catalog-tools,.shop-toolbar,.shop-meta{flex-wrap:wrap;gap:12px}
 .catalog-search{min-width:0}
 .catalog-meta label{font-size:11px}
 .dialog-head .eyebrow{font-size:11px}
 .dialog-body{overflow-wrap:anywhere}
 .build-topbar{height:auto;min-height:60px;flex-wrap:wrap;padding-block:8px}
 .build-topbar>div{flex-wrap:wrap}
 .build-topbar .text-button{font-size:12px}
 .build-topbar>div:nth-child(2)>.text-button:last-child{display:inline-flex}
 .config-header>p,.config-intro-meta,.config-section-heading p,.config-section-heading .eyebrow{font-size:12px}
 .original-site-heading{max-height:50svh;overflow:auto}
 .original-site-title{flex-wrap:wrap}
 .comparison-description{padding:20px 16px}
 .build-summary .summary-row{flex-wrap:wrap;gap:8px}
}
/* At high zoom or short heights, document flow keeps controls reachable. */
@media(max-width:480px),(max-height:650px){
 .header,.build-page .header,.build-topbar,.scroll-builder .build-visual,.config-jump{position:relative!important;top:auto!important}
 .scroll-builder .build-visual{height:430px;min-height:430px;max-height:none;z-index:1}
 .config-section,.configuration-review{scroll-margin-top:80px}
 .build-bottom{position:relative!important;height:auto;min-height:100px;flex-wrap:wrap;padding:16px;gap:16px}
 .build-page{padding-bottom:0}
 html{scroll-padding-top:80px;scroll-padding-bottom:30px}
 a,button,input,select,summary,[tabindex]{scroll-margin-block:85px 30px}
 .mobile-menu{max-height:70svh}
 .build-page .component-callout{display:block;max-width:calc(100% - 40px)}
 .build-page .component-callout p{font-size:12px}
 .build-page .visual-instructions{font-size:11px}
 .config-location{max-width:100%}
 .hero-top{position:relative;top:auto;padding-top:20px;flex-wrap:wrap;gap:8px}
 .hero-top .muted{display:none}
 .hero-copy{padding-top:35px}
}
@media(forced-colors:active){
 :focus-visible{outline:3px solid Highlight}
 button,input,select,summary,.button{border:1px solid ButtonText}
 [aria-checked=true],[aria-pressed=true]{outline:2px solid Highlight;outline-offset:-3px}
 .part-check,.live-dot,.comparison-dot{background:Highlight;forced-color-adjust:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.studio-navigation{position:absolute;right:25px;bottom:32px;z-index:6;max-width:calc(100% - 50px);background:#14232d;border:1px solid #6e8b9c;border-radius:5px;color:#e1eff6;font-size:12px}
.studio-navigation summary{cursor:pointer;padding:10px 13px;line-height:24px;min-height:44px}
.studio-navigation[open]{inset:78px 14px 24px;max-width:none;overflow:auto;overscroll-behavior:contain;box-shadow:0 8px 24px #0008}
.studio-navigation-panel{padding:0 14px 14px;display:grid;gap:12px}
.studio-navigation-panel button{min-height:44px;border:1px solid #7693a5;border-radius:3px;padding:8px 12px;font-size:13px;color:#e1eff6}
.studio-directions,.studio-navigation-zoom{display:flex;gap:8px;flex-wrap:wrap}
.studio-directions button{min-width:44px}
.studio-navigation-panel label{display:grid;gap:8px;font-size:13px}
.studio-navigation-panel select{width:100%;font-size:14px;max-width:100%}
.studio-navigation-panel p{font-size:13px;line-height:1.65;color:#bcd0dd}
.studio-controls button,.studio-dialog .studio-controls button{min-height:44px;min-width:40px;font-size:12px;padding:7px 10px}
.studio-tools button,.studio-dialog .studio-tools button{font-size:19px}
.studio-angles{flex-wrap:wrap;bottom:85px}
.studio-angles>div{flex-wrap:wrap}
.studio-angles button,.studio-dialog .studio-angles button{font-size:12px;min-height:40px;min-width:40px}
.studio-reveal{min-height:44px;font-size:12px}
.assembly-canvas:focus-visible{outline:3px solid #b9edff;outline-offset:-4px}
.studio-caption{bottom:85px}
.studio-details{z-index:5;bottom:132px;font-size:14px;overflow:auto}
.studio-details p,.studio-details small{font-size:13px;line-height:1.6}
.studio-details strong{font-size:18px}
@media(max-width:740px){
 .studio-controls{left:12px;right:12px;gap:4px}
 .studio-controls button,.studio-dialog .studio-controls button{padding:6px;min-width:36px;font-size:11px}
 .studio-tools button{font-size:18px}
 .studio-navigation:not([open]){right:14px;bottom:52px}
 .studio-reveal,.studio-dialog .studio-reveal{left:14px;bottom:52px;font-size:11px}
 .assembly-status .assembly-replay{min-height:44px}
 .studio-angles{bottom:105px;left:14px;right:14px;gap:0}
 .studio-dialog .studio-angles{bottom:108px}
 .studio-details,.studio-dialog .studio-details{bottom:160px}
 .studio-angles button{font-size:11px;min-width:32px;padding-inline:5px}
 .studio-caption{bottom:80px}
}
.craft-photo>.eyebrow,.craft-copy>.accent,.craft-steps b{color:#405463;font-size:12px}
.footer-wordmark{color:#65727d}
.footer-bottom{color:#a6b8c5;font-size:12px}
p a,.fine-print a,.footer-bottom a{text-decoration:underline;text-underline-offset:3px}
.config-section .section-number{color:#8bacbf;font-size:12px}
.build-summary>summary>span{color:#9bb9cc;font-size:12px}
.resource-number{color:#7e95a6}
.craft-section :focus-visible{outline-color:#17394e}
.comparison-identity>.comparison-desktop-copy:first-child{font:11px 'Courier New',monospace;letter-spacing:1.2px;color:#a7bbc8}
.assembly-topline{top:0;min-height:44px;left:25px;right:25px}
.assembly-photo-toggle{min-height:44px;font-size:12px;padding:8px}
.studio-controls,.studio-dialog .studio-controls{top:48px}
.studio-navigation[open]{top:104px}
.assembly-compact .assembly-topline{top:0}
.studio-navigation-open .studio-controls,.studio-navigation-open .studio-angles,.studio-navigation-open .studio-reveal,.studio-navigation-open .assembly-topline{opacity:.3}
@media(max-width:740px){
 .filters{flex-wrap:wrap;max-width:100%;gap:5px}
 .filters button{flex:1 1 auto;min-width:0;white-space:normal}
 .assembly-topline{left:14px;right:14px;top:0}
 .studio-controls,.studio-dialog .studio-controls{top:44px}
 .studio-navigation[open]{top:99px}
}
@media(max-height:650px){
 .studio-dialog{overflow:auto}
 .studio-expanded-mount{position:relative;inset:auto;margin:65px 10px 15px;height:calc(100dvh - 120px);min-height:370px}
}
/* Text remains readable throughout an entrance; motion is position-only. */
.js-motion .reveal,.js-motion .reveal:not(.revealed){opacity:1!important}
.page-title h1,.accessibility-statement h2{overflow-wrap:anywhere}
.laptop-stage .giant-index{overflow:hidden;max-width:100%}
@media(min-width:481px) and (max-width:740px){.build-page{--viewer-height:340px}}
/* Small functional labels remain legible without relying on browser zoom. */
.comparison-identity>.comparison-desktop-copy:first-child{font-size:11px}
.scroll-builder .visual-toolbar button{font-size:11px}
.config-location-heading{flex-wrap:wrap}
.config-location-caption{letter-spacing:.08em}
.build-bottom .bottom-actions{flex-wrap:wrap}
.boot-tagline,.boot-skip{font-size:12px}
@media(max-width:740px){
 .config-intro-meta{flex-wrap:wrap}
 .scroll-builder .component-callout{right:auto;width:calc(100% - 40px);bottom:70px}
 .scroll-builder .visual-toolbar{left:18px;right:18px;bottom:12px;justify-content:space-between}
 .scroll-builder .machine-wrap{bottom:110px}
 .studio-angles{bottom:77px;align-items:end}
 .studio-angles>div{max-width:calc(100% - 58px)}
 .studio-angles button{min-height:32px}
 .original-site-title .eyebrow{white-space:normal}
 .original-site-caption{font-size:12px}
 .total-label>.eyebrow{letter-spacing:.02em}
 .compare-dock{flex-wrap:wrap;max-height:40svh;overflow:auto}
}

/* Inside-view actions and installation status share a flowing footer.
   Independent absolute offsets let View controls cover Replay on desktop. */
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=inside]{
 --assembly-footer-inset:25px;
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 grid-template-rows:minmax(0,1fr) auto auto;
 column-gap:12px;
 row-gap:8px;
}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=inside] .studio-navigation:not([open]){
 position:relative;inset:auto;grid-row:2;grid-column:2;align-self:end;
 max-width:none;margin:0 var(--assembly-footer-inset) 0 0;
}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=inside] .studio-reveal{
 position:relative;inset:auto;grid-row:2;grid-column:1;align-self:end;justify-self:start;
 margin:0 0 0 var(--assembly-footer-inset);
}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=inside] .assembly-status{
 position:relative;inset:auto;grid-row:3;grid-column:1 / -1;align-items:center;
 margin:0 var(--assembly-footer-inset) 7px;
}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=inside] .assembly-status-copy{min-width:0;overflow-wrap:anywhere;align-self:center}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=inside] .assembly-replay{flex:0 0 auto;min-height:44px;padding:8px 0 8px 12px}
@media(max-width:740px){
 :is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=inside]{--assembly-footer-inset:14px;column-gap:8px}
}

/* Keep case viewpoints, details and navigation in separate flowing rows. */
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=case]{
 --assembly-footer-inset:25px;display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 grid-template-rows:minmax(0,1fr) auto auto auto;
 gap:8px 12px;
}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=case] .studio-angles:not([hidden]){display:contents}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=case] .studio-angles>div{
 position:relative;grid-row:2;grid-column:1/-1;max-width:none;
 margin:0 var(--assembly-footer-inset);display:flex;flex-wrap:wrap;gap:4px;z-index:3;
}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=case] .studio-angles button{min-height:44px}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=case] [data-case-details]{
 position:relative;grid-row:3;grid-column:1;justify-self:start;align-self:end;
 margin-left:var(--assembly-footer-inset);z-index:3;
}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=case] .studio-navigation:not([open]){
 position:relative;inset:auto;grid-row:3;grid-column:2;align-self:end;
 max-width:none;margin-right:var(--assembly-footer-inset);
}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=case] .assembly-status{
 position:relative;inset:auto;grid-row:4;grid-column:1/-1;align-items:center;
 margin:0 var(--assembly-footer-inset) 7px;
}
:is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=case] .assembly-status-copy{min-width:0;overflow-wrap:anywhere}
@media(max-width:740px){
 :is(.assembly-viewer:not(.assembly-compact),.studio-dialog .assembly-viewer)[data-studio-mode=case]{--assembly-footer-inset:14px;column-gap:8px}
}

/* Auto height is measured by the toolbar, so 200% text keeps its own space. */
.site-comparison-bar{height:auto;min-height:52px;padding-block:3px}
.comparison-identity,.comparison-switch{min-width:0}
.comparison-switch button{height:auto;min-height:34px;padding:6px 10px;overflow-wrap:anywhere}
.comparison-dot{flex:0 0 5px}
@media(max-width:740px){
 .site-comparison-bar{min-height:60px;grid-template-columns:minmax(0,75px) minmax(0,1fr) 28px;padding-block:4px}
 .comparison-switch{width:100%;max-width:240px}
 .comparison-switch button{flex:1 1 0;min-width:0;min-height:44px;padding:6px 5px;line-height:1.3;white-space:normal}
 .comparison-identity .motion-toggle{min-width:0;max-width:100%;overflow-wrap:anywhere}
}