/* =========================================================
   PRIVACY PAGE — Page Styles Only
   (Hero + Privacy section)
   Uses the SAME hero styling as integrations.css
   ========================================================= */

/* small global tweak for hero offset on narrow desktops */
@media (max-width: 75rem) {
  .section--hero {
    padding-block-start: calc(var(--slab-h-sm) + var(--space-7));
  }

  :where(.hide-sm) {
    display: none;
  }
}

/* =========================================================
   HERO (copied from integrations.css)
   ========================================================= */
.section--hero {
  background: linear-gradient(68.03deg, #1c1c1c 13.12%, #383838 84.57%);

  /* Spacing */
  /* padding-block-start: calc(var(--slab-h) + var(--space-7)); */
  padding-block-end: var(--space-8);

  /* Height */
  min-block-size: clamp(31rem, 58vh, 34rem);

  .hero {
    /* Keep copy above decorative layers */
    position: relative;
    z-index: 1;

    min-block-size: clamp(22.5rem, var(--hero-min), var(--hero-max));
    display: grid;
    grid-template-columns: 1fr;

    /* place content near bottom like the design */
    align-content: end;

    /* lift so text isn’t glued to the bottom */
    padding-block-end: var(--copy-bottom-pad);
    gap: var(--space-4);
  }

  .hero__copy {
    max-inline-size: 75ch;
    /* inline-size: clamp(20rem, 42vw, 48rem); */
    position: relative;
  }

  .hero__title {
    margin: 0;
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    color: var(--text);
  }

  .hero__body {
    margin: 0;
    font-family: var(--font-paragraph);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--text);
  }
}

/* integrations.css had this global rule too */
.hero__glass {
  display: none;
}

/* Stack hero + tune text/icon below ~tablet width (container) */
@media (max-width: 51.25rem) {
  .section--hero {
    .hero {
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }

    .hero__glass {
      justify-self: center;
      inline-size: clamp(7.5rem, 6.5rem + 8vw, 11.25rem);

      .app-vector {
        inline-size: clamp(6rem, 5.25rem + 6vw, 8.75rem);
      }
    }

    .hero {
      .hero__title {
        font-size: var(--fs-h1);
      }

      .hero__body {
        font-size: var(--fs-body);
      }
    }
  }
}

@media (max-width: 26rem) {
  .section--hero {
    .hero {
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }

    .hero__glass {
      justify-self: center;
      order: -1;
    }
  }
}

/* Landscape safeguard for very small phones (single block) */
@media (max-width: 51.25rem) and (orientation: landscape) {
  .section--hero {
    .hero {
      min-block-size: min(80vh, var(--hero-max));
    }

    .hero__glass {
      inline-size: clamp(6rem, 22vw, 8.75rem);
      padding: var(--space-4);

      .app-vector {
        inline-size: clamp(5rem, 4.25rem + 6vw, 7rem);
      }
    }
  }
}

/* Ensure the glass tile never overlaps text at tighter widths */
@media (max-width: 43.75rem) {
  .section--hero {
    .hero {
      grid-template-columns: 1fr;
    }

    .hero__glass {
      justify-self: center;
    }
  }
}

/* =========================================================
   PRIVACY SECTION — Typography + layout (token driven)
   ========================================================= */
.section--privacy {
  padding-block: var(--space-11);
  background: var(--white-surface);
  color: #000;

  strong {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
  }

  /* Layout rhythm */
  .container {
    display: grid;
    gap: var(--space-7);
  }

  .privacy__header {
    max-inline-size: 72ch;
    display: grid;
    gap: var(--space-4);
  }

  /* --------------- Typography (low specificity) --------------- */

  /* All headings in the section */
  :where(h1, h2, h3) {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2); /* 38px */
    line-height: var(--lh-100);
    letter-spacing: var(--ls-0);
    color: inherit;
    margin: 0;
    margin-bottom: 1rem;
  }

  /* All body copy */
  :where(p, li, address) {
    font-family: var(--font-paragraph);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body); /* 14px */
    line-height: var(--lh-normal); /* use --lh-100 if you want strict 100% */
    letter-spacing: var(--ls-0);
    color: inherit;
    margin: 0;
  }

  /* Paragraph spacing */
  :where(p) + :where(p) {
    margin-block-start: var(--space-3);
  }

  /* --------------- Numbered sections --------------- */

  .privacy__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-6);
    counter-reset: privacy;
  }

  .privacy__item {
    max-inline-size: 78ch;
    display: grid;
    gap: var(--space-3);
    counter-increment: privacy;
  }

  /* Add "1. 2. 3." prefix to each heading */
  .privacy__item > h2::before {
    content: counter(privacy) '. ';
    font-variant-numeric: tabular-nums;
  }

  .privacy__bullets {
    margin: 0;
    padding-inline-start: 1.1em;
    display: grid;
    gap: var(--space-2);
    margin-bottom: 1rem;
  }

  .privacy__address {
    font-style: normal;
  }

  :where(a) {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  :where(a:hover) {
    opacity: 0.85;
  }

  @media (max-width: 40rem) {
    .privacy__list {
      gap: var(--space-7);
    }
  }
}