/* tarnlo.app stylesheet. Self-contained: system fonts only, no scripts,
   light and dark via prefers-color-scheme. Shared by every page.

   The page is built like a cash book about what's left. The app's allowance
   bar is drawn once at full page width and runs into the phone's own bar;
   amounts sit in a right-hand column with tabular figures; headings hang in
   a left margin column; the app's screens are the only pictures. */

:root {
  color-scheme: light dark;

  --paper: #FBF9F5;
  --raised: #FFFDFA;
  --recessed: #F0EBE4;
  --oxide: #A84A32;
  --on-oxide: #FFFDFA;
  --ink: #231C1A;
  --secondary: #706964;
  --warning: #8F571A;
  --over: #B42318;

  --edge: rgba(35, 28, 26, 0.10);
  --edge-strong: rgba(35, 28, 26, 0.22);
  --rule: rgba(35, 28, 26, 0.55);
  --track: #E6DFD6;
  --shadow-contact: 0 1px 1px rgba(35, 28, 26, 0.05), 0 1px 3px rgba(35, 28, 26, 0.07);
  --shadow-lift: 0 2px 4px rgba(35, 28, 26, 0.06), 0 24px 56px -20px rgba(35, 28, 26, 0.35);
  --shadow-hero: 0 2px 6px rgba(35, 28, 26, 0.06), 0 48px 100px -32px rgba(35, 28, 26, 0.5);
  --bezel: #15110F;
  --bezel-edge: rgba(35, 28, 26, 0.22);
  --bezel-highlight: rgba(255, 255, 255, 0.10);

  /* Category colours from the app's palette (fixture slots). */
  --c-transport: #2A78D6;
  --c-books: #EB6834;
  --c-groceries: #1BAF7A;
  --c-dining: #EDA100;
  --c-free: #0D9488;
  --c-gaming: #377D92;
  --c-shopping: #A94B9A;
  --c-entertainment: #7F8060;

  /* The system face on purpose: the number on this page is set in the same
     face as the number in the phone beside it. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --measure: 52ch;
  --radius-s: 10px;
  --radius: 14px;
  --radius-l: 22px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --content: 1120px;

  /* Phone frame geometry. Everything derives from --w so a frame is equally
     thin at every size. The screenshots are 552 x 1200. */
  --screen-ratio: 2.1739; /* 1200 / 552 */
  --bar-in-screen: 0.3325; /* y of the allowance bar in the Overview screenshot */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171413;
    --raised: #241E1B;
    --recessed: #27211E;
    --oxide: #E5AA94;
    --on-oxide: #1B1512;
    --ink: #F4EEE7;
    --secondary: #B5AAA3;
    --warning: #F7BA52;
    --over: #FF8A80;

    --edge: rgba(244, 238, 231, 0.09);
    --edge-strong: rgba(244, 238, 231, 0.22);
    --rule: rgba(244, 238, 231, 0.55);
    --track: #3A322E;
    --shadow-contact: 0 1px 1px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 56px -20px rgba(0, 0, 0, 0.8);
    --shadow-hero: 0 2px 6px rgba(0, 0, 0, 0.4), 0 48px 100px -32px rgba(0, 0, 0, 0.95);
    --bezel: #0C0A09;
    --bezel-edge: rgba(0, 0, 0, 0.6);
    --bezel-highlight: rgba(255, 255, 255, 0.22);

    --c-transport: #3987E5;
    --c-books: #D95926;
    --c-groceries: #199E70;
    --c-dining: #C98500;
    --c-free: #2DD4BF;
    --c-gaming: #70BACF;
    --c-shopping: #D77CC8;
    --c-entertainment: #B1B393;
  }
}

/* Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem); letter-spacing: -0.025em; line-height: 1.1; }
h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; }

p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--oxide); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--oxide);
  outline-offset: 3px;
  border-radius: 4px;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

ul, ol { margin: 0; padding: 0; }

.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--secondary); }

.lead {
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.25rem);
  line-height: 1.45;
  color: var(--secondary);
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 10px 14px;
  background: var(--raised);
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-s);
  z-index: 10;
}
.skip-link:focus { top: 12px; }

/* Brand marks ------------------------------------------------------------ */
/* The SVG assets ship with a fixed ink fill. They are used as CSS masks so
   the colour follows the appearance without touching the files. */

