/* Public marketing/top navigation shell. */
.topnav {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0 clamp(16px, 4vw, 32px);
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    border-bottom: 1px solid var(--outline-variant);
    position: sticky;
    top: 0;
    z-index: 30;
}

.topnav__brand { font: var(--text-headline-md); font-weight: 800; color: var(--primary); }

.topnav__links { display: flex; gap: var(--space-sm); align-items: center; }

.topnav__link {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    color: var(--on-surface-variant);
    font: var(--text-label-md);
    text-transform: none;
}

.topnav__link:hover { color: var(--primary); background: var(--surface-container); }
.topnav__link--active { color: var(--primary); background: var(--surface-container); }

/* Sticky footer: the shell fills the viewport and pushes the footer to the bottom on short pages. */
.public-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Full-bleed: individual sections manage their own width via .wrap. */
.public-main { width: 100%; flex: 1 0 auto; display: flex; flex-direction: column; }

.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

@media (max-width: 640px) {
    .topnav__links .topnav__link { display: none; }
    .topnav__links .topnav__link--cta { display: inline-flex; }
}