/* The tiptop site: the lander and the two legal pages. Strawberry milk, from
   desktop/src/tokens.css, light only. The spacing is instinct.com's, value for value: a 16px
   page margin, the header 20px inside it, the text 64px under the logo and 1.9 lines apart, the
   footer 64px under the text (96px on the legal pages); 80rem is where it widens. */

:root {
  --sheet: #fff7f3;
  --ink: #40302b;
  --ink-2: #65524b;
  --muted: #826c65;
  --faint: #d4bdb4;
  --line: #f0e0da;
  --cta: #f6dcd6;
  --cta-hover: #efc9c1;
  --accent: #d46a6a;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Ubuntu, sans-serif;
  --text: 24px;
  --inset: 16px;            /* inside the page margin: 16px, 20px from 80rem */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh; display: flex; flex-direction: column;
  padding: 16px; background: var(--sheet); color: var(--ink);
  font: 400 var(--text)/1.3 var(--font); letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--sheet); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* the hand-drawn top hat, where instinct has its stickman */
header { padding: 20px var(--inset); }
.mark { display: block; width: fit-content; }
.mark img { display: block; width: 40px; height: auto; }

/* the text: 44px under the header's 20px, so 64px under the logo; then 20vh of air */
main {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--text) * var(--gap, 1.9)); padding: 44px var(--inset) 20vh;
}
main > * { max-width: 41rem; text-box: trim-both cap alphabetic; }
h1 { font: inherit; font-weight: 650; }

footer {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 64px; padding: 0 var(--inset) 20px;
  font-size: 13px; line-height: 1.02; color: var(--muted);
}
footer a:hover { color: var(--ink); }

/* the page arrives line by line */
@media (prefers-reduced-motion: no-preference) {
  .mark, main > *, footer { animation: rise .6s cubic-bezier(.22, 1, .36, 1) calc(var(--n, 0) * 90ms) both; }
  main > :nth-child(1) { --n: 1; }
  main > :nth-child(2) { --n: 2; }
  main > :nth-child(3) { --n: 3; }
  main > :nth-child(4) { --n: 4; }
  main > :nth-child(n + 5) { --n: 5; }
  footer { --n: 6; }
}
@keyframes rise { from { opacity: 0; translate: 0 8px; } }

/* ---------- The legal pages: instinct's privacy page ---------- */

.legal { --head: 18px; gap: 40px; padding-bottom: 0; color: var(--ink-2); }
.legal > * { max-width: none; width: 100%; text-box: none; }
.legal section { display: flex; flex-direction: column; gap: 16px; }
.legal h1, .legal h2 { font-size: var(--head); line-height: 1.3; font-weight: 650; color: var(--ink); }
.legal p, .legal ul { font-size: clamp(16px, .8vw, 24px); line-height: 1.3; }
.legal ul { display: flex; flex-direction: column; gap: 8px; padding-left: 16px; }
.legal li::marker { color: var(--faint); }
.legal .updated { color: var(--muted); }
.legal strong { font-weight: 600; color: var(--ink); }
.legal a { text-decoration: underline 1px; text-decoration-color: var(--faint); text-underline-offset: 2px; }
.legal a:hover { text-decoration-color: var(--ink); }
.legal + footer { margin-top: 96px; }

@media (min-width: 48rem) { .legal > * { max-width: 55vw; } }
@media (min-width: 80rem) {
  :root { --inset: 20px; }
  header { padding-bottom: 0; }
  main { padding-top: 64px; }
  .mark img { width: 48px; }
  .legal { --head: 22px; }
}
@media (min-width: 96rem) { .legal > * { max-width: 40vw; } }

/* a blank for the owner to fill in */
.fill { padding: 0 3px; border-radius: 3px; background: var(--cta); color: var(--ink); }

/* ---------- The lander fits one screen (the script in index.html sizes the text) ---------- */

.fit { height: 100dvh; }
.fit main { padding-top: calc(var(--text) * 44 / 24); padding-bottom: 0; }
.fit footer { margin-top: 32px; }
@media (min-width: 80rem) { .fit main { padding-top: calc(var(--text) * 64 / 24); } }