.symbol, .wordmark {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.symbol {
  width: 26px; height: 26px;
  -webkit-mask-image: url("assets/TarnloSymbol.svg"); mask-image: url("assets/TarnloSymbol.svg");
}
.wordmark {
  width: 72px; height: 24px;
  -webkit-mask-image: url("assets/TarnloWordmark.svg"); mask-image: url("assets/TarnloWordmark.svg");
}
.symbol--sm { width: 22px; height: 22px; }
.wordmark--sm { width: 60px; height: 20px; }
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .symbol, .wordmark { background-color: transparent; background-repeat: no-repeat; background-size: contain; background-position: center; }
  .symbol { background-image: url("assets/TarnloSymbol.svg"); }
  .wordmark { background-image: url("assets/TarnloWordmark.svg"); }
}

/* Layout ----------------------------------------------------------------- */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--content));
  margin-inline: auto;
}

.site-header { padding: 22px 0; }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.9375rem;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--recessed); }
/* The language switch sits apart from the page links. */
.site-nav a.lang { margin-left: 6px; color: var(--secondary); box-shadow: inset 1px 0 0 var(--edge); border-radius: 0 999px 999px 0; }
@media (max-width: 400px) {
  .site-nav a { padding: 8px 9px; font-size: 0.9rem; }
  .site-nav a[href$="#features"] { display: none; }
}

main > section, main > article { padding-block: clamp(56px, 8vw, 112px); }
main > section + section { padding-top: 0; }

/* The ledger grid: heading and a few facts in the margin column, the app in
   the wide column. Every section after the hero uses it, in one direction. */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.entry-copy { display: grid; gap: 20px; align-content: start; }
.entry-copy h2 { max-width: 14ch; }
.entry-copy .lead { max-width: 30ch; }
.entry-app { display: grid; justify-items: start; }
.entry-app > .phones, .entry-app > .ledger, .entry-app > .privacy-app { justify-self: stretch; }
.entry--center { align-items: center; }
.entry--full { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .entry { grid-template-columns: 1fr; gap: 36px; }
  .entry-copy h2 { max-width: 20ch; }
}

/* Buttons ---------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 24px;
  border-radius: var(--radius);
  background: var(--oxide);
  color: var(--on-oxide);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  box-shadow: var(--shadow-contact);
  border: 1px solid transparent;
}
.button:hover { filter: brightness(1.06); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button .glyph { width: 18px; height: 18px; flex: none; }

/* Hero: the level ------------------------------------------------------- */
/* The app's Overview at page scale. Label, the number, then the allowance
   bar drawn edge to edge. The phone stands at the right so that the bar
   enters the frame exactly where the app draws its own bar. Below the bar
   the legend, one sentence and the button sit in the left column while the
   phone continues down the right. */

.hero {
  --w: clamp(264px, 26vw, 340px);
  --pad: max(3px, calc(var(--w) * 0.018));
  --screen-h: calc((var(--w) - 2 * var(--pad)) * var(--screen-ratio));
  --bar-h: 14px;
  --col: calc(100% - var(--w) - clamp(32px, 5vw, 72px));
  padding-top: clamp(24px, 4vw, 56px) !important;
  padding-bottom: 0 !important;
}
.hero-top { max-width: var(--col); margin-inline: 0; }
.hero h1 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--secondary);
  max-width: none;
}
.hero-amount {
  margin: 4px 0 clamp(28px, 4vw, 44px) -0.04em;
  font-size: clamp(3.75rem, 1.25rem + 10vw, 9rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
}

.level .bar { height: var(--bar-h); border-radius: 0; background: var(--track); }
.level .bar .fill { border-radius: 0 999px 999px 0; }
.level .bar .tick { height: 30px; top: -8px; }

.hero-after {
  position: relative;
  padding-top: 12px;
  /* at least as tall as the part of the phone below the bar */
  min-height: calc(var(--screen-h) * (1 - var(--bar-in-screen)) + var(--pad) + 40px);
}
.hero-after > * { max-width: var(--col); }
.hero-after .phone {
  position: absolute;
  right: 0;
  top: calc(-1 * (var(--bar-h) / 2 + var(--pad) + var(--screen-h) * var(--bar-in-screen)));
  --w: inherit;
  max-width: none;
  box-shadow: 0 0 0 1px var(--bezel-edge), var(--shadow-hero);
}
.bar-legend {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--secondary);
  font-size: 1rem;
}
.bar-pace {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
  font-size: 1.125rem;
}
.bar-pace strong { font-weight: 600; }
.hero .lead { margin-top: clamp(32px, 4vw, 56px); max-width: 34ch; }
.hero .button { margin-top: 24px; }

