/* Woodmade web pages (privacy, terms, support). Brand: cream #FFFBF5, olive #4E4C3A,
   terracotta #DA8356, serif headings (the app uses New York). Light only, like the app.
   --terracotta is decoration only: on cream it is 2.8:1, too light for text.
   Text links use --terracotta-ink (5.2:1 on cream). */
:root {
  color-scheme: light;
  --cream: #FFFBF5;
  --paper: #FFFFFF;
  --olive: #4E4C3A;
  --ink: #302F24;
  --muted: #6F6B5A;
  --terracotta: #DA8356;
  --terracotta-ink: #A65429;
  --tint: #F6EBDD;
  --line: #E9DFCF;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: ui-serif, "New York", "Source Serif 4", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
a { color: var(--terracotta-ink); }
a:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }

.page { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 16px; }

/* Wordmark with a dimension line under it, the icon's motif. */
.brand { padding: 22px 0 14px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--olive); font: 600 24px/1.1 var(--serif); letter-spacing: -.2px; text-decoration: none;
}
.wordmark img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 6px 18px rgba(78, 76, 58, .18); }
.dim {
  display: block; position: relative; width: 148px; height: 9px; margin-top: 6px;
  border-left: 1.5px solid var(--terracotta); border-right: 1.5px solid var(--terracotta);
}
.dim::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1.5px solid var(--terracotta); }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.tabs a {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--olive); font-size: 14px; font-weight: 500; text-decoration: none;
}
.tabs a[aria-current="page"] { border-color: var(--olive); background: var(--olive); color: var(--cream); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: 24px 20px; margin-bottom: 14px; box-shadow: 0 8px 30px rgba(78, 76, 58, .07);
}
.doc h1, .doc h2, .doc h3 { color: var(--olive); font-family: var(--serif); letter-spacing: -.2px; }
.doc h1 { margin: 0 0 6px; font-size: 34px; font-weight: 600; line-height: 1.12; }
.doc h2 { margin: 30px 0 8px; font-size: 21px; font-weight: 600; line-height: 1.25; }
.doc h3 { margin: 18px 0 4px; font-size: 17px; font-weight: 600; }
.doc p, .doc li { color: var(--ink); }
.doc p { margin: 0 0 12px; }
.doc ul { margin: 0 0 12px; padding-left: 20px; }
.doc li { margin-bottom: 7px; }
.doc li::marker { color: var(--terracotta); }
.doc .meta { color: var(--muted); font-size: 14px; }

.callout {
  margin: 16px 0; padding: 14px 16px; border-radius: 16px;
  background: var(--tint); border-left: 4px solid var(--terracotta);
}
.callout p { margin: 0; color: var(--olive); }
.callout p + p { margin-top: 8px; }

.foot { padding: 20px 0 32px; color: var(--muted); font-size: 14px; text-align: center; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: 8px; }
.foot a { color: var(--olive); }
.foot p { margin: 0; }

@media (min-width: 700px) {
  .card { padding: 36px 40px; }
}