/* OWN — site v2 · pages other than the homepage (sign-up and the info pages).
   Loaded after base.css. */

:root {
  /* tokens the sign-up flow's layout is written in */
  --ink-soft: var(--muted);
  --ink-mute: var(--muted-2);
  --ink-faint: #a3aba8;
  --paper-warm: #fff;
  --paper-soft: #f4f4f1ad;
  --paper-mute: #f4f4f185;
  --obsidian: var(--ocean);
  --gain: var(--forest-mid);
  --r-card-sm: 16px;
  --r-input: var(--button-radius);
  --r-pill: var(--button-radius);
  --shadow-card: 0 12px 30px -18px #1d3a3640;
  --shadow-hero: 0 24px 50px -28px #1d3a3666;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

body.is-page { background: var(--paper); }
.page-main { display: block; }

/* ---------- info pages: one calm column ---------- */
.doc {
  width: min(760px, calc(100% - var(--gutter)));
  margin: 0 auto;
  padding: 64px 0 120px;
}
.doc .doc-head { margin-bottom: 44px; }
.doc .doc-eyebrow {
  margin: 0 0 18px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal);
}
.doc h1 {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -.03em;
  color: var(--ink);
}
.doc h1 em { font-style: italic; color: var(--ocean); }
.doc .doc-lede {
  max-width: 620px; margin: 22px 0 0;
  font-size: 18px; line-height: 1.6; color: var(--muted);
}
.doc .doc-updated { margin: 18px 0 0; font-size: 13px; color: var(--muted-2); }

/* the short version, up front */
.doc .doc-points {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 0 0 56px; padding: 0;
}
.doc .doc-points li {
  padding: 20px 22px;
  border: 1px solid var(--glass-edge); border-radius: 18px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow), 0 0 0 1px #7a8a861a;
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.doc .doc-points li b { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ink); }

/* base.css sizes and spaces every `main > section` for the homepage; here the
   sections are rows of one column. */
.doc > section { width: auto; margin: 0; padding: 32px 0; border-top: 1px solid var(--line); }
.doc > section:first-of-type { border-top: 0; padding-top: 0; }
.doc h2 {
  margin: 0 0 14px;
  font-family: var(--serif); font-weight: 400;
  font-size: 28px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink);
}
.doc p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.doc p:last-child { margin-bottom: 0; }
.doc ul.doc-list { margin: 0 0 14px; padding: 0; }
.doc ul.doc-list li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
}
.doc ul.doc-list li::before {
  content: ''; position: absolute; left: 4px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
}
.doc a:not(.button) { color: var(--ocean); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #0e3a3e59; }
.doc a:not(.button):hover { text-decoration-color: var(--ocean); }
.doc b, .doc strong { font-weight: 600; color: var(--ink); }

/* a plain two-column table: "what" and "why" */
.doc .doc-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 15px; }
.doc .doc-table th, .doc .doc-table td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.5; }
.doc .doc-table th { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.doc .doc-table td { color: var(--ink-2); }
.doc .doc-table td:first-child { width: 34%; font-weight: 600; color: var(--ink); }

.doc .doc-note {
  margin: 18px 0 0; padding: 16px 18px;
  border-radius: 14px; background: var(--ivory);
  font-size: 14.5px; line-height: 1.55; color: var(--muted);
}
.doc .doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (max-width: 600px) {
  .doc { padding-top: 36px; }
  .doc .doc-points { grid-template-columns: 1fr; }
  .doc .doc-table td:first-child { width: 40%; }
}