/* Navigation stays close while the product story unfolds. */
html { scroll-padding-top: calc(var(--site-header-height, 100px) + 18px); }
.site-header { position: sticky; top: 0; background: #faf7f2ed; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background .25s, box-shadow .25s, border-color .25s; }
.site-header.is-scrolled { background: #faf7f2f5; border-color: #c7d2c099; box-shadow: 0 5px 24px #303d3509; }
.reading-progress { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; overflow: hidden; pointer-events: none; }
.reading-progress span { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(var(--reading-progress, 0)); background: linear-gradient(90deg, #426653 60%, #c58d6f); }
.desktop-nav { position: relative; }
.desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; position: relative; }
.desktop-nav a[aria-current="location"] { color: #303d35; }
.desktop-nav a[aria-current="location"]::before { content: ""; position: absolute; bottom: 3px; left: 0; right: 0; height: 3px; border-radius: 2px; background: #c89072; }
.desktop-nav a[aria-current="location"]::after { display: none; }
.desktop-nav.has-nav-marker a[aria-current="location"]::before { display: none; }
.nav-marker { position: absolute; left: 0; bottom: 3px; width: 0; height: 3px; border-radius: 3px; background: var(--peach); pointer-events: none; opacity: 0; transition: transform .3s cubic-bezier(.22,.61,.36,1), width .3s cubic-bezier(.22,.61,.36,1), opacity .2s; }
.nav-marker[data-visible="true"] { opacity: 1; }
.mobile-menu > a[href^="#"] { position: relative; padding-right: 22px; transition: color .2s; }
.mobile-menu > a[href^="#"]::after { content: ""; position: absolute; right: 2px; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--sage); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; }
.mobile-menu > a[aria-current="location"] { color: var(--sage); }
.mobile-menu > a[aria-current="location"]::after { opacity: 1; transform: scale(1); }
.features-section { border-radius: 48px 48px 0 0; }
.plus-section { border-radius: 56px 56px 0 0; }

/* A brief response to a deliberate press, without moving the hit target. */
.button, .pairing-next, .night-next, .mobile-download-link { position: relative; isolation: isolate; overflow: hidden; }
.button-ripple { display: block; position: absolute; z-index: -1; border-radius: 50%; background: #edb89a70; pointer-events: none; }
.plan-free-button .button-ripple, .button-outline .button-ripple { background: #42665326; }
.motion-enabled[data-motion="playing"] .pairing-next,
.motion-enabled[data-motion="playing"] .night-next,
.motion-enabled[data-motion="playing"] .mobile-download-link { transition: background .2s, box-shadow .2s; }
.pairing-next:active, .night-next:active, .mobile-download-link:active { box-shadow: inset 0 3px 12px #17291f26; }
.download-qr { transition: border-color .3s, box-shadow .3s; }
.download-qr:hover { border-color: #92a789; box-shadow: 0 8px 25px #4266530b; }
@media (max-width: 1100px) {
  .desktop-nav { gap: 17px; }
}
@media (max-width: 700px) {
  .features-section { border-radius: 28px 28px 0 0; }
  .plus-section { border-radius: 30px 30px 0 0; }
  .site-header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .mobile-menu { max-height: calc(100dvh - var(--site-header-height, 72px)); overflow-y: auto; overscroll-behavior: contain; }
}
.motion-enabled[data-motion="paused"] .site-header,
.motion-enabled[data-motion="paused"] .nav-marker,
.motion-enabled[data-motion="paused"] .mobile-menu > a,
.motion-enabled[data-motion="paused"] .mobile-menu > a::after,
.motion-enabled[data-motion="paused"] .download-qr { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header, .download-qr, .nav-marker, .mobile-menu > a, .mobile-menu > a::after { transition: none; }
}