@media (max-width: 860px) {
  .hero { --col: 100%; }
  .hero-after { min-height: 0; }
  .hero-after .phone {
    /* Stay positioned: the bezel highlight (::after) must attach to the phone, not the hero. */
    position: relative;
    top: auto;
    right: auto;
    --w: min(300px, 78vw);
    margin: clamp(40px, 8vw, 64px) auto 0;
  }
}

/* The bar ---------------------------------------------------------------- */

.bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--track);
}
.bar .fill {
  position: absolute; inset: 0 auto 0 0;
  width: 19.2%;
  border-radius: 999px;
  background: var(--oxide);
}
.bar .tick {
  position: absolute;
  left: 22.6%;
  top: -5px;
  width: 2px; height: 20px;
  border-radius: 1px;
  background: var(--ink);
  transform: translateX(-50%);
}

/* The one page-load motion: the level rises once, then the tick appears. */
@media (prefers-reduced-motion: no-preference) {
  .level .fill { animation: fill 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
  .level .tick { animation: tick 0.5s ease 1.2s both; }
  @keyframes fill { from { width: 0; } }
  @keyframes tick { from { opacity: 0; transform: translateX(-50%) scaleY(0.4); } }
}

/* Phone frame ------------------------------------------------------------ */
/* A thin, even bezel (1.8% of the width) with a hairline edge; the corner
   radius follows the screen's own. Percent radii use the 552:1200 aspect so
   they hold at any width: outer 15.3% / 7.18%, screen 14% / 6.44%. */

.phone {
  --w: 276px;
  width: var(--w);
  max-width: 100%;
  margin: 0;
  position: relative;
  background: var(--bezel);
  border-radius: 15.3% / 7.18%;
  padding: max(3px, calc(var(--w) * 0.018));
  box-shadow: 0 0 0 1px var(--bezel-edge), var(--shadow-lift);
}
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--bezel-highlight);
  pointer-events: none;
}
.phone > picture, .phone > img, .phone > .media {
  display: block;
  width: 100%;
  aspect-ratio: 552 / 1200;
  border-radius: 14% / 6.44%;
  overflow: hidden;
  background: var(--paper);
}
.phone picture img { width: 100%; height: 100%; object-fit: cover; }
.phone figcaption {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 14px;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--secondary);
  text-align: center;
  padding-inline: 8px;
}
.phone--captioned { margin-bottom: 48px; }
.phone--sm { --w: 236px; }
.phone--md { --w: 296px; }

/* A row of phones. Scrolls sideways on narrow screens. */
.phones {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  align-items: flex-start;
  list-style: none;
}
.phones > li { flex: none; }
.phones--fit > li { flex: 1 1 0; min-width: 0; max-width: 236px; }
.phones--fit .phone { --w: 100%; }
@media (max-width: 860px) {
  .phones--fit > li { flex: none; max-width: none; }
  .phones--fit .phone { --w: 236px; }
  .phones {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px var(--gutter) 24px;
    margin-inline: calc(-1 * var(--gutter));
    scrollbar-width: thin;
  }
  .phones > li { scroll-snap-align: center; }
}

/* Video in a phone ------------------------------------------------------- */
/* .media stacks a <picture> (the scheme-aware poster) under a <video>. The
   video is transparent until its first frame paints, so the poster shows
   while loading, when the file is missing, and under reduced motion. */

