@font-face { font-family: "Jost"; src: url("fonts/Jost.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root{--bg:#fff;--card:#F6F6F4;--border:rgba(13,13,13,.08);--border-strong:rgba(13,13,13,.16);--text:#0D0D0D;--text-2:rgba(13,13,13,.72);--text-3:rgba(13,13,13,.6);
  --accent:#0D7A71;--accent-hover:#11897F;--ink:#07403C;--deep:#052F2C;--mint:#8FD3C6;
  --font:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif;--head:'Jost',var(--font);--ease:cubic-bezier(.16,1,.3,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--head);font-weight:500;letter-spacing:-.03em}
.wrap{max-width:1560px;margin:0 auto;padding:0 24px}
.ac{color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:4px;font-size:15px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:background .2s}
.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:var(--accent-hover)}
.btn-glass{background:rgba(13,13,13,.04);color:var(--text);border-color:var(--border-strong)}

/* nav */
.nav-shell{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:background .3s,border-color .3s,transform .3s}
.nav-shell.away{transform:translateY(-100%)}
/* at the top of the page the bar sits on the hero, without its own background */
.nav-shell.top{background:transparent;backdrop-filter:none;border-color:transparent}
.nav{display:flex;align-items:center;gap:36px;max-width:1560px;margin:0 auto;padding:0 24px;height:72px}
.brand{display:inline-flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--text)}
.brand svg{height:20px;width:114px}
.brand span{font-family:var(--head);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.nav-links{display:flex;gap:4px}
.nav-links a{color:var(--text-2);text-decoration:none;font-size:15px;font-weight:500;padding:8px 14px;border-radius:3px}
.nav-links a:hover{background:rgba(13,13,13,.05);color:var(--text)}
.nav .btn{margin-left:auto}

.cta-band{background:var(--ink);color:#fff;border-radius:4px;padding:28px 40px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.cta-band .btn{background:#fff;color:var(--ink)}
footer{padding:4px 0 20px;color:var(--text-3);font-size:14px}
/* phone: the three links stay, the demo button goes, the "Care" tag goes */
@media (max-width:900px){.nav{gap:12px;padding:0 16px}.nav-links{gap:0}.nav-links a{padding:8px 7px;font-size:14px}.brand span{display:none}.nav .btn{white-space:nowrap}.cta-band{padding:44px 28px}}
@media (max-width:600px){.nav .btn{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}