/* Shared by the website's inner pages (/demo, /how-it-works): same type, colours and nav as the landing page. */
@font-face { font-family: "Aktiv Grotesk"; src: url(/assets/fonts/aktiv-grotesk-vf.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --paper: #fafaf9; --stone: #ecebe7; --ink: #0b0d0c; --ink-2: #4b4b4b; --ink-3: #8a8a87; --line: #dcdcd9;
  --night: #0a0d0b; --green: #003d26; --green-2: #005032; --mint: #b8e3c9; --coral: #f26b4a;
  --f: "Aktiv Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gut: clamp(16px, 2vw, 28px); --max: 1240px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--f); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -.03em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--green-2); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* nav */
.pnav { position: sticky; top: 0; z-index: 20; background: rgba(250,250,249,.92); border-bottom: 1px solid transparent; transition: border-color .3s; }
.pnav.line { border-color: var(--line); }
.pnav-in { max-width: var(--max); margin: 0 auto; height: 60px; padding: 0 var(--gut); display: flex; align-items: center; gap: 28px; }
.wordmark { display: flex; align-items: center; gap: 7px; line-height: 0; color: var(--ink); }
.wordmark .mk { width: 22px; height: 22px; flex: none; }
.wordmark svg:not(.mk) { height: 19px; width: auto; overflow: visible; }
.pnav-links { display: flex; gap: 24px; margin-left: auto; font-size: 13px; color: var(--ink-2); }
.pnav-links a:hover, .pnav-links a[aria-current="page"] { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 18px; border-radius: 40px; background: var(--ink); color: #fff; font: inherit; font-size: 13.5px; border: 0; cursor: pointer; transition: background .2s; white-space: nowrap; }
.btn i { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-style: normal; transition: transform .25s; }
.btn:hover { background: var(--green); }
.btn:hover i { transform: translateX(2px); }
.btn.light { background: #fff; color: var(--ink); } .btn.light i { background: var(--ink); color: #fff; } .btn.light:hover { background: var(--mint); }
.btn-sm { height: 34px; font-size: 12.5px; padding-left: 14px; } .btn-sm i { width: 24px; height: 24px; }
@media (max-width: 700px) { .pnav-links { display: none; } .pnav-in .btn { margin-left: auto; } }

/* page frame */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.eye { font-size: 12.5px; color: var(--green-2); display: inline-flex; align-items: center; gap: 8px; }
.eye::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.lede { font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.6; color: var(--ink-2); max-width: 620px; }

/* footer */
.pfoot { margin-top: clamp(64px, 10vw, 120px); border-top: 1px solid var(--line); }
.pfoot-in { max-width: var(--max); margin: 0 auto; padding: 28px var(--gut) 40px; display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.pfoot-in nav { display: flex; gap: 20px; flex-wrap: wrap; }
.pfoot-in a:hover { color: var(--ink); }

/* reveal */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }