/* ==========================================================================
   Scout — legal documents (privacy policy; terms when it lands)

   Layered on main.css, which owns the brand tokens, Manrope and the black
   ground. Its own file on purpose: the landing page must not pay for these
   bytes, and /terms will reuse this untouched.

   The brief is a DOCUMENT OF RECORD, not a marketing page. People arrive here
   for one of two reasons — an App Store reviewer verifying the thing exists, or
   a user hunting one specific clause (nearly always "what happens when I delete
   my account"). Both need to FIND something in eleven sections. So the design
   spends its budget on navigation and legibility, and the lime is wayfinding
   rather than decoration. A showy privacy policy reads as untrustworthy.
   ========================================================================== */

:root {
  --legal-measure: 62ch;
  --legal-surface: #121212;
  --legal-line: #262626;
  --legal-body: #d9d9d6;   /* warm off-white — #fff on #000 vibrates over 3000 words */
  --legal-muted: #8a8a85;
}

/* Reading progress. A privacy policy is long and people want to know how long;
   a 2px rule answers that without a word. Width is driven by JS. */
.legal-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 0;
  background: var(--lime);
  z-index: 10;
  will-change: width;
}

/* Grain. A flat #000 field this tall reads as a void; a little tooth gives it
   surface. Fixed so it does not slide against the text while scrolling. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.legal-shell { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

/* Padding is the homepage's, token for token, including the safe-area insets —
   .hero__layout uses exactly this. --pad-x moves 20 -> 52 -> 64px across the
   breakpoints, so the logo lands on the same vertical as it does on the home
   page at every width. It was previously inside a centred max-width container,
   which pushed it right of where the homepage puts it on anything wide. */
.legal-head {
  border-bottom: 1px solid var(--legal-line);
  padding:
    calc(var(--pad-top) + env(safe-area-inset-top))
    calc(var(--pad-x) + env(safe-area-inset-right))
    40px
    calc(var(--pad-x) + env(safe-area-inset-left));
}

/* The real site header — .brand and .social markup is lifted verbatim from
   index.html so the two cannot drift. Those components live inside the hero's
   named-area grid there, so the only thing needing undoing is their placement;
   every visual property (logo height, the ringed 30px icons with their 44px
   hit area, the lime hover) already applies. */
.legal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 44px;
}
.legal-topbar .brand,
.legal-topbar .social,
.legal-topbar .legal {
  grid-area: auto;
  justify-self: auto;
  align-self: auto;
}

/* The homepage puts legal immediately left of the socials in the top row
   (grid-template-areas: "brand . legal social"). Same grouping here. */
.legal-topbar__end {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* No hero video behind this one, so the shadow that lifts the links off the
   footage is just muddying them. */
.legal-topbar .legal { text-shadow: none; }

/* You are here. The nav is otherwise identical to the homepage's. */
.legal-topbar .legal a[aria-current="page"] {
  color: var(--lime);
  font-weight: 800;
}

.legal-eyebrow {
  display: block;
  margin: 20px 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
}

.legal-title {
  margin: 0;
  font-size: clamp(38px, 9vw, 76px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--white);
}

.legal-meta {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--legal-muted);
}
.legal-meta time { color: var(--legal-body); }

/* --------------------------------------------------------------------------
   Two-column shell: contents rail + document
   -------------------------------------------------------------------------- */

/* Left edge matches the head, so the contents rail lines up under the logo.
   Capped and LEFT-aligned rather than centred: the homepage's copy hugs the
   left too, and centring would drift the whole column away from the logo on
   wide displays — which is what made the header look misaligned. */
.legal-body {
  max-width: 1320px;
  margin: 0 auto 0 0;
  padding:
    0
    calc(var(--pad-x) + env(safe-area-inset-right))
    120px
    calc(var(--pad-x) + env(safe-area-inset-left));
}

/* Mobile: the rail becomes a collapsed disclosure so eleven links do not stand
   between the reader and the first paragraph. */
