/* The field-journal tokens from src/theme/tokens.ts: paper and ink by
   day, the same names with night values after dark. Muted text and
   hairlines are alpha blends of ink, never new greys. Shared by every
   page since 2026-09-19. */
:root {
  --bg: #F2F0EA;
  --text: #1C221F;
  --text-strong: rgba(28, 34, 31, 0.78);
  --text-muted: rgba(28, 34, 31, 0.62);
  --text-faint: rgba(28, 34, 31, 0.55);
  --hairline: rgba(28, 34, 31, 0.20);
  --surface: rgba(28, 34, 31, 0.045);
  --selection: rgba(28, 34, 31, 0.08);
  --pine: #467556;
  --leaf: #6F9E7E;
  --leaf-light: #91C7A3;
  --moss: #5E6B52;
  --ochre: #C5A469;
  --on-pine: #F2EEE4;
  /* The pigment pooled along each ridge's crest, mixed toward this. */
  --pool-ink: #2A3B32;
  /* The paper grain's re-centring and strength (src/components/PaperGrain.tsx). */
  --grain-centre: 1;
  --grain-strength: 1;

  --serif: "Instrument Serif", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* The craft scale: 4 / 8 / 12 / 16 / 20 / 28 / 44. */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-ms: 12px;
  --sp-md: 16px;
  --sp-lg: 20px;
  --sp-xl: 28px;
  --sp-xxl: 44px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* The welcome's wordmark (a fifth under the display size), the
     hello's line (the title size plus four) and its mark. */
  --wordmark: 35px;
  --line: 40px;
  --mark: 56px;
  --mark-gap: 28px;
  --column: 28rem;
  --wide: 64rem;
}

@media (min-width: 720px) {
  :root {
    --wordmark: 44px;
    --line: 56px;
    --mark: 72px;
    --mark-gap: 36px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121815;
    --text: #F2EEE4;
    --text-strong: rgba(242, 238, 228, 0.78);
    --text-muted: rgba(242, 238, 228, 0.62);
    --text-faint: rgba(242, 238, 228, 0.55);
    --hairline: rgba(242, 238, 228, 0.20);
    --surface: rgba(242, 238, 228, 0.045);
    --selection: rgba(242, 238, 228, 0.10);
    --moss: #4F5C45;
    --ochre: #CBAE74;
    --pool-ink: #121815;
    --grain-centre: 0.16;
    --grain-strength: 0.25;
  }
}

:root[data-theme="dark"] {
  --bg: #121815;
  --text: #F2EEE4;
  --text-strong: rgba(242, 238, 228, 0.78);
  --text-muted: rgba(242, 238, 228, 0.62);
  --text-faint: rgba(242, 238, 228, 0.55);
  --hairline: rgba(242, 238, 228, 0.20);
  --surface: rgba(242, 238, 228, 0.045);
  --selection: rgba(242, 238, 228, 0.10);
  --moss: #4F5C45;
  --ochre: #CBAE74;
  --pool-ink: #121815;
  --grain-centre: 0.16;
  --grain-strength: 0.25;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--pine); }

/* One screen, laid out like the welcome: the wordmark up top, the
   middle dead centre, the button at the foot over the range. */
.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  isolation: isolate;
}

.mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36vh;
  height: 36dvh;
  pointer-events: none;
  z-index: 0;
}

.mountains svg {
  display: block;
  width: 100%;
  height: 100%;
}

.top, .middle, .footer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--column);
  margin-left: auto;
  margin-right: auto;
}

.top {
  padding: calc(var(--sp-xl) + var(--sp-sm)) var(--sp-lg) 0;
  text-align: center;
}

.wordmark {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--wordmark);
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--text);
  text-decoration: none;
}

/* A line under the wordmark, in the quiz's label style: the body
   face, small, muted. */
.tagline {
  margin: var(--sp-xs) 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}

.middle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl) var(--sp-xl);
}

/* The hello: the mark floats above the words, outside their box, so
   the line stays dead centre. */
.hello {
  position: relative;
  width: 100%;
}

.mark-slot {
  position: absolute;
  top: calc(-1 * (var(--mark) + var(--mark-gap)));
  left: 50%;
  width: var(--mark);
  height: var(--mark);
  margin-left: calc(-0.5 * var(--mark));
}

.mark {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--pine);
  -webkit-mask: url(mark.png) center / contain no-repeat;
  mask: url(mark.png) center / contain no-repeat;
  animation: bob 2200ms cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

@keyframes bob {
  from { transform: translateY(-5px); }
  to { transform: translateY(5px); }
}

.line {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--line);
  line-height: 1.15;
  text-align: center;
  color: var(--text);
  text-wrap: balance;
}

.line .c { visibility: hidden; }
.line .c.on { visibility: visible; }

/* The line under the typed line: what the app is, in one breath. */
.sub {
  margin: var(--sp-md) auto 0;
  max-width: 24rem;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-strong);
}

.footer {
  padding: var(--sp-sm) var(--sp-lg) max(var(--sp-lg), var(--sp-sm) + env(safe-area-inset-bottom));
}

