/* ==========================================================================
   legal.css — Cookie Policy / legal text page (DESKTOP+MOBILE/Cookie frames)

   The layout package ships no HTML for this page, only the Figma frames, so
   the markup and these rules are new. Every value is taken from an existing
   token in global.css — nothing here redefines the design system.
   ========================================================================== */

/* Frame 78 — padding 64px 80px, gap 48px between title block and meta */
.legal-head {
  padding-block: var(--sp-16);
}

.legal-head h1 {
  /* The frame uses the ExtraBold/H2 style (52px) for this page's H1, not the
     68px H1 style — so the size is overridden, the rest is inherited. */
  font-size: var(--fs-h2);
}

.legal-head__meta {
  margin-block-start: var(--sp-2);
  color: var(--c-text-muted);
}

/* The text column is 720px inside the 1280px container in both frames */
.legal__body {
  max-inline-size: 45rem; /* 720px */
}

/* 48px above and below each block, hairline between them */
.legal__block {
  padding-block: var(--sp-12);
  border-block-end: 1px solid var(--c-line-cream);
}

.legal__block:last-child {
  border-block-end: 0;
}

.legal__block h2 {
  /* SemiBold/Subtitle 2, i.e. the H3 style — these are H2 elements because of
     where they sit in the outline, so the type is restated here. */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  margin-block-end: var(--sp-3);
}

.legal__block p {
  color: var(--c-text-muted);
}

.legal__block p + p {
  margin-block-start: var(--sp-3);
}

.legal__checks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
}

.legal__checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--c-text-muted);
}

.legal__checks svg {
  flex: 0 0 auto;
  inline-size: 1.25rem; /* 20px */
  block-size: 1.25rem;
  margin-block-start: 0.1875rem; /* optical centring on the first line */
  color: var(--c-accent-light); /* #F9893E — the check mark in the frame */
}

/* "This privacy policy is effective as of ..." — 80px above, 24px below */
.legal-note {
  /* #D1D1D1 is used only here in the whole file, so it stays local rather
     than becoming a global token. */
  --c-legal-note: #d1d1d1;
  padding-block: var(--sp-20) var(--sp-6);
}

.legal-note p {
  max-inline-size: 45rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--c-legal-note);
}