.app-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.site-header { position: sticky; z-index: 30; top: 0; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .96); }
.brand { min-width: 0; display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-logo { width: 52px; height: 47px; object-fit: contain; flex: 0 0 auto; }
.brand-copy { min-width: 0; display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 1.06rem; }
.brand-copy small { margin-top: 4px; overflow: hidden; color: var(--ink-soft); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.header-meta { display: flex; align-items: center; gap: 8px; }
.journey-layout { width: 100%; max-width: var(--content); margin: 0 auto; padding: 22px 16px 52px; }
.journey-progress { margin: 0 auto 18px; }
.main-content { min-width: 0; }
.main-content:focus { outline: none; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); color: var(--ink-soft); border-top: 1px solid var(--line); background: #fff; font-size: .84rem; text-align: center; }

@media (min-width: 800px) {
  .site-header { padding-inline: max(28px, calc((100vw - var(--content)) / 2)); }
  .journey-layout { padding: 30px 24px 66px; }
}