/* Legal documents — deliberately switch OFF the app's lowercase display voice
   and into a readable, professional serif with normal sentence case, generous
   measure, and comfortable line-height. Shown both as standalone pages (for the
   App Store Connect Privacy Policy / Support URLs) and inside the site's pop-up
   sheet via an <iframe>. Shares the app's warm surface + sage accent. The sans
   chrome (meta, footer, back-link) uses the SYSTEM font, matching the main site;
   the "dilly&dally" kicker keeps the Outfit wordmark; the long-form body stays a
   reading serif. */

/* Outfit — self-hosted (SIL OFL, assets/fonts/), same files the main site uses.
   Only the "dilly&dally" kicker wordmark uses it here (--font-logo); the sans
   chrome is the system font and the document body keeps its serif. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/outfit-light.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/outfit-regular.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/outfit-medium.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/outfit-semibold.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/outfit-bold.woff2") format("woff2"); }

:root {
  --bg: #FAFAF8;
  --paper: #FFFFFF;
  --ink: #26221C;      /* warmer ink than the app chrome, easier to read at length */
  --ink-2: #5c564d;
  --ink-3: #8a8378;
  --accent: #4A7A6B;
  --border: #EBEBEB;
  --border-strong: #D5D2CB;
  --tint: #EFF3F1;
  --serif: "Charter", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  /* system font for the sans chrome (matches the main site); Outfit only for the wordmark */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-logo: "Outfit", var(--sans);   /* the "dilly&dally" kicker wordmark only */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

.doc {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 26px 96px;
}

/* the "dilly&dally" kicker — Outfit LIGHT (300), the one weight the wordmark is
   ever set in, here and on the main site (the app's Theme.logoFont is .light) */
.doc .kicker {
  font-family: var(--font-logo);
  text-transform: lowercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  font-weight: 300;
  color: var(--ink-3);
  margin: 0 0 14px;
}

.doc h1 {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.doc .meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 30px;
}

.doc .lede {
  background: var(--tint);
  border: 1px solid #dfe8e4;
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 17px;
  margin: 0 0 30px;
}
.doc .lede strong { font-weight: 600; }

.doc h2 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 34px 0 10px;
}

.doc p { margin: 0 0 16px; }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin: 0 0 9px; }

.doc a { color: var(--accent); text-decoration: none; border-bottom: 1px solid #cadbd4; }
.doc a:hover { border-bottom-color: var(--accent); }

.doc hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; }

.doc .footer-note {
  font-family: var(--sans);
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  margin-top: 30px;
}

/* A small "back to dilly&dally" link on the standalone pages (hidden when the
   page is embedded in the site's modal, where a close button already exists). */
.home-link {
  font-family: var(--sans);
  display: inline-block;
  margin-bottom: 26px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--accent);
}
.home-link::before { content: "\2190\00a0"; }

/* When embedded in the site's pop-up sheet (?embed=1), the sheet already has a
   close button and a slimmer top, so hide the "back" link and tighten the top.
   overscroll-behavior keeps the iframe's scroll from chaining to (and rubber-
   banding) the landing page behind the sheet on touch devices. */
.embed { overscroll-behavior: none; }
.embed .home-link { display: none; }
.embed .doc { padding-top: 30px; }

/* No dark-mode variant: the app is light-mode only (Info.plist
   UIUserInterfaceStyle: Light) and the marketing site is always light, so the
   legal docs stay light too — otherwise they'd flip dark inside the white
   pop-up sheet and look broken. */