/* The app's own palette and type, so the legal pages read as the same product
   rather than as a bolted-on obligation. */
:root {
  --screen: #f7f3ea;
  --canvas: #e9e3d7;
  --ink: #1c1914;
  --primary: #44644a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
  background: var(--screen);
  min-height: 100vh;
}
h1 { font-size: 1.7rem; line-height: 1.3; margin: 0 0 .4rem; }
h2 { font-size: 1.15rem; margin: 2.6rem 0 .7rem; }
h3 { font-size: 1rem; margin: 1.8rem 0 .5rem; }
.sub { color: rgba(28, 25, 20, .55); margin: 0 0 2.5rem; font-size: .95rem; }
.lede {
  border-left: 3px solid var(--primary);
  padding: .1rem 0 .1rem 1.1rem;
  margin: 0 0 2.5rem;
  color: rgba(28, 25, 20, .8);
}
a { color: var(--primary); }
code { background: var(--canvas); padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .93rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid rgba(28,25,20,.1); vertical-align: top; }
th { font-weight: 600; }
footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid rgba(28,25,20,.1); font-size: .9rem; color: rgba(28,25,20,.5); }
ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }
@media (prefers-color-scheme: dark) {
  :root { --screen: #16140f; --canvas: #0f0e0a; --ink: #ece7dc; --primary: #8fb397; }
  .sub, .lede { color: rgba(236,231,220,.7); }
  th, td, footer { border-color: rgba(236,231,220,.12); }
}

/* Tables on a phone.
   The three-column tables render at 688px, which on a 390px handset pushes the
   whole page sideways — and App Review reads these on a handset. Making the
   table itself the scrolling element keeps the page still and confines the
   scroll to the thing that needs it.
   The 30rem floor is chosen rather than `max-content`: unconstrained, the
   widest table wants 1,987px and asks for 1,645px of dragging. At 30rem the
   columns still wrap prose sensibly and the scroll is about 140px — a nudge
   rather than an expedition. */
@media (max-width: 40rem) {
  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main table thead,
  main table tbody { display: table; width: 100%; min-width: 30rem; }
}