@font-face{font-family:"Mona Sans";src:url("/fonts/mona-sans.woff2") format("woff2");font-weight:200 900;font-stretch:75% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("/fonts/martian-mono.woff2") format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-style:normal;font-display:swap}
/* Layout: the page alternates the two faces of David's business card: navy "front" bands (hero, closing) drawn on a blueprint grid, and light "back" bands that explain. Product screens do the showing; copy stays short. Single visual world by design (card colors), so no dark variant. */
:root{
  color-scheme:light;
  --navy:#1F2937; --navy-2:#273447; --navy-deep:#131A25; --navy-rule:rgba(255,255,255,.1);
  --blue:#2563EB; --blue-2:#1D4ED8; --blue-soft:#E3ECFE; --blue-line:#BFD2FB; --blue-on-navy:#6E9BFF;
  --paper:#F5F7FA; --white:#FFFFFF; --ink:#1F2937; --ink-2:#4B5563; --ink-3:#6B7280; --rule:#DDE3EA; --rule-2:#E8ECF1;
  --on-navy:#F3F5F8; --on-navy-2:#B3BDCB; --on-navy-3:#8792A4;
  --green:#15803D; --green-2:#22C55E; --green-soft:#DCFCE7; --amber:#B45309; --amber-2:#F59E0B; --amber-soft:#FEF3C7;
  --f-sans:"Mona Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1200px; --gutter:20px;
}
@media (min-width:720px){:root{--gutter:32px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue-on-navy);outline-offset:3px;border-radius:6px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@keyframes enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes typing{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@keyframes ring{0%{opacity:.9;transform:scale(.97)}100%{opacity:0;transform:scale(1.07)}}
@keyframes drawline{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.wa-glyph{fill:currentColor;stroke:none}
.grid-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.fi{display:grid;place-items:center;width:24px;height:24px;border-radius:8px}
.fi .ic{width:14px;height:14px;stroke-width:2}
.fi-b{background:#E3ECFE;color:#2563EB}
.fi-g{background:#DCFCE7;color:#15803D}
.fi-a{background:#FEF3C7;color:#B45309}
/* One version is shown per screen width: phone below 700px, tablet 700–1099px, desktop from 1100px */
.v-mob,.v-tab{display:none}
@media (max-width:699.98px){.v-desk{display:none}.v-mob{display:block}}
@media (min-width:700px) and (max-width:1099.98px){.v-desk{display:none}.v-tab{display:block}}