/* Dervo landing: the site layer every view shares.
   Colours, type and shape are the app's tokens (the app's own token sheet), so the site and the app are
   one material. The site adds only display sizes and page spacing on top. Fonts are served from shared/fonts so a
   port keeps the live site's font-src 'self'. */
@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root, [data-theme="light"] {
  color-scheme: light;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-text: 'Instrument Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* App sizes, in rem, exactly as tokens.css */
  --fs-caption: 0.75rem; --fs-small: 0.8125rem; --fs-body: 0.875rem; --fs-read: 0.9375rem; --fs-title: 1.0625rem;
  --fs-h2: 1.625rem; --fs-h1: 2.125rem; --fs-hero: 3rem;
  --lh-tight: 1.2; --lh-ui: 1.45; --lh-read: 1.62;

  --paper: #f7f6f3; --canvas: #fdfdfc; --raised: #ffffff; --sunk: #f2f1ed;
  --ink: #1b1b19; --ink-2: #3c3c38; --muted: #6d6c66; --faint: #a09f98;
  --line: #ebeae5; --line-strong: #dcdbd4;
  --pine: #22382b; --pine-ink: #f8f8f5;
  --sage: #5e7351; --sage-wash: #eef0e8;
  --live: #2f7844; --live-wash: #e6f1e8;
  --rust: #b0461f; --rust-wash: #f8ebe4;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r1: 6px; --r2: 10px; --r3: 14px; --r-pill: 999px;
  --hairline: 1px solid var(--line);
  --lift: 0 1px 2px rgb(28 41 33 / .05), 0 10px 28px -14px rgb(28 41 33 / .22);
  --glass: rgb(251 250 245 / .70);
  --glass-blur: blur(22px) saturate(1.15);
  --wash: .3;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 120ms; --calm: 220ms;

  /* Site layer: display sizes step up, never get bolder (Instrument Serif has one weight) */
  --gutter: clamp(20px, 4.2vw, 64px);
  --max: 1200px;
  --d-hero: clamp(2.75rem, 5.6vw, 5.125rem);
  --d-1: clamp(2.5rem, 4.8vw, 4.5rem);
  --d-2: clamp(2.125rem, 1.4rem + 2.2vw, 3.25rem);
  --t-lead: clamp(1.125rem, 1.4vw, 1.3125rem);
  --t-body: 1.0625rem;
  --window-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 2px 4px rgb(20 30 24 / .04), 0 40px 90px -40px rgb(20 30 24 / .42);
}
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171716; --canvas: #1e1e1d; --raised: #262625; --sunk: #2a2a28;
  --ink: #ecece9; --ink-2: #c9c8c3; --muted: #9b9a93; --faint: #6f6e68;
  --line: #2d2d2b; --line-strong: #3a3a37;
  --pine: #e4ecdc; --pine-ink: #1b1b19;
  --sage: #a9bd98; --sage-wash: #2a2e27;
  --live: #7cc58f; --live-wash: #1f3326;
  --rust: #e48a62; --rust-wash: #3b281f;
  --lift: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -14px rgb(0 0 0 / .6);
  --glass: rgb(30 30 29 / .72);
  --wash: .16;
  --window-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 40px 90px -40px rgb(0 0 0 / .8);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-body)/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: .002em; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: var(--r1); }
