.app-shell {
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--page);
}

.workspace {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.main-column {
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  background: var(--page);
  transition: margin-right .35s cubic-bezier(.4,0,.2,1);
}

.page-wrapper {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  container-type: inline-size;
}

.main-content {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 32px 0 0;
}

.body-column,
.hero,
.footer { width: 100%; min-height: 0; }

.navigation-backdrop { display: none; }

@media (min-width: 1024px) {
  .app-shell { height: 100dvh; overflow: hidden; }
  .workspace { height: calc(100dvh - var(--layout-header-h)); overflow: hidden; }
  .main-column { height: 100%; overflow-x: hidden; overflow-y: auto; }
  body.chat-open .main-column { margin-right: var(--layout-chat-w); }
}

@media (max-width: 1919px) {
  .page-wrapper { padding-inline: 20px; }
  .main-content { padding-top: 28px; }
}

@media (max-width: 1023px) {
  .workspace { display: block; }
  .main-column { min-height: 100dvh; }
}

@media (max-width: 799px) {
  .workspace { padding-top: calc(var(--layout-header-h) + env(safe-area-inset-top)); }
  .page-wrapper { padding-inline: 16px; }
  .main-content { padding-top: 20px; }
  .navigation-backdrop { position: fixed; z-index: 29; top: calc(var(--layout-header-h) + env(safe-area-inset-top)); right: 0; bottom: 0; left: min(304px,86vw); background: rgba(6,8,13,.66); backdrop-filter: blur(3px); }
  body.mobile-nav-open .navigation-backdrop { display: block; }
}