/* The primary button (src/components/onboarding/PrimaryButton.tsx):
   pine, the card radius, Instrument Sans semibold 17 in cream. */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-card);
  background: var(--pine);
  color: var(--on-pine);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease-out;
}

.button:hover { opacity: 0.92; }
.button:active { opacity: 0.85; }
.button:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
}

/* A quiet line under the button, the welcome's legal line. */
.small {
  margin: var(--sp-ms) 0 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: var(--text-faint);
}
.small a { color: var(--text-muted); }

/* ---------- The page below the fold ---------- */

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--sp-xxl) var(--sp-lg);
}

.section-title {
  margin: 0 0 var(--sp-sm);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.3px;
  color: var(--text);
  text-wrap: balance;
}

.section-hint {
  margin: 0 0 var(--sp-xl);
  max-width: 36rem;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* A feature: the words beside a phone, taking turns which side, and
   stacked on a narrow screen. */
.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xl);
  align-items: center;
  padding: var(--sp-xl) 0;
  border-top: 1px solid var(--hairline);
}

.feature:last-of-type { border-bottom: 1px solid var(--hairline); }

@media (min-width: 720px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-xxl);
    padding: var(--sp-xxl) 0;
  }
  .feature.flip .feature-words { order: 2; }
}

.eyebrow {
  margin: 0 0 var(--sp-sm);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pine);
}

.feature h3 {
  margin: 0 0 var(--sp-ms);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.3px;
  color: var(--text);
  text-wrap: balance;
}

.feature p {
  margin: 0 0 var(--sp-ms);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-strong);
}

.feature p:last-child { margin-bottom: 0; }

/* The phone: the screenshot on its own, rounded to the device's corners
   and outlined with a hairline, no drawn bezel. */
.phone {
  display: block;
  width: min(280px, 72vw);
  margin: 0 auto;
  border-radius: 34px;
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 40px rgba(28, 34, 31, 0.12);
  background: var(--bg);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
}

/* A row of paper cards, the plan card's chapter chips grown up. */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}

@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

.card {
  padding: var(--sp-lg);
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--hairline);
}

.card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: var(--sp-ms);
  border-radius: var(--radius-pill);
  background: var(--pine);
  color: var(--on-pine);
  font-size: 14px;
  font-weight: 500;
}

.card h4 {
  margin: 0 0 var(--sp-xs);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  color: var(--text);
}

.card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-strong);
}

/* The foot of every page: the links Apple asks for, the entity, the
   disclaimer the app carries. */
.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg) max(var(--sp-xxl), var(--sp-lg) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
  font-size: 15px;
}

.site-footer nav a {
  color: var(--text-strong);
  text-decoration: none;
}
.site-footer nav a:hover { text-decoration: underline; }

.site-footer .fine {
  margin: var(--sp-md) 0 0;
  max-width: 40rem;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-faint);
}

/* ---------- A reading page: support, privacy, terms ---------- */

.doc {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg) var(--sp-xxl);
}

.doc-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-lg) 0 var(--sp-xl);
}

.doc-top .wordmark {
  font-size: 26px;
  letter-spacing: -0.3px;
}

.doc-top nav {
  display: flex;
  gap: var(--sp-md);
  font-size: 14px;
}

.doc-top nav a {
  color: var(--text-muted);
  text-decoration: none;
}
.doc-top nav a[aria-current] { color: var(--text); }
.doc-top nav a:hover { text-decoration: underline; }

.doc h1 {
  margin: 0 0 var(--sp-xs);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.doc .updated {
  margin: 0 0 var(--sp-xl);
  font-size: 14px;
  color: var(--text-muted);
}

.doc h2 {
  margin: var(--sp-xl) 0 var(--sp-sm);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
}

.doc p {
  margin: 0 0 var(--sp-md);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-strong);
}

.doc p strong { color: var(--text); font-weight: 500; }

.doc ul {
  margin: 0 0 var(--sp-md);
  padding-left: 1.2em;
  color: var(--text-strong);
  line-height: 1.6;
}

/* A contact row on the support page, the option-row idiom. */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: 64px;
  margin: 0 0 var(--sp-ms);
  padding: var(--sp-ms) var(--sp-md);
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1.5px solid transparent;
  color: var(--text);
  text-decoration: none;
}
.row:hover { border-color: var(--pine); }
.row .row-title { font-weight: 500; }
.row .row-detail { font-size: 14px; color: var(--text-muted); }
.row .row-arrow { color: var(--pine); }

/* The §9 paper texture over everything, touches passing through:
   multiplied onto the paper by day, so ink and the button keep their
   colour beneath it; laid over the night ground as a dark grey, so its
   flecks read light there. */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .grain { mix-blend-mode: normal; }
}
:root[data-theme="dark"] .grain { mix-blend-mode: normal; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Arrivals, gated on the fonts so nothing swaps mid-fade: the wordmark
   and the mark fade in, the line types itself, and the button follows
   it up the page once the line is there. */
.fade {
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.ready .fade { opacity: 1; }

.footer {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
}
.typed .footer {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .mark { animation: none; }
  .fade, .footer {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .line .c { visibility: visible; }
}