.media { position: relative; }
.media > picture, .media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.media > picture img { width: 100%; height: 100%; object-fit: cover; }
.media > video { object-fit: cover; background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .media > video { display: none; }
}

/* The sum: how the number is made -------------------------------------- */
/* A cash book: description left, amount in a right column, a rule under
   the subtotal, a double rule above the result. */

.sum { list-style: none; max-width: 560px; width: 100%; }
.sum li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--edge);
  font-size: 1.0625rem;
}
.sum-k { color: var(--ink); }
.sum-v { white-space: nowrap; }
.sum .is-minus .sum-k, .sum .is-minus .sum-v { color: var(--secondary); }
.sum .is-total { font-weight: 600; border-top: 1px solid var(--rule); border-bottom-color: var(--edge); }
.sum .is-result {
  font-weight: 600;
  font-size: 1.25rem;
  padding-top: 16px;
  border-top: 3px double var(--rule);
  border-bottom: 0;
}
.sum .is-result .sum-v { color: var(--oxide); }

/* The days of the month, one mark each: passed in ink, today marked with the
   same tick the bar uses, the rest in track. Explains the pace tick. */
.days-figure { margin: clamp(32px, 4vw, 48px) 0 0; max-width: 560px; }
.days {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 28px;
}
.days > span { display: block; height: 14px; border-radius: 2px; background: var(--track); position: relative; }
.days > span.is-past { background: var(--ink); opacity: 0.55; }
.days > span.is-today { background: var(--ink); }
.days > span.is-today::after {
  content: "";
  position: absolute;
  left: 50%; top: -10px;
  width: 2px; height: 8px;
  border-radius: 1px;
  background: var(--ink);
  transform: translateX(-50%);
}
.days-figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--secondary);
}
.sum-notes {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 28px;
  max-width: 560px;
  color: var(--secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Facts: a short list in the margin column --------------------------- */

.facts { list-style: none; display: grid; gap: 10px; max-width: 34ch; }
.facts li { padding-left: 18px; position: relative; font-size: 1rem; line-height: 1.5; }
.facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 8px; height: 2px;
  border-radius: 1px;
  background: var(--oxide);
}
.facts strong { font-weight: 600; }

/* Limit tiles reproduced in HTML -------------------------------------- */

.tiles-figure { margin: 0; width: 100%; max-width: 480px; }
.tiles-figure figcaption {
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--secondary);
}
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
}
.tile {
  background: var(--raised);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-contact);
  padding: 16px;
}
.tile-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9375rem;
  margin-bottom: 8px;
}
.tile-name svg { width: 18px; height: 18px; flex: none; }
.tile-amount { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.tile-state { font-size: 0.875rem; color: var(--secondary); margin: 2px 0 12px; }
.tile .bar { height: 6px; }
.tile .bar .tick { height: 12px; top: -3px; }
.tile.is-over .tile-amount { color: var(--over); }
.tile.is-over .fill { background: var(--over); }
.tile.is-warn .fill { background: var(--warning); }

/* Limits: tiles beside the phone row */
.limits-app { display: grid; gap: clamp(32px, 4vw, 56px); width: 100%; }

/* Key / value rows: the book's own columns ----------------------------- */

.ledger { list-style: none; border-top: 1px solid var(--rule); width: 100%; }
.ledger li {
  display: grid;
  grid-template-columns: minmax(10ch, 14ch) 1fr;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--edge);
}
.ledger .k { color: var(--secondary); font-size: 1rem; }
.ledger .v { font-size: 1.0625rem; }
.ledger .example {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 12px;
  background: var(--recessed);
  border-radius: var(--radius-s);
  font-size: 0.9375rem;
}
.after-list { margin-top: 20px; }
@media (max-width: 480px) { .ledger li { grid-template-columns: 1fr; gap: 2px; } }

/* Privacy: the ledger and the phone side by side in the wide column */
.privacy-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  width: 100%;
}
@media (max-width: 1060px) { .privacy-app { grid-template-columns: 1fr; } }

/* Download --------------------------------------------------------------- */

