/* Legal pages — Privacy Policy, Terms of Service, Account Deletion.
   Layout and spacing follow flowty's /terms-of-use, measured at 1440x900:

   | | flowty | ours |
   |---|---|---|
   | page title      | 127.5px          | --fs-display (~111px) |
   | intro / meta    | 16.5px           | --fs-lead |
   | clause gap      | 75px             | --sp-20 (80px) |
   | number badge    | 90x90, radius 30 | same, fluid |
   | badge -> column | 30px             | --sp-8 |
   | clause heading  | 72px             | --fs-clause (~61px) |
   | clause body     | 21px / lh 25.41  | --fs-md / 1.5 |
   | body measure    | 643px            | ~654px |
   | between clauses | 1px hairline     | --hair-soft |

   The one deliberate change is the page title: flowty's legal title is set at
   their hero size, ours is a step below it, because on this site the hero stays
   the largest type on any page. */

.legal {
  padding: calc(var(--nav-h) + var(--sp-20)) var(--gutter) var(--sp-32);
  background: var(--bg-3);
  color: var(--text);
}

/* Nothing may pass legibly behind the transparent navbar. On the landing page
   that is done per item, because there are a handful of short blocks and each
   can dissolve on its own beat.
   **That does not work on a legal page.** A clause's body can be taller than
   the viewport, so fading the whole element the moment its TOP reaches the bar
   would dim copy the reader is still in the middle of — and fading all ~100
   paragraphs separately means ~100 rect reads every frame.
   A viewport-anchored scrim fades the pixels in the band instead, whichever
   element they belong to. It has no visible edge here because it dissolves into
   a flat ground — the reason the Rev 14 scrims failed was that they sat over a
   shader, not a solid colour. */
.legal-scrim {
  position: fixed;
  inset: 0 0 auto 0;
  height: calc(var(--nav-h) + var(--sp-10));
  z-index: 39;                  /* under the navbar (40), over the content */
  pointer-events: none;
  background: linear-gradient(
    var(--bg-3) 0%,
    var(--bg-3) 58%,
    rgba(247, 246, 245, 0) 100%
  );
  transition: opacity 0.3s ease;   /* matches .navbar::after, so they cross-fade */
}

/* Over the footer, initNavTint() puts data-nav-tint="grad" on the bar and
   .navbar::after paints the hero gradient — the same orange-to-transparent the
   landing page uses. This scrim has to get out of the way for that.
   Not merely because it would be covered: the two bands are the same height but
   fade on different ramps (grad is solid to 46%, the scrim to 58%), so through
   the back half of the gradient the grey would show THROUGH the warm fade and
   dirty it. The sibling combinator is safe here — the scrim is the element
   immediately after the navbar in every legal template. */
.navbar[data-nav-tint] ~ .legal-scrim { opacity: 0; }

/* ---- Header ------------------------------------------------------------ */
.legal__head { padding-bottom: var(--sp-16); }
.legal__title {
  font-size: var(--fs-display);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.legal__intro {
  max-width: 60ch;
  margin-top: var(--sp-10);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
}
.legal__updated {
  display: block;
  margin-top: var(--sp-6);
  /* A timestamp, not a subheading. At --fs-lead it carried the weight of body
     copy directly under the page title; small and semibold reads as metadata —
     findable when you go looking for it, silent when you are not. */
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* A postal address is a block of lines, not a list. These are authored as
   `('a', ...)` in tools-legal.py, which emits one <address> with <br> between
   the lines. They used to be 'l', so every line of the company's mailing
   address carried a dash bullet. `font-style: normal` because a UA italicises
   <address> by default. */
.legal__addr {
  margin-top: var(--sp-4);
  font-style: normal;
  line-height: 1.7;
}

.legal__rule { height: 1px; background: var(--hair-soft); }

/* ---- Clauses ----------------------------------------------------------- */
.legal__clauses {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding-top: var(--sp-20);
}
.legal__clause {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
}
.legal__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(56px, 6.25vw, 90px);
  aspect-ratio: 1;
  border-radius: clamp(18px, 2.1vw, 30px);
  background: var(--bg-3);
  border: 1px solid var(--hair-card);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.98vw, 1.78rem);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text);
}
/* The copy is inset well to the right of the number, as flowty's is — the
   number sits alone against the gutter and the text starts about a third of
   the way across.
   These do NOT collapse on their own: `clamp(0px, 25.8vw, 380px)` still
   resolves to 25.8vw on a phone, which left the copy inset ~97px with 194px of
   measure and pushed the page into horizontal scroll. The narrow breakpoints
   zero them explicitly. */
.legal__col {
  flex: 1;
  min-width: 0;
  padding-top: var(--sp-5);
  padding-left: clamp(0px, 25.8vw, 380px);
  padding-right: clamp(0px, 16vw, 240px);
}
.legal__h {
  font-size: var(--fs-clause);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.legal__col > * + * { margin-top: var(--sp-6); }
.legal__col p,
.legal__col li {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-muted);
}
/* A sub-heading inside a clause — Account Deletion needs two levels. */
.legal__sub {
  font-family: var(--font-head);
  font-weight: var(--font-head-weight);
  font-size: var(--fs-lg);
  line-height: 1.15;
  color: var(--text);
}

.legal__col ul,
.legal__col ol { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Numbered steps carry their own count, so they get a numeral rather than the
   dash the unordered lists use.
   The selector is deliberately one class deeper than `.legal__col li::before`:
   at equal specificity the dash rule below wins on source order and the
   numerals silently vanish. */
.legal__steps { counter-reset: step; }
.legal__steps li { counter-increment: step; }
.legal__col .legal__steps li::before {
  content: counter(step);
  top: 0;
  width: auto; height: auto;
  background: none;
  font-family: var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text);
}
.legal__col li { padding-left: var(--sp-6); position: relative; }
.legal__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px; height: 1px;
  background: var(--text-muted);
}
/* Links inside the copy — the URLs and email addresses in the legal text.
   Brand orange, and underlined: colour alone is not enough to mark a link. */
.legal__col a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
}
.legal__col a:hover { text-decoration-thickness: 2px; }
.legal__sep { height: 1px; background: var(--hair-soft); }

/* ---- Back to the site -------------------------------------------------- */
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-20);
  font-size: var(--fs-lead);
  color: var(--text-muted);
}
.legal__back:hover { color: var(--brand); }

/* Portrait counts as stacked here too — see the note in css/hero.css. A 1024px
   wide iPad in portrait is past the width line but is shaped like a tall phone,
   and was taking the desktop layout. */
@media (max-width: 1023px), (orientation: portrait) {
  .legal { padding-top: calc(var(--nav-h) + var(--sp-12)); }
  .legal__clauses { gap: var(--sp-16); padding-top: var(--sp-16); }
  .legal__clause { gap: var(--sp-5); }
  .legal__col { padding-left: 0; padding-right: 0; }
}
@media (max-width: 767px) {
  .legal { padding-bottom: var(--sp-20); }
  /* The number moves above the copy — a badge plus an indent leaves no measure */
  .legal__clause { flex-direction: column; gap: var(--sp-5); }
  .legal__col { padding-top: 0; }
}