/* The website pages (27 Oct 2026): About, Privacy, Terms and Foresight, from
   Paul's canvas "Synthsight splash page" (Privacy and Terms boards). Snow for
   reading, ink text, Inter for text and Inter Tight for display, and a dark
   band at the foot with the front page's photograph. Colours are var(--ss-*)
   from lib/theme/themes.ts. Sizes, corners and motion are the app's
   (app/globals.css), written into each page by lib/site-pages.ts. Light only.
   No script. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(./fonts/inter-normal-400.woff2) format("woff2");
  unicode-range:
    U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(./fonts/inter-tight-normal.woff2) format("woff2");
  unicode-range:
    U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ss-page);
  color: var(--ss-fg);
  font-family: var(--ss-font-sans);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--ss-link);
}
a:focus-visible {
  outline: 2px solid var(--ss-focus);
  outline-offset: 3px;
}
::selection {
  background: var(--ss-selection);
  color: var(--ss-selection-fg);
}

/* The mark and wordmark, as on the front page. */
.home {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.home svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.wordmark {
  font-family: var(--ss-font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.01em;
}

/* Sign in: an outline pill, quiet, as on the front page. */
.signin {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--ss-border-strong);
  color: var(--ss-fg);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color var(--transition-duration-base) var(--ease-calm),
    border-color var(--transition-duration-base) var(--ease-calm);
}
.signin:hover {
  background: var(--ss-hover);
  border-color: var(--ss-fg);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px clamp(20px, 5vw, 64px);
  border-bottom: 1px solid var(--ss-border);
}

/* Page frame and opening. */
.page {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px clamp(20px, 5vw, 64px) 120px;
  flex: 1 0 auto;
}
.opening {
  max-width: 672px;
  margin-bottom: 56px;
}
.label {
  margin: 0 0 16px;
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  font-weight: 500;
  color: var(--ss-fg-3);
}
h1 {
  margin: 0;
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.meta {
  margin: 16px 0 0;
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--ss-fg-3);
}
.lead {
  margin: 20px 0 0;
  font-size: var(--text-lead);
  line-height: 30px;
  color: var(--ss-fg-2);
}

/* Legal pages: a contents list beside a 672px text column. */
.cols {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  align-items: flex-start;
}
.toc {
  flex: 0 0 200px;
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
.toc a {
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--ss-fg-2);
  text-decoration: none;
}
.toc a:hover {
  color: var(--ss-fg);
}
.text {
  flex: 999 1 560px;
  min-width: 0;
  max-width: 672px;
}

/* Sections. */
.part {
  max-width: 672px;
  scroll-margin-top: 32px;
}
.part + .part {
  margin-top: 48px;
}
h2 {
  margin: 0 0 12px;
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--tracking-title);
}
h3 {
  margin: 0 0 4px;
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  font-weight: 500;
}
.doc {
  font-size: 17px;
  line-height: 28px;
}
.doc p,
.doc ul {
  margin: 0;
}
.doc > :not(:first-child) {
  margin-top: 16px;
}
.doc ul {
  padding-left: 20px;
}
.doc li + li {
  margin-top: 10px;
}
.doc strong {
  font-weight: 500;
}
.doc .lead {
  margin: 0;
}
.doc .item + .item {
  margin-top: 20px;
}

/* Tables sit in a ringed box that scrolls sideways on a phone. */
.scroll {
  overflow-x: auto;
  border: 1px solid var(--ss-border);
  border-radius: var(--radius-row);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
}
th {
  font-weight: 500;
  background: var(--ss-surface);
}
td {
  border-top: 1px solid var(--ss-border);
}
td + td {
  color: var(--ss-fg-2);
}

/* The dark band at the foot of every page, with the front page's photograph. */
.band {
  color: var(--ss-home-fg);
  background-color: var(--ss-home-ground);
  background-image:
    linear-gradient(90deg, var(--ss-home-scrim-strong) 0%, var(--ss-home-scrim-mid) 40%, var(--ss-home-scrim-clear) 70%),
    url(./mannequin.jpg);
  background-image:
    linear-gradient(90deg, var(--ss-home-scrim-strong) 0%, var(--ss-home-scrim-mid) 40%, var(--ss-home-scrim-clear) 70%),
    image-set(url(./mannequin-1280.avif) type("image/avif"), url(./mannequin-1280.webp) type("image/webp"));
  background-size: cover;
  background-position: 80% 35%;
  padding: 72px clamp(20px, 5vw, 64px) 32px;
}
.band-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 56px;
}
.band .home svg {
  width: 22px;
  height: 22px;
}
.band .wordmark {
  font-size: 22px;
  line-height: 28px;
}
.band .line {
  margin: 20px 0 0;
  max-width: 360px;
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.band .signin {
  height: 44px;
  padding: 0 22px;
  border-color: var(--ss-home-line);
  color: var(--ss-home-fg);
}
.band .signin:hover {
  background: var(--ss-home-fill-hover);
  border-color: var(--ss-home-line-hover);
}
.legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--ss-home-fg-3);
}
.legal a {
  color: var(--ss-home-fg-3);
}
.legal a:hover {
  color: var(--ss-home-fg);
}
.band a:focus-visible {
  outline-color: var(--ss-home-focus);
}

@media (max-width: 860px) {
  .toc {
    display: none;
  }
  h1 {
    font-size: 40px;
    line-height: 46px;
  }
  .page {
    padding-top: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .signin {
    transition: none;
  }
}