.legal-toc {
  margin: 28px 0 8px;
  border: 1px solid var(--legal-line);
  border-radius: 12px;
  background: var(--legal-surface);
}
.legal-toc > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}
.legal-toc > summary::-webkit-details-marker { display: none; }
.legal-toc > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.legal-toc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.legal-toc ol {
  margin: 0;
  padding: 4px 18px 18px;
  list-style: none;
  counter-reset: toc;
}
.legal-toc li { counter-increment: toc; margin: 0; }
.legal-toc a {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--legal-muted);
  transition: color 0.16s ease;
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  width: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #4a4a46;
  transition: color 0.16s ease;
}
.legal-toc a:hover { color: var(--white); }
.legal-toc a:hover::before,
.legal-toc a[aria-current="true"]::before { color: var(--lime); }
.legal-toc a[aria-current="true"] { color: var(--white); font-weight: 700; }

/* --------------------------------------------------------------------------
   The document
   -------------------------------------------------------------------------- */

.legal-doc {
  max-width: var(--legal-measure);
  padding-top: 36px;
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.72;
  letter-spacing: 0.004em;
  color: var(--legal-body);
}

.legal-lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--white);
}

.legal-doc p { margin: 0 0 18px; }
.legal-doc ul { margin: 0 0 20px; padding-left: 0; list-style: none; }
.legal-doc li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.legal-doc li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.72em;
  width: 6px; height: 1px;
  background: var(--lime);
}
.legal-doc strong { color: var(--white); font-weight: 600; }

.legal-doc a {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-doc a:hover { text-decoration-thickness: 2px; }

/* Sections. scroll-margin keeps anchored headings clear of the progress bar. */
.legal-doc section { scroll-margin-top: 24px; padding-top: 44px; }
.legal-doc section + section { border-top: 1px solid var(--legal-line); }

.legal-doc h2 {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.legal-doc h2 .num {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--lime);
  flex: none;
}

.legal-doc h3 {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 28px 0 10px;
}

/* Callouts. Reserved for the two clauses people actually come here to find:
   what happens to their data on deletion, and that kudos are not money.
   If everything is highlighted, nothing is. */
.legal-note {
  position: relative;
  margin: 0 0 20px;
  padding: 20px 22px;
  background: var(--legal-surface);
  border: 1px solid var(--legal-line);
  border-left: 3px solid var(--lime);
  border-radius: 0 12px 12px 0;
}
.legal-note p:last-child { margin-bottom: 0; }
.legal-note__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}

.legal-contact {
  font-style: normal;
  margin: 0 0 20px;
  padding: 22px 24px;
  background: var(--legal-surface);
  border: 1px solid var(--legal-line);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}
.legal-contact strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: 0.01em;
}
.legal-contact a { word-break: break-word; }

.legal-foot {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--legal-line);
  font-family: var(--font);
  font-size: 13px;
  color: var(--legal-muted);
}

/* --------------------------------------------------------------------------
   Desktop: rail becomes a sticky sidebar, always open
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .legal-body {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .legal-toc {
    position: sticky;
    top: 32px;
    margin: 36px 0 0;
    border: 0;
    background: none;
    border-left: 1px solid var(--legal-line);
    border-radius: 0;
  }
  .legal-toc > summary { display: none; }
  .legal-toc ol { padding: 0; }
  .legal-toc a { padding: 8px 0 8px 18px; margin-left: -1px; border-left: 1px solid transparent; }
  .legal-toc a[aria-current="true"] { border-left-color: var(--lime); }
  .legal-doc { padding-top: 44px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-progress, .legal-toc a, .legal-toc > summary::after, .social a {
    transition: none !important;
  }
  html { scroll-behavior: auto !important; }
}

/* People print privacy policies, and reviewers save them to PDF. Black-ground
   pages print as a solid ink block otherwise. */
@media print {
  body::after, .legal-progress, .legal-toc, .social { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .legal-doc, .legal-title, .legal-doc h2, .legal-doc h3, .legal-doc strong { color: #000 !important; }
  .legal-doc { max-width: none; font-size: 11pt; }
  .legal-note, .legal-contact { border: 1px solid #999 !important; background: none !important; }
  .legal-doc section { page-break-inside: avoid; }
  .legal-doc a { color: #000 !important; }
  .legal-doc a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}