/* Leetz Labs: a small studio's site in the Mosaic family. System faces only, so no third party is asked for fonts. */
:root {
  --ground: #F2F3F0; --surface: #FFFFFF; --ink: #1C1C1A; --soft: #575B55; --rule: #D6DAD3;
  --teal: #1A6E5E; --teal-wash: #E0EDE8; --plum: #6B3A55;
  --display: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, ui-sans-serif, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #141614; --surface: #1D201D; --ink: #ECEBE6; --soft: #A7AAA4; --rule: #323631;
    --teal: #3FAE95; --teal-wash: #1B2E28; --plum: #C493AF; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; }
a { color: var(--teal); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 2.7rem); }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.08rem; font-family: var(--body); font-weight: 650; }
p, ul { margin: 0; }
.wrap { max-width: 720px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
header.site { border-bottom: 1px solid var(--rule); background: var(--surface); }
header.site .wrap { padding-block: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: 34px; flex: none; }
.brand span { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
nav.site ul { list-style: none; padding: 0; display: flex; gap: 4px; }
nav.site a { display: block; padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--soft); font-size: 0.95rem; }
nav.site a:hover { color: var(--ink); background: var(--ground); }
nav.site a[aria-current="page"] { color: var(--teal); background: var(--teal-wash); font-weight: 600; }
main .wrap { padding-block: 44px 56px; display: grid; gap: 28px; }
.lede { font-size: 1.15rem; color: var(--soft); max-width: 60ch; }
.stack { display: grid; gap: 14px; max-width: 64ch; }
.app { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 22px; display: grid; gap: 12px; }
.kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.app ul { padding-left: 1.2em; display: grid; gap: 6px; }
.soon { font-size: 0.92rem; color: var(--soft); }
.addr { font-family: var(--mono); font-size: 0.95rem; }
.faq { display: grid; border-top: 1px solid var(--rule); }
.faq > div { padding-block: 16px; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; }
.faq p { max-width: 64ch; }
.path { font-family: var(--mono); font-size: 0.86em; background: var(--teal-wash); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.policy { display: grid; gap: 14px; max-width: 64ch; }
.policy .effective { font-size: 0.92rem; color: var(--soft); }
.policy ul { padding-left: 1.2em; display: grid; gap: 10px; }
.policy .headline { font-size: 1.12rem; font-weight: 600; }
footer.site { border-top: 1px solid var(--rule); }
footer.site .band { height: 18px; color: var(--teal); opacity: 0.55; background-image: url("hexes.svg"); background-repeat: repeat-x; background-size: 20px 18px; }
footer.site .wrap { padding-block: 18px 36px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.88rem; color: var(--soft); }
footer.site a { color: var(--soft); }