.download {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding-top: clamp(32px, 5vw, 56px);
  border-top: 3px double var(--rule);
}
.app-icon {
  width: clamp(80px, 10vw, 112px);
  border-radius: 22.4%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--edge-strong), var(--shadow-lift);
}
.app-icon img { width: 100%; }
.download h2 { margin-bottom: 6px; }
.download-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 22px;
}
.download .fine { font-size: 0.9375rem; color: var(--secondary); }
@media (max-width: 560px) {
  .download { grid-template-columns: 1fr; }
  .download .button { width: 100%; }
}

/* Name note -------------------------------------------------------------- */

.name-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  max-width: 56ch;
}
.name-note .symbol { width: 48px; height: 48px; color: var(--oxide); margin-top: 2px; }
.name-note h2 { font-size: 1.125rem; margin-bottom: 6px; }
.name-note p { color: var(--secondary); }

/* Footer ----------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--edge);
  padding: 28px 0 44px;
  font-size: 0.9375rem;
  color: var(--secondary);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Document pages (privacy, support, 404) -------------------------------- */
/* The same ledger grid: the title and contents in the margin column, the
   text in the wide column. */

.doc { padding-top: clamp(24px, 4vw, 48px) !important; }
.doc .entry { gap: clamp(32px, 5vw, 80px); }
.doc-head { position: sticky; top: 24px; display: grid; gap: 18px; }
.doc-head h1 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.25rem); letter-spacing: -0.025em; }
.doc-head .lead { max-width: 30ch; }
.doc-updated { font-size: 0.9375rem; color: var(--secondary); }
.doc-head nav { border-top: 1px solid var(--rule); padding-top: 6px; }
.doc-head nav ol { list-style: none; }
.doc-head nav a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid var(--edge);
  font-size: 0.9375rem;
}
.doc-head nav a:hover { color: var(--oxide); }

.doc-body { max-width: var(--measure); }
.doc-body > * + * { margin-top: 1em; }
.doc-body h2 {
  font-size: 1.375rem;
  margin-top: 2em;
  margin-bottom: 0.4em;
  scroll-margin-top: 24px;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font-size: 1.125rem; margin-top: 1.6em; }
.doc-body ul { padding-left: 1.2em; }
.doc-body li + li { margin-top: 0.4em; }
.doc-body address { font-style: normal; line-height: 1.5; }

/* The short version of a legal document, shown before the full text. */
.doc-summary {
  padding: 0 0 20px;
  border-bottom: 3px double var(--rule);
}
.doc-summary h2 { font-size: 1rem; margin: 0 0 6px; letter-spacing: 0; color: var(--secondary); font-weight: 500; }
.doc-summary p { font-size: 1.1875rem; line-height: 1.45; }

@media (max-width: 860px) {
  .doc-head { position: static; }
  .doc-head nav { display: none; }
}

/* Contact choices on the support page: two entries in the book. */
.ways { list-style: none; border-top: 1px solid var(--rule); }
.doc-body .ways { padding-left: 0; }
.ways li {
  display: grid;
  grid-template-columns: minmax(10ch, 14ch) 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--edge);
}
.ways li + li { margin-top: 0; }
.ways h3 { font-size: 1rem; font-weight: 500; color: var(--secondary); margin: 0; letter-spacing: 0; }
.doc-body .ways h3 { margin-top: 0; }
.ways p { font-size: 1.0625rem; }
.doc-body .ways p + p { margin-top: 0; }
.doc-body .ledger { padding-left: 0; }
.doc-body .ledger li + li { margin-top: 0; }
.ways .path {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--ink);
}
.ways .path span { background: var(--recessed); border-radius: 8px; padding: 4px 9px; }
.ways .path svg { width: 14px; height: 14px; color: var(--secondary); }
.ways a.email { font-size: 1.0625rem; font-weight: 600; margin-top: 10px; display: inline-block; }
@media (max-width: 480px) { .ways li { grid-template-columns: 1fr; gap: 4px; } }

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--edge); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 36px 14px 0;
  font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--secondary);
  border-bottom: 2px solid var(--secondary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 160ms ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details > div { padding: 0 0 18px; color: var(--ink); }
.faq details > div > * + * { margin-top: 0.7em; }
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
  html { scroll-behavior: auto; }
}