/* "Built for privacy" — bevel.health clone
   A dark rounded card on white, with a giant translucent embossed padlock
   watermark, a mint-green top-center radial glow, centered white headline +
   60%-white subline, and a cursor-following dot-grid spotlight (GSAP).

   Loaded as a static <link> in layout.tsx (not via Lightning CSS), so the
   unprefixed `mask` and the radial gradients survive verbatim. */

.privacy-section {
  /* z-20 + opaque white so this section covers the showcase's fixed iPhone as
     it scrolls past (the role IntegritySection used to play — now removed). */
  position: relative;
  z-index: 20;
  background: #fff;
  padding: clamp(0px, 8vw, 160px) 0;
}

.privacy-section__container {
  /* Match bevel: card max-width 1440px centered with ~36px side gutters at
     1512vw. Use a 1512px content cap so the auto margins reproduce the 36px
     gutter; the card fills it up to 1440px. */
  max-width: 1512px;
  margin: 0 auto;
  padding: 0 36px;
}

.privacy-card {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  /* 530px (mobile) → 650px (desktop ≥1440), matching bevel exactly */
  height: clamp(33.125rem, 30.982rem + 10.714vw, 40.625rem);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1f2025;
  background-image: radial-gradient(
    circle at 50% 0px,
    rgba(255, 255, 255, 0) 40%,
    rgba(63, 255, 194, 0.2) 90%,
    rgba(63, 255, 194, 0.4)
  );
}

/* L1 — the giant translucent padlock watermark (solid white painted through
   the SVG mask, exactly like the live site; the emboss + frosted body come
   from filters baked into the SVG itself). */
.privacy-card__lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  height: 121%;
  aspect-ratio: 547 / 781.45;
  pointer-events: none;
  background-color: #fff;
  -webkit-mask: url("/images/privacy/privacy-lock.svg") center / cover no-repeat;
  mask: url("/images/privacy/privacy-lock.svg") center / cover no-repeat;
}

/* L1 — faint white dot grid, revealed only by the cursor spotlight (z behind text) */
.privacy-card__dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background-image: url("/images/privacy/dot.svg");
  background-size: 16px;
  background-repeat: repeat;
  background-position: 50% 50%;
}

/* L2 — centered text over the lock */
.privacy-card__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 600px;
  padding: 0 16px;
  text-align: center;
}

.privacy-card__heading {
  margin: 0;
  font-family: -apple-system, system-ui, Inter, "Segoe UI", sans-serif;
  font-size: clamp(2.594rem, 1.6rem + 2.65vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}

.privacy-card__subline {
  margin: 0;
  font-family: -apple-system, system-ui, Inter, "Segoe UI", sans-serif;
  font-size: clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
  .privacy-section {
    /* was padding:0 → the dark card butted right up against the section above
       (the showcase's black cap). Add a white top gap to separate them. */
    padding: clamp(40px, 12vw, 72px) 0 clamp(24px, 7vw, 44px);
  }

  .privacy-section__container {
    padding: 0 16px;
  }

  .privacy-card__text {
    max-width: 91.67%;
    padding: 0 8px;
    gap: 12px;
  }

  .privacy-card__heading {
    line-height: 1.08;
  }

  /* the lock was sized `height:121%` + mask `cover`, which on the narrow mobile
     card zoomed/cropped the padlock huge. Size it by WIDTH and switch the mask to
     `contain` so the WHOLE lock shows, smaller and centered. Mobile-only. */
  .privacy-card__lock {
    height: auto;
    width: 56%;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}