/* ==========================================================================
   Legal — the privacy policy and the terms
   Loaded by layouts/legal.njk (pageCss: legal), which both pages use.

   The head borrows the short-page hero the About page uses, so a reader
   arriving from the footer lands somewhere that looks related. Under it the
   document sits beside a contents list that stays on screen and follows the
   reader (legal.js); on a phone the list is a disclosure above the document.

   Shared furniture (.mf-btn*, .mf-eyebrow, .mf-grad-text) comes from
   framework/components.css. Colour, type, radius and shadow all come from
   tokens — no raw hex below except inside the glow's gradient ramp, where the
   stops are the design.
   ========================================================================== */

/* --- Head ------------------------------------------------------------------ */
.mf-legal-hero {
  position: relative;
  overflow: clip;
  padding: 120px 48px 0;
  text-align: center;
}

.mf-legal-hero__wrap {
  position: relative;
  z-index: 1;
  max-inline-size: 760px;
  margin-inline: auto;
}

.mf-legal-hero__glow {
  position: absolute;
  z-index: 0;
  inline-size: min(720px, 110%);
  aspect-ratio: 1;
  inset-inline-start: 50%;
  inset-block-start: 20%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(232 84 10 / 0.2) 0%,
    rgb(240 120 40 / 0.11) 38%,
    rgb(248 178 112 / 0.05) 62%,
    rgb(248 178 112 / 0) 78%
  );
  filter: blur(80px);
  pointer-events: none;
}

.mf-legal-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(36px, 3.8vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 20px 0 0;
  text-wrap: balance;
}

.mf-legal-hero__lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin: 22px auto 0;
  max-inline-size: 640px;
}

.mf-legal-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The three documents as a row of pills; the one you are on is filled. */
.mf-legal-switch {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 40px auto 0;
  padding: 6px;
  inline-size: fit-content;
  max-inline-size: 100%;
  border-radius: var(--radius-pill);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card-sm);
}

.mf-legal-switch__item {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.mf-legal-switch__item:hover { color: var(--ink); background: var(--paper-400); text-decoration: none; }
.mf-legal-switch__item:focus-visible { outline: 2px solid var(--flare-500); outline-offset: 2px; }

.mf-legal-switch__item.is-current {
  color: var(--ink-on-dark);
  background: var(--grad-cta);
}

/* --- Body ------------------------------------------------------------------ */
.mf-legal {
  padding: 64px 48px 120px;
}

.mf-legal__inner {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 64px;
  max-inline-size: 1120px;
  margin-inline: auto;
  align-items: start;
}

/* The contents list, a column that stays put as the document scrolls.
   .mf-nav sits 100px tall under the top of the screen (see home.js). */
.mf-legal__aside {
  position: sticky;
  inset-block-start: 116px;
}

.mf-legal__toc {
  border-radius: var(--radius-tile);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card-sm);
}

.mf-legal__toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  list-style: none;
  cursor: default;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mf-legal__toc-head::-webkit-details-marker { display: none; }
.mf-legal__toc-head svg { display: none; }

.mf-legal__toc-list {
  padding: 0 10px 12px;
}

.mf-legal__toc-group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

/* A part heading between groups, where the document has two parts. */
.mf-legal__toc-part {
  margin: 0;
  padding: 14px 10px 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare-600);
}

.mf-legal__toc-part:first-child { padding-block-start: 2px; }

.mf-legal__toc-link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-inset);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.mf-legal__toc-link:hover { color: var(--ink); background: var(--paper-400); text-decoration: none; }
.mf-legal__toc-link:focus-visible { outline: 2px solid var(--flare-500); outline-offset: -2px; }

.mf-legal__toc-num {
  flex: none;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}

/* The section being read: lit, with a short rule down its left edge. */
.mf-legal__toc-link.is-on {
  color: var(--ink);
  background: var(--paper-400);
  font-weight: var(--weight-semibold);
}

.mf-legal__toc-link.is-on .mf-legal__toc-num { color: var(--flare-600); }

.mf-legal__toc-link.is-on::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 8px;
  inline-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--grad-brand-v);
}

/* --- The document ------------------------------------------------------- */
.mf-legal__doc {
  min-inline-size: 0;
  max-inline-size: 720px;
}

/* A part heading between the two documents on the terms page. */
.mf-legal__part {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 36px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flare-600);
}

.mf-legal__part::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--border-light);
}

.mf-legal__section + .mf-legal__part { margin-block-start: 72px; }

.mf-legal__section {
  /* Room for the sticky nav when a contents link lands here. */
  scroll-margin-block-start: 124px;
  padding-block-end: 44px;
  margin-block-end: 44px;
  border-block-end: 1px solid var(--border-light);
}

.mf-legal__section:last-of-type {
  border-block-end: 0;
  margin-block-end: 0;
  padding-block-end: 0;
}

.mf-legal__section h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-inline-size: none;
}

.mf-legal__num {
  flex: none;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  color: var(--flare-600);
}

.mf-legal__section h3 {
  margin: 26px 0 8px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--ink);
  max-inline-size: none;
}

.mf-legal__section h3:first-of-type { margin-block-start: 0; }

.mf-legal__section p,
.mf-legal__section li,
.mf-legal__section dd {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-muted);
  max-inline-size: none;
}

.mf-legal__section p { margin: 0 0 14px; }
.mf-legal__section p:last-child { margin-block-end: 0; }

.mf-legal__section ul {
  margin: 0 0 14px;
  padding: 0 0 0 22px;
}

.mf-legal__section li { margin-block-end: 6px; }
.mf-legal__section li::marker { color: var(--flare-600); }

.mf-legal__section a {
  color: var(--flare-600);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--flare-a40);
  text-underline-offset: 0.18em;
}

.mf-legal__section a:hover { text-decoration-color: var(--flare-600); }

/* Term / definition pairs: the term in the UI face, set off from the body. */
.mf-legal__terms {
  margin: 0;
  display: grid;
  gap: 18px;
}

.mf-legal__terms dt {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.mf-legal__terms dd {
  margin: 6px 0 0;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--flare-a25);
}

/* --- Foot ------------------------------------------------------------------ */
.mf-legal__foot {
  margin-block-start: 64px;
  padding: 32px 36px;
  border-radius: var(--radius-stage);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card-sm);
  display: grid;
  gap: 8px;
  justify-items: start;
}

.mf-legal__foot-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.mf-legal__foot-body {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-muted);
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .mf-legal-hero { padding: 96px 22px 0; }
  .mf-legal { padding: 40px 22px 96px; }
  .mf-legal__inner { grid-template-columns: 1fr; gap: 32px; }

  /* The list becomes a disclosure above the document. */
  .mf-legal__aside { position: static; }
  .mf-legal__toc-head { cursor: pointer; }
  .mf-legal__toc-head svg { display: block; transition: rotate 0.25s ease; }
  .mf-legal__toc[open] .mf-legal__toc-head svg { rotate: 180deg; }
  .mf-legal__section { scroll-margin-block-start: 100px; }
  .mf-legal__foot { padding: 26px 24px; }
}

@media (max-width: 560px) {
  .mf-legal-switch { inline-size: 100%; flex-direction: column; border-radius: var(--radius-tile); }
  .mf-legal-switch__item { text-align: center; border-radius: var(--radius-inset); }
  .mf-legal__section h2 { flex-direction: column; gap: 4px; }
}