/* One warm light canvas and a smaller header flush with the viewport edges. */
:root {
 --light-surface: #eee6de;
 --cream: var(--light-surface);
 --nav-surface: var(--light-surface);
 --nav-scrolled-surface: rgba(238,230,222,.85);
}
body, .cream, .feature, .mini, .checks label, .temp-card, .skip-link {
 background-color: var(--light-surface);
}
.btn::before { background: var(--light-surface) !important; }
body[class] header, body[class] header.scrolled,
body.hero-dark header:not(.scrolled), body.page-index.hero-dark header:not(.scrolled) {
 top: 0; left: 0; right: 0; width: 100%; max-width: none;
 margin: 0; padding: 2px 4vw; border-radius: 0;
 background: var(--nav-surface); color: #251d3d;
 -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
body[class] header.scrolled {
 background: var(--nav-scrolled-surface);
 -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
 box-shadow: 0 4px 20px rgba(25,20,35,.05);
}
header .brand-logo { min-width: 112px; min-height: 44px; }
header .brand-logo .brand-lockup, header .logo .brand-wordmark { width: 112px; }
header .burger { font-size: 9px; }
header .nav-cta, header .nav-cta:hover {
 min-height: 30px; padding: 5px 14px; font-size: 8.5px;
}
header .nav-cta::before { inset: -7px 0; }
@media(max-width:620px) {
 body[class] header, body[class] header.scrolled,
 body.hero-dark header:not(.scrolled), body.page-index.hero-dark header:not(.scrolled) {
  padding: 0 4vw;
 }
 header .brand-logo { min-width: 96px; }
 header .brand-logo .brand-lockup, header .logo .brand-wordmark { width: 96px; }
 header .burger { font-size: 8.5px; }
 header .nav-cta, header .nav-cta:hover {
  min-height: 28px; padding: 4px 10px; font-size: 8px;
 }
 header .nav-cta::before { inset: -8px 0; }
}