.scroll-progress { position: fixed; inset: 0 auto auto 0; z-index: var(--z-progress); width: var(--size-full); height: var(--progress-height); transform: scaleX(var(--scroll-progress)); transform-origin: left; background: var(--color-signal); }
.site-header { position: fixed; inset: 0 0 auto; z-index: var(--z-header); isolation: isolate; height: var(--header-height); border-bottom: var(--border-thin) solid var(--color-line-dark); background: var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-header); transition: border-color var(--duration-base), box-shadow var(--duration-base); }
.site-header.is-scrolled { border-color: color-mix(in srgb, var(--color-paper) var(--opacity-border), transparent); box-shadow: var(--shadow-header); }
.header-inner { display: flex; height: var(--header-height); align-items: center; gap: var(--space-5); }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
.brand img { display: block; width: var(--logo-width); height: auto; }
.desktop-nav { display: flex; margin-inline: auto 0; gap: var(--space-1); }
.desktop-nav a { position: relative; display: inline-flex; min-height: var(--control-height); align-items: center; padding: var(--space-3); color: var(--color-paper); font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap; }
.desktop-nav a:hover { color: var(--color-signal-hover); }
.desktop-nav a::after { position: absolute; right: var(--space-3); bottom: var(--space-1); left: var(--space-3); height: var(--nav-indicator-height); transform: scaleX(0); transform-origin: left; background: var(--color-signal); content: ""; transition: transform var(--duration-fast); }
.desktop-nav a.is-active { color: var(--color-paper); }
.desktop-nav a.is-active::after { transform: scaleX(1); }
.desktop-nav a:focus-visible { outline: var(--border-strong) solid var(--color-signal); outline-offset: calc(var(--space-1) * -1); }
.header-cta { flex: 0 0 auto; white-space: nowrap; }
.mobile-menu a.is-active { color: var(--color-signal); }
.form-email-fallback { grid-column: 1 / -1; color: var(--color-paper); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: var(--space-2); }
.mobile-menu { min-height: calc(100dvh - var(--header-height)); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu[hidden] { display: none !important; }
.button { display: inline-flex; min-height: var(--control-height); align-items: center; justify-content: center; padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-bold); transition: transform var(--duration-fast), color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast); }
.button::after { content: "→"; margin-left: var(--space-5); font-size: var(--text-md); }
.button:hover { transform: translateY(calc(var(--space-1) * -1)); }
.button-primary { background: var(--color-signal); color: var(--color-ink); }
.button-primary:hover { background: var(--color-signal-hover); }
.button-ghost { border: var(--border-thin) solid color-mix(in srgb, var(--color-paper) var(--opacity-border), transparent); color: var(--color-paper); }
.button-ghost:hover { border-color: var(--color-signal); color: var(--color-signal); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.menu-button { display: none; width: var(--touch-size); height: var(--touch-size); padding: var(--space-3); background: transparent; }
.menu-button span { display: block; height: var(--border-strong); margin-block: var(--space-1); background: var(--color-paper); transition: transform var(--duration-fast), opacity var(--duration-fast); }
.mobile-menu { position: fixed; inset: var(--header-height) 0 auto; padding: var(--space-5) var(--gutter) var(--space-8); background: var(--color-ink); border-top: var(--border-thin) solid var(--color-line-dark); }
.mobile-menu a { display: block; min-height: var(--control-height); padding-block: var(--space-3); border-bottom: var(--border-thin) solid var(--color-line-dark); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.product-frame { overflow: hidden; border: var(--border-thin) solid var(--color-line-dark); border-radius: var(--radius-md); background: var(--color-ink-soft); box-shadow: var(--shadow-soft); }.product-frame picture { display: block; }
.product-frame img { width: var(--size-full); }
.product-frame figcaption { padding: var(--space-3) var(--space-4); border-top: var(--border-thin) solid var(--color-line-dark); color: var(--color-steel-dark); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--media-caption-tracking); line-height: var(--media-caption-leading); }
.check-list { display: grid; gap: var(--space-3); margin-top: var(--space-8); list-style: none; }
.check-list li { position: relative; padding-left: var(--space-8); color: color-mix(in srgb, currentColor var(--opacity-check), transparent); }
.check-list li::before { content: ""; position: absolute; top: var(--check-offset); left: 0; width: var(--space-3); height: var(--space-2); border-left: var(--border-strong) solid var(--color-signal); border-bottom: var(--border-strong) solid var(--color-signal); transform: rotate(var(--check-angle)); }