/* Exact marketing control recipes from website-v2: buttons.tsx, main-nav.tsx,
   and globals.css. Keep these aligned with the normal site, including fonts. */
:root{--on-ink:#f0faf7;--on-mint:#00403f;--lime-deep:#a9e65f;--control-motion:100ms cubic-bezier(.4,0,.2,1)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:2px solid transparent;border-radius:9999px;padding:12px 26px;font-family:Figtree,Arial,sans-serif;font-size:16px;font-weight:600;line-height:24px;letter-spacing:normal;white-space:nowrap;text-decoration:none;transition:color var(--control-motion),background-color var(--control-motion),border-color var(--control-motion),outline-color var(--control-motion);cursor:pointer}
.button:disabled{pointer-events:none;opacity:.5}
.button-primary{background:var(--lime);color:var(--on-mint)}
.button-primary:hover{background:var(--lime-deep)}
.button-outline{background:transparent;color:var(--ink);border-color:color-mix(in oklab,var(--ink) 40%,transparent)}
.button-outline:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.hero .button-outline,.signup-panel .button-outline{border-color:color-mix(in oklab,var(--on-ink) 40%,transparent);color:var(--on-ink)}
.hero .button-outline:hover,.signup-panel .button-outline:hover{border-color:var(--on-ink);background:var(--on-ink);color:var(--ink)}
.button .cta-arrow{display:block;width:16px;height:16px;flex-shrink:0;margin-right:-4px}
.button:focus-visible,.site-header :focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.hero-actions{flex-wrap:wrap}
/* Navigation follows the same proportions and breakpoints as NavRow. */
.site-header{position:absolute;inset:0 0 auto;z-index:30;color:var(--on-ink);font-family:Figtree,Arial,sans-serif;line-height:1.5}
.site-header .nav-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:1120px;padding:24px 20px;height:auto}
.site-header .brand{display:flex;align-items:center}
.site-header .brand img{height:20px;width:auto;max-width:none}
.nav-actions{display:flex;align-items:center;gap:12px}
.desktop-nav{display:none;align-items:center;gap:28px}
.desktop-nav a{font-size:16px;font-weight:600;line-height:24px;color:var(--on-ink);padding:0;text-shadow:0 1px 3px color-mix(in srgb,var(--on-mint) 55%,transparent);text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.3em;transition:color var(--control-motion),text-decoration-color var(--control-motion)}
.desktop-nav a:hover,.desktop-nav a:focus-visible,.desktop-nav a[aria-current]{text-decoration-color:currentColor}
.nav-cta{padding:8px 12px;font-size:15px;line-height:22.5px}
.nav-label-full{display:none}
.menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;padding:0;border:2px solid color-mix(in oklab,var(--on-ink) 30%,transparent);border-radius:9999px;background:transparent;color:var(--on-ink);transition:color var(--control-motion),border-color var(--control-motion)}
.menu-toggle:hover{color:var(--mint);border-color:var(--mint)}
.menu-toggle svg{width:20px;height:20px}
.menu-close-icon{display:none}
.menu-toggle[aria-expanded=true] .menu-open-icon{display:none}
.menu-toggle[aria-expanded=true] .menu-close-icon{display:block}
.mobile-nav{position:absolute;top:100%;left:20px;right:20px;z-index:40;margin-top:12px;display:flex;flex-direction:column;max-height:calc(100dvh - 96px);overflow-y:auto;border-radius:24px;padding:12px;background:#055555;color:var(--on-ink);box-shadow:0 4px 8px oklch(29% .055 178 / .08),0 24px 64px oklch(29% .055 178 / .16)}
.mobile-nav>a{display:block;border-radius:16px;padding:14px 16px;font-size:17px;font-weight:600;line-height:25.5px;text-decoration:none;transition:background-color var(--control-motion)}
.mobile-nav>a:hover{background:var(--pale)}
.mobile-nav-cta{padding:12px 16px 8px}
.mobile-nav-cta .button{width:100%}
@media(min-width:360px){.site-header .brand img{height:28px}}
@media(min-width:640px){.site-header .nav-row{padding-inline:24px;gap:24px}.nav-actions{gap:20px}.nav-cta{padding-inline:20px}.nav-label-full{display:inline}.nav-label-compact{display:none}.mobile-nav{left:24px;right:24px}}
@media(min-width:768px){.site-header .brand img{height:32px}.nav-actions{gap:32px}}
@media(min-width:1024px){.desktop-nav{display:flex}.menu-toggle,.mobile-nav{display:none}}
/* Warm Figtree labels, as in V2's label-technical utility. */
.eyebrow,.hero .eyebrow,.moment-copy .eyebrow,.signup-panel .eyebrow{font-family:Figtree,Arial,sans-serif;font-size:13px;line-height:1.3;font-weight:600;letter-spacing:.005em;text-transform:none}
@media(prefers-reduced-motion:reduce){.button,.desktop-nav a,.mobile-nav>a,.menu-toggle{transition:none}}