/* ═══════════════════════════════════════════════════════════════
   NoSaaS.me — legal pages

   /terms/ and /privacy/ are static HTML outside the Elm app, so they
   cannot use the app's class names. They share this one stylesheet
   rather than each carrying its own copy of the design.

   Same system as styles.css: navy chrome, bone reading surface, amber
   signal, Archivo / IBM Plex.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink: #0f1d30;
  --ink-2: #16273f;
  --rule: #2b3f5a;
  --text: #edf1f6;
  --text-dim: #a9b5c2;
  --text-faint: #8a97a6;

  --bone: #efede7;
  --bone-2: #e5e2da;
  --rule-bone: #c8c2b3;
  --text-bone: #141c26;
  --text-bone-dim: #4a5462;

  --signal: #e08a3c;
  --signal-bone: #854c0c;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* Legal text is a reading surface, so it sits in the bone register. */
  background: var(--bone);
  color: var(--text-bone-dim);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  min-height: 100vh;
}

/* ─── Nav ───────────────────────────────────────────────────── */
.top-nav {
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
  /* Aligns the nav to the same 1160px rail the rest of the site uses,
     without needing an inner wrapper these static pages don't have. */
  padding-inline: max(1.5rem, calc((100% - 1160px) / 2 + 1.5rem));
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.top-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.top-nav a:hover {
  color: var(--text);
}

/* The wordmark strikes out the thing the company declines to be. */
.top-nav .logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--text);
  margin-right: auto;
}

.top-nav .logo span {
  position: relative;
  color: var(--text-dim);
}

.top-nav .logo span::after {
  content: '';
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 52%;
  height: 0.1em;
  border-radius: 1px;
  background: var(--signal);
  transform: translateY(-50%);
}

/* ─── Page ──────────────────────────────────────────────────── */
/* Same rail as the nav; the reading measure is capped on the children so
   the document starts where the wordmark does. */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 6rem;
}

.container > * {
  max-width: 760px;
}

.page-header {
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule-bone);
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  font-variation-settings: 'wdth' 108;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text-bone);
  margin-bottom: 0.75rem;
}

.page-header .effective {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-bone-dim);
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  font-variation-settings: 'wdth' 104;
  letter-spacing: -0.02em;
  color: var(--text-bone);
  margin: 3rem 0 0.75rem;
}

h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-bone);
  margin: 1.75rem 0 0.5rem;
}

p {
  margin-bottom: 1rem;
  color: var(--text-bone-dim);
}

strong {
  color: var(--text-bone);
  font-weight: 600;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bone-2);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

a {
  color: var(--signal-bone);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--text-bone);
}

:focus-visible {
  outline: 2px solid var(--signal-bone);
  outline-offset: 3px;
}

ol,
ul {
  margin: 0.75rem 0 1rem 1.5rem;
}

li {
  margin-bottom: 0.5rem;
  color: var(--text-bone-dim);
}

hr {
  border: none;
  border-top: 1px solid var(--rule-bone);
  margin: 2.5rem 0;
}

/* Blocks of statutory all-caps text. */
.caps {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-bone-dim);
}

/* ─── Tables ────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.875rem;
}

th {
  background: var(--bone-2);
  color: var(--text-bone);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rule-bone);
}

td {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rule-bone);
  color: var(--text-bone-dim);
  vertical-align: top;
}

/* ─── Footer ────────────────────────────────────────────────── */
.footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-bone);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-bone-dim);
}

.footer a {
  color: var(--signal-bone);
  text-decoration: none;
}

.footer a:hover {
  color: var(--text-bone);
}

.footer p + p {
  margin-top: 0.4rem;
}

@media (max-width: 600px) {
  .top-nav {
    gap: 1rem;
    padding-inline: 1rem;
  }

  .top-nav a {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }
}