/* SyncTake — document pages (privacy, support).
 *
 * The home page is one full-viewport slate that never scrolls. These pages
 * carry real reading, so they take the same palette, atmosphere and wordmark
 * and put a document under it: Big Shoulders for headings, IBM Plex Sans for
 * the prose, IBM Plex Mono for the slate-field labels down the left.
 *
 * Plex Sans rather than more Plex Mono is deliberate. The home page can afford
 * mono because it holds forty words; a privacy policy in mono at length is
 * punishing to read, and the sans sibling keeps the family without the cost.
 */

:root {
  --bg: #0b0b0d;
  --surface: #121216;
  --line: #26262c;
  --ink: #f2f0ea;
  --ink-dim: #8e8d95;
  --amber: #ffb100;
  --tally: #ff3b30;
  --display: "Big Shoulders Display", sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Same grain as the home page, at half strength — enough to be the same
   place, quiet enough to read against. */
.grain {
  position: fixed; inset: -100px; z-index: 5; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- the clapper seam + header ---- */

.seam {
  height: 8px;
  background: repeating-linear-gradient(
    -55deg,
    var(--ink) 0 14px,
    var(--bg) 14px 28px
  );
}

.top {
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 13, .92);
  position: sticky; top: 0; z-index: 4;
  backdrop-filter: blur(8px);
}
.top .row {
  max-width: 860px; margin: 0 auto;
  padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* The wordmark, same lockup as the home page: SYNC rides the stick, TAKE is
   the board. */
.wm { display: inline-flex; align-items: baseline; gap: .1em; text-decoration: none; color: var(--ink); }
.wm span { font-family: var(--display); font-weight: 500; letter-spacing: .34em; font-size: 15px; }
.wm b { font-family: var(--display); font-weight: 900; letter-spacing: .02em; font-size: 21px; }
.wm i {
  display: inline-block; width: 26px; height: 11px; margin-left: .5em;
  background: repeating-linear-gradient(-55deg, var(--ink) 0 5px, transparent 5px 10px);
}

.top nav { display: flex; gap: 20px; }
.top nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
}
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--amber); }

/* ---- page head ---- */

main { max-width: 860px; margin: 0 auto; padding: 56px 24px 40px; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--amber);
}

h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(44px, 8vw, 76px); line-height: .95; letter-spacing: -.01em;
  margin: 14px 0 18px;
}

.lede { font-size: 18px; color: var(--ink-dim); max-width: 62ch; }

.stamp {
  display: inline-block; margin-top: 26px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px;
}

/* ---- the route sheet ----
   Each section is a place the data can be. The mono tag on the left is the
   slate field; the prose is what happens there. */

.route { margin-top: 56px; border-top: 1px solid var(--line); }

.leg {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 32px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.leg > .tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber);
  padding-top: .5em;
}
.leg.never > .tag { color: var(--tally); }

.leg h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 30px; line-height: 1.1; letter-spacing: .01em;
  margin-bottom: 12px;
}

.leg p + p { margin-top: 14px; }
.leg ul { margin: 14px 0 0 0; padding: 0; list-style: none; }
.leg li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
}
.leg li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 8px; height: 2px; background: var(--amber);
}
.leg.never li::before { background: var(--tally); }

.leg b { color: var(--ink); font-weight: 600; }
.leg a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
code {
  font-family: var(--mono); font-size: .88em;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px;
}

/* ---- panels (support page) ---- */

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 26px 28px; margin-top: 22px;
}
.panel h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim); font-weight: 400;
  margin-bottom: 12px;
}
.panel .big {
  font-family: var(--display); font-weight: 700; font-size: 28px;
}
.panel .big a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--amber); }
.panel .big a:hover { color: var(--amber); }

/* A field list that looks like the slate's four boxes. */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 20px; }
.fields div { padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fields dt { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 5px; }
.fields dd { font-family: var(--mono); font-size: 14px; }

/* ---- footer ---- */

footer {
  border-top: 1px solid var(--line);
  margin-top: 64px;
}
footer .row {
  max-width: 860px; margin: 0 auto; padding: 26px 24px 56px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--ink-dim);
}
footer a { color: var(--ink-dim); }
footer a:hover { color: var(--amber); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px;
}

@media (max-width: 680px) {
  .leg { grid-template-columns: 1fr; gap: 10px; }
  .leg > .tag { padding-top: 0; }
  main { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}