/*
 * StepKnock. The legal pages.
 *
 * privacy.html and terms.html are plain documents, not scrollcraft pages. They
 * load the design system and this file, and nothing else: no engine, no clips,
 * no script. Someone reading a privacy policy wants to read it.
 *
 * The design system already styles h1, h2, p and a in ds/base.css, so almost
 * everything here is layout. Same tokens, same type, same colour as the
 * landing page, so the two do not read as different sites.
 *
 * Namespace is sk-legal. Nothing here touches an sk- class the package owns.
 */

body {
  background: var(--sk-color-background);
  color: var(--sk-color-text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------- mast ---- *
 * Deliberately NOT .sk-mast. The landing page's masthead is fixed and inert
 * (pointer-events: none) because it floats over a moving world. Here it is a
 * real link back, in normal flow, and reusing the class name would invite
 * someone to "unify" two things that want opposite behaviour.
 */
.sk-legal__mast {
  padding: var(--sk-space-6) var(--sk-space-8);
  border-bottom: 1px solid var(--sk-color-divider);
}

.sk-legal__home {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-space-3);
  text-decoration: none;
  color: var(--sk-color-text-primary);
  border-radius: var(--sk-radius-sm);
}

.sk-legal__home:hover { color: var(--sk-color-text-primary); }

.sk-legal__home:focus-visible {
  outline: 2px solid var(--sk-color-focus-ring);
  outline-offset: 4px;
}

.sk-legal__word {
  font-family: var(--sk-font-family-heading);
  font-size: var(--sk-font-size-h3);
  font-weight: var(--sk-font-weight-medium);
  letter-spacing: var(--sk-letter-spacing-h3);
}

/* ---------------------------------------------------------- the document -- */
.sk-legal__doc {
  flex: 1 0 auto;
  width: 100%;
  /* A measure, not a container width. Legal prose is read line by line and
     long lines are where people lose their place. */
  max-width: 68ch;
  margin: 0 auto;
  padding: var(--sk-space-12) var(--sk-space-8) var(--sk-space-12);
}

.sk-legal__doc h1 { margin: 0 0 var(--sk-space-3); }

.sk-legal__updated {
  color: var(--sk-color-text-secondary);
  font-size: var(--sk-font-size-caption);
  line-height: var(--sk-line-height-caption);
  margin: 0 0 var(--sk-space-8);
}

.sk-legal__doc p { margin: 0 0 var(--sk-space-6); }

/* Each clause is one paragraph opening with its own label, because that is how
   the text is written. Keeping the label inside the paragraph rather than
   promoting it to a heading keeps the wording exactly as approved, the
   trailing period included. */
.sk-legal__doc strong {
  color: var(--sk-color-text-primary);
  font-weight: var(--sk-font-weight-medium);
}

.sk-legal__doc a { overflow-wrap: anywhere; }

/* -------------------------------------------------------------- footer --- */
.sk-legal__foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--sk-color-divider);
  padding: var(--sk-space-8);
}

.sk-legal__foot-inner {
  max-width: 68ch;
  margin: 0 auto;
  display: grid;
  gap: var(--sk-space-2);
}

.sk-legal__foot p { margin: 0; }

.sk-legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-2) var(--sk-space-5);
}

@media (max-width: 640px) {
  .sk-legal__mast { padding: var(--sk-space-5); }
  .sk-legal__doc { padding: var(--sk-space-8) var(--sk-space-5); }
  .sk-legal__foot { padding: var(--sk-space-6) var(--sk-space-5); }
}