/* HopperLabs.ai: the hopperlabs brand, from @hopperlabs/brand-assets brands/*.json. Generated: do not edit. */
:root{--brand-id:"hopperlabs";--ground:#faf8f2;--surface:#ffffff;--well:#f2f0e5;--well-strong:#e6e8db;--ink:#1b2621;--muted:#5f6a62;--rule:#e2e3d9;--brand:#21483b;--brand-deep:#16372a;--wordmark:#224033;--sage:#84927a;--sage-light:#a9b89c;--action:#21483b;--action-hover:#16372a;--action-ink:#ffffff;--link:#21483b;--focus:#21483b;--night:#0f1613;--on-night:#f4f3ec;--danger:#9f3a2b;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--serif:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--mono:ui-monospace, SFMono-Regular, Menlo, monospace;--display:var(--sans);--radius-card:14px;--radius-control:10px;--radius-pill:999px;--enter:.16s;--rise:4px;--state:.14s;--ease:ease-out;--settle:cubic-bezier(.2, .7, .2, 1);color-scheme:light}
@media (prefers-color-scheme:dark){:root{--ground:#0f1613;--surface:#16201c;--well:#121b17;--well-strong:#1b2722;--ink:#edf1ec;--muted:#a3ada5;--rule:#26332d;--brand:#b8d4c2;--brand-deep:#d6e6db;--wordmark:#d6e6db;--sage:#84927a;--sage-light:#a9b89c;--action:#b8d4c2;--action-hover:#d6e6db;--action-ink:#0f1613;--link:#b8d4c2;--focus:#b8d4c2;--night:#0b100e;--on-night:#f4f3ec;--danger:#e59a8c;color-scheme:dark}}
html{background:var(--ground);color:var(--ink);font-family:var(--sans);font-synthesis:none}
@view-transition{navigation:auto}
.brand-header{view-transition-name:brand-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--enter);animation-timing-function:var(--ease)}
::view-transition-group(*),::view-transition-old(brand-header),::view-transition-new(brand-header){animation:none}
@keyframes brand-rise{from{transform:translateY(var(--rise))}}
@keyframes brand-appear{from{opacity:0;transform:translateY(-5px)}}
.brand-wordmark{font:800 18px/1.1 var(--sans);letter-spacing:-0.045em;color:var(--wordmark);white-space:nowrap;text-decoration:none}
.brand-wordmark .brand-ai{color:var(--wordmark)}
.brand-wordmark .brand-product{font-weight:500;color:var(--muted);margin-left:5px;letter-spacing:-.02em}
.brand-eyebrow{font:700 11px/1.4 var(--sans);letter-spacing:0.16em;text-transform:uppercase;color:var(--link)}
.brand-headline{font:800 clamp(34px,4.8vw,56px)/1.02 var(--sans);letter-spacing:-0.05em}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}