/* Step15: compact navigation and controls without changing the approved desktop layout. */
@media(max-width:600px){
 :root{scroll-padding-top:145px}
 .header{height:auto;min-height:106px;padding:10px 13px;flex-wrap:wrap;gap:5px 12px;justify-content:space-between}
 .header-brand{order:1;flex:0 0 92px}
 .header-cta{order:2;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
 .header nav{order:3;flex:0 0 100%;width:100%;min-width:0;justify-content:center;flex-wrap:wrap;gap:1px}
 .header nav a,.header nav a:nth-child(3){display:inline-flex;align-items:center;justify-content:center;font-size:11px;padding:7px 8px;min-height:38px}
 .hero-immersive h1 em{white-space:normal}
 .hero-immersive .actions{flex-wrap:wrap}
 .deck-toolbar{width:calc(100% - 32px);max-width:none;padding:10px;min-width:0}
 .deck-toolbar .app-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-width:0;gap:4px}
 .deck-toolbar .app-nav button{min-width:0;min-height:38px;font-size:11px;padding:7px 8px}
 .deck-settings{gap:12px;flex-wrap:wrap;min-width:0}
 .deck-toolbar .segmented button{min-height:32px;min-width:36px;font-size:11px}
 .deck-toolbar .theme-dots button{width:26px;height:26px}
 .deck-toolbar .custom-color{width:28px;height:28px}
 .deck-arrow{width:44px;height:44px;font-size:28px}
 .hero-immersive .hero-notes{flex-wrap:wrap;gap:6px 14px}
}

/* Keep the 3D carousel's decorative side cards inside its own hero bounds.
   The former 120px clip margin could extend the document on small viewports. */
.hero.hero-immersive{overflow-clip-margin:0px}
.feature-copy,.feature-menu,.pricing>*,.four-grid>*{min-width:0}