/* Shared by every page: design tokens (light and dark), base, type, buttons, the nav with the logo, the footer. */
:root {
  --bg: #E8EDEF;
  --bg-2: #F3F6F7;
  --card: #FFFFFF;
  --ink: #15202B;
  --ink-2: #46535F;
  --ink-3: #74818C;
  --line: rgba(21, 32, 43, .11);
  --wall-a: #DCE4E8;
  --wall-b: #C9D4DA;
  --floorwood: #B88A5F;
  --oak: #C8955F;
  --oak-2: #A8763F;
  --walnut: #7C5130;
  --birch: #EAD6B4;
  --brass: #C9A04A;
  --hl: #FFC53D;
  --hl-mark: rgba(255, 197, 61, .75);
  --tape: #1B2127;
  --tape-ink: #F3F0E6;
  --red: #E5484D;
  --app-bg: #F2F5F6;
  --glass: rgba(255, 255, 255, .82);
  --shadow: 0 1px 2px rgba(21, 32, 43, .06), 0 10px 30px -8px rgba(21, 32, 43, .14);
  --shadow-lg: 0 2px 4px rgba(21, 32, 43, .05), 0 30px 60px -20px rgba(21, 32, 43, .30);
  --lamp: 0; --sky-a: #CFE3EE; --sky-b: #9FC2D6; --sky-c: #BFD6C4; --kdim: 1;
  --item-dim: 1;
  --f-display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Onest', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000; --bg-2: #131B22; --card: #18212A;
    --ink: #E7ECEF; --ink-2: #A7B2BB; --ink-3: #6F7D88; --line: rgba(231, 236, 239, .11);
    --wall-a: #1B252E; --wall-b: #111920; --floorwood: #4A3524;
    --oak: #93673F; --oak-2: #74502D; --walnut: #4E321D; --birch: #B99B73; --brass: #D6AE55;
    --hl-mark: rgba(255, 197, 61, .32);
    --tape: #ECE7D8; --tape-ink: #1A1F24;
    --app-bg: #0F151B; --glass: rgba(24, 33, 42, .86);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -8px rgba(0, 0, 0, .5);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 60px -20px rgba(0, 0, 0, .7);
    --lamp: 1; --item-dim: .88; --sky-a: #1C2A48; --sky-b: #0E1830; --sky-c: #24345A; --kdim: .8;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --bg-2: #131B22; --card: #18212A;
  --ink: #E7ECEF; --ink-2: #A7B2BB; --ink-3: #6F7D88; --line: rgba(231, 236, 239, .11);
  --wall-a: #1B252E; --wall-b: #111920; --floorwood: #4A3524;
  --oak: #93673F; --oak-2: #74502D; --walnut: #4E321D; --birch: #B99B73; --brass: #D6AE55;
  --hl-mark: rgba(255, 197, 61, .32);
  --tape: #ECE7D8; --tape-ink: #1A1F24;
  --app-bg: #0F151B; --glass: rgba(24, 33, 42, .86);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -8px rgba(0, 0, 0, .5);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 60px -20px rgba(0, 0, 0, .7);
  --lamp: 1; --item-dim: .88; --sky-a: #1C2A48; --sky-b: #0E1830; --sky-c: #24345A; --kdim: .8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 var(--f-body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--hl); outline-offset: 3px; border-radius: 6px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 44px); }

/* ---------- type ---------- */
.display {
  font-family: var(--f-display); font-weight: 720; font-variation-settings: "opsz" 96;
  font-size: clamp(46px, 7.2vw, 96px); line-height: .94; letter-spacing: -.038em;
  margin: 0; text-wrap: balance;
}
.h2 {
  font-family: var(--f-display); font-weight: 700; font-variation-settings: "opsz" 72;
  font-size: clamp(32px, 4.6vw, 58px); line-height: 1.0; letter-spacing: -.032em;
  margin: 0; text-wrap: balance;
}
.h3 { font-family: var(--f-display); font-weight: 650; font-size: 21px; line-height: 1.2; letter-spacing: -.012em; margin: 0; }
.lede { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 32em; text-wrap: pretty; }
.body-l { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 36em; text-wrap: pretty; }
.small { font-size: 15px; color: var(--ink-2); margin: 0; }
.fineprint { font-size: 14px; color: var(--ink-3); margin: 0; }

/* a highlighter stroke that draws itself in under a word */
.hl { background: linear-gradient(var(--hl-mark), var(--hl-mark)) 0 88% / 0% 34% no-repeat; animation: mark 1s .5s cubic-bezier(.6,.1,.2,1) forwards; padding-inline: .04em; }
@keyframes mark { to { background-size: 100% 34%; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: 16px;
  padding: 14px 22px; border-radius: 12px; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 20px -8px rgba(21, 32, 43, .5);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 12px 26px -8px rgba(21, 32, 43, .55); }
.btn-small { padding: 9px 15px; font-size: 14.5px; border-radius: 10px; }
.btn-quiet { font-weight: 600; text-decoration: none; padding: 14px 6px; color: var(--ink); border-bottom: 0; }
.btn-quiet::after { content: " ↓"; color: var(--ink-3); }
.btn-quiet[href="#top"]::after { content: " ↑"; }
.btn-quiet:hover { text-decoration: underline; text-underline-offset: 4px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.cta-row.center { justify-content: center; }
.cta-row:not(.center) > .btn-quiet:first-child { padding-inline-start: 0; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-row { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; text-decoration: none; }
/*
 * The logo beside the name (the app's brand/logo web logos; rules: sth tt:bte5jm), light or dark with the page. The house (its frame's
 * outer edge, 298.4 of the drawing's 572 box, brand/logo/metrics.json) is --logo-scale times the name's cap height,
 * never less, and stands on its baseline, --logo-drop of its height lower (set exactly on it, it looks a touch high);
 * the glass's handle hangs below like a descender. Bold type looks bigger than the thin house, so it is a little taller
 * than the capitals. The negative margins take the aura's room back out of the layout, while the aura itself still
 * shows in full around the house.
 * --cap falls back to Bricolage Grotesque's cap height (.66em) where the cap unit isn't supported.
 */
.brand-mark { display: inline-block; flex: none; line-height: 0; --cap: .66em; --logo-scale: 1.15; --logo-drop: .03; }
@supports (width: 1cap) { .brand-mark { --cap: 1cap; } }
.brand-mark img {
  --u: calc(var(--cap) * var(--logo-scale) / 298.4);
  width: calc(572 * var(--u)); height: calc(572 * var(--u)); vertical-align: baseline;
  position: relative; top: calc(var(--logo-drop) * 298.4 * var(--u));
  margin: calc(-136.8 * var(--u)) calc(-78 * var(--u));
}
.brand-mark .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark .logo-light { display: none; }
  :root:not([data-theme="light"]) .brand-mark .logo-dark { display: inline; }
}
:root[data-theme="dark"] .brand-mark .logo-light { display: none; }
:root[data-theme="dark"] .brand-mark .logo-dark { display: inline; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { text-decoration: none; font-size: 15px; color: var(--ink-2); font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
/* On phones only the links marked .nav-keep (Pricing) stay. */
@media (max-width: 760px) { .nav-links a:not(.nav-keep) { display: none; } .nav-row { gap: 16px; } .brand, .nav-row > .btn { white-space: nowrap; } }
@media (max-width: 370px) { .nav-row { gap: 12px; } .brand { font-size: 16.5px; } }


/* ---------- footer: a quiet line under the CTA ---------- */
.foot { padding-block: 0 calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--bg-2); text-align: center; }
.foot p { margin: 0; font-size: 13px; color: var(--ink-3); }
/* the links to the legal pages, in every page's footer */
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin-bottom: 10px; }
.foot-links a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; padding-block: 4px; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* a footer on a page without the CTA band above it */
.foot-page { padding-top: 28px; border-top: 1px solid var(--line); }