code { font-family: var(--font-mono); font-size: .9em; }
.skip { position: absolute; left: 12px; top: -120px; z-index: 50; padding: 10px 14px; border-radius: var(--r2); background: var(--raised);
  box-shadow: var(--lift); font-size: 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Type roles ---------- */
.d-hero { font: 400 var(--d-hero)/.96 var(--font-display); letter-spacing: -.022em; }
.d-1 { font: 400 var(--d-1)/1 var(--font-display); letter-spacing: -.02em; }
.d-2 { font: 400 var(--d-2)/1.05 var(--font-display); letter-spacing: -.014em; }
.d-2 .ln { display: block; }
/* A and C keep the display sizes they were drawn with; the new scale above is B's. */
body.a, body.c { --d-hero: clamp(3.4rem, 7.6vw, 7.25rem); --d-2: clamp(2rem, 3.3vw, 3.1rem); }
.a .d-hero, .c .d-hero { line-height: .94; letter-spacing: -.028em; }
.a .d-1, .c .d-1 { letter-spacing: -.022em; }
.a .d-2, .c .d-2 { line-height: 1.04; letter-spacing: -.016em; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); letter-spacing: -.004em; }
.kicker { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.fine { font-size: 13px; color: var(--muted); }
.d-hero .indent, .d-1 .indent { display: block; padding-left: 1.1em; }
h1, h2 { text-wrap: balance; }
p, .lead, #signup-context { text-wrap: pretty; }

/* ---------- The mark: the forest pebble. Calm, never animated in the chrome ---------- */
.pebble { width: 26px; height: 26px; flex: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .word { font: 400 28px/1 var(--font-display); letter-spacing: -.01em; transform: translateY(-1px); }

/* ---------- Nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; position: relative; z-index: 5; }
.nav-end { display: flex; align-items: center; gap: var(--s5); }
.nav-link { font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.nav-link:hover { color: var(--ink); }

/* ---------- Buttons, the app's pills at site size ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 44px; padding: 0 20px;
  border-radius: var(--r-pill); font-size: 15px; font-weight: 600; letter-spacing: -.004em; white-space: nowrap; text-decoration: none;
  transition: background var(--fast), box-shadow var(--calm) var(--ease), color var(--fast), transform var(--calm) var(--ease); }
.button-primary { background: var(--pine); color: var(--pine-ink); }
.button-primary:hover { background: color-mix(in srgb, var(--pine) 86%, var(--canvas)); }
.button-ghost { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.button-ghost:hover { background: var(--sunk); }
/* A button lifts a pixel under a mouse and gives a little when pressed. No lift on touch, and none with reduced motion. */
@media (hover: hover) {
  .button-primary:hover { box-shadow: 0 10px 20px -12px rgb(34 56 43 / .6); transform: translateY(-1px); }
  .button-ghost:hover { box-shadow: inset 0 0 0 1px var(--line-strong), 0 8px 16px -12px rgb(28 41 33 / .35); transform: translateY(-1px); }
}
.button:active { transform: scale(.97); transition-duration: 80ms; }
.button[disabled] { transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .button:hover, .button:active { transform: none; } }
.button-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.works { font-size: 14px; color: var(--muted); }

/* ---------- Waitlist: ids, names and the button are the live site's contract (waitlist.js) ---------- */
.signup { display: flex; flex-direction: column; gap: var(--s3); width: min(100%, 520px); }
.signup label { font-size: 13px; font-weight: 600; color: var(--muted); }
.email-row { display: flex; gap: var(--s2); padding: 5px; border-radius: var(--r-pill); background: var(--raised);
  box-shadow: 0 0 0 1px var(--line-strong), 0 12px 30px -20px rgb(0 0 0 / .25); }
.email-row:focus-within { box-shadow: 0 0 0 2px var(--pine), 0 12px 30px -20px rgb(0 0 0 / .25); }
.email-row input { flex: 1; min-width: 0; height: 42px; padding: 0 16px; border: 0; outline: 0; background: none; font: inherit;
  font-size: 16px; color: var(--ink); }
.email-row input::placeholder { color: var(--faint); }
.email-row button { height: 42px; }
.email-row button[disabled] { opacity: .6; cursor: progress; }
#signup-context { font-size: 13px; line-height: 1.5; color: var(--muted); }
#signup-context a { color: var(--ink-2); }
#signup-next { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
#signup-next a { color: var(--ink); }
#signup-status { font-size: 14px; font-weight: 500; color: var(--ink); }
[aria-invalid="true"] { color: var(--rust); }

/* ---------- Footer ---------- */
.footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: 28px 0 36px; font-size: 13px; color: var(--muted); }
.footer .brand .word { font-size: 22px; }
.footer .pebble { width: 20px; height: 20px; }
.footer nav { display: flex; gap: var(--s5); }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--ink); }
.noscript { padding: 12px var(--gutter); font-size: 13px; color: var(--muted); }

/* ---------- Product visuals: a real app window scaled to fit (fit.js), never redrawn ---------- */
.fit { position: relative; width: 100%; }
.fit > .app.window { transform-origin: 0 0; margin-inline: auto; }
.demo-cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 19px; height: 23px; pointer-events: none; visibility: hidden;
  filter: drop-shadow(0 2px 3px rgb(20 30 24 / .25)); }
.demo-cursor svg { width: 100%; height: 100%; overflow: visible; }
.demo-cursor path { fill: #1b1b19; stroke: #fdfdfc; stroke-width: 1.5; stroke-linejoin: round; }

/* ---------- Motion: scenes stay hidden until they play; the markup is always the final state ---------- */
/* Nothing waits to arrive any more: every section is painted where it belongs, motion or not. */
html:not(.motion) [data-motion-pause] { display: none; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .lead { line-height: 1.48; }
  .email-row input { font-size: max(16px, 1em); }
  .nav { height: 64px; }
  .nav-link { display: none; }
  .footer { flex-direction: column; align-items: flex-start; }
  /* Stacked, the shared pill leaves the button sitting inside a white card with a rim of padding around it.
     So the pill dissolves: the field keeps it, the button stands on its own underneath. */
  .email-row { flex-direction: column; gap: 10px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .email-row:focus-within { box-shadow: none; }
  /* flex: 1 grows along the main axis, which is the height once this is a column, so the field has to opt out
     of it or it collapses to its 20px of content. */
  .email-row input { flex: none; height: 52px; padding: 0 18px; border-radius: var(--r-pill); background: var(--raised);
    box-shadow: 0 0 0 1px var(--line-strong), 0 12px 30px -20px rgb(0 0 0 / .25); }
  .email-row input:focus { box-shadow: 0 0 0 2px var(--pine), 0 12px 30px -20px rgb(0 0 0 / .25); }
  .email-row button { width: 100%; height: 52px; }
}