/* The Mental Game of Tennis — legal pages.
   Same paper ground, sage accent and Jost face as the app, so a player who
   taps through from the purchase screen does not land somewhere that looks
   like a different company. */

:root {
  --paper:  #FBFBF8;
  --card:   #FFFFFF;
  --ink:    #262B22;
  --muted:  #5A6153;
  --sage:   #72836A;
  --moss:   #4E5D45;
  --rule:   #E4E5DE;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 64px 24px 96px; }

header { border-bottom: 1px solid var(--rule); padding-bottom: 28px; margin-bottom: 40px; }

.brand {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 500;
  margin: 0 0 14px;
}

h1 { font-size: 2rem; font-weight: 400; margin: 0 0 10px; letter-spacing: -0.01em; }

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

h2 {
  font-size: 1.18rem;
  font-weight: 500;
  margin: 44px 0 12px;
  padding-top: 4px;
}

h3 { font-size: 1rem; font-weight: 500; margin: 26px 0 8px; }

p, li { color: var(--ink); }
li { margin-bottom: 7px; }
ul { padding-left: 22px; }

a { color: var(--moss); text-underline-offset: 3px; }

.lede { font-size: 1.06rem; color: var(--muted); }

/* Where the honest summary goes. The detail below it is the contract; this is
   the part somebody will actually read. */
.summary {
  background: #EEF1EA;
  border-left: 3px solid var(--sage);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 32px 0;
}
.summary p:first-child { margin-top: 0; }
.summary p:last-child  { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 15px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.scroll { overflow-x: auto; }

footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 40px 20px 72px; }
  h1 { font-size: 1.6rem; }
}