/* =====================
   m_privacy — "Security & Privacy" section.

   Source of truth:
     Desktop: Figma node 4201:4091
     Mobile:  Figma node 4215:12380
   No animations.

   Layout:
     - Section uses .m_feature base (dark BG, vertical padding, font Inter).
       Override default padding: 96px top, 0 bottom (visual bleed) on desktop;
       64px top / 0 bottom on mobile.
     - Header: max-width 700, tag + title only (no subtitle).
     - 2-column row (NOT u-grid-custom — design uses flex with explicit
       phone width + flex:1 features col, gap 48px).
     - Phone column: stylized iPhone-shape with screen image inside,
       big lock SVG overlaid, soft green ellipse glow behind, glassmorphism
       gradient over the lower screen half.
     - Features column: 3 stacked items with stroke-icon + title + body.

   Mobile: column stack — header, then features, then phone at the bottom.
   Mobile breakpoint: <= 991px.
===================== */

/* ---- Section overrides over .m_feature base ----------------------- */

.m_privacy {
  padding: 6rem 0 0;                     /* 96px top, 0 bottom */
  overflow: clip;                        /* contain glow/phone bleed */
}
@media (max-width: 991px) {
  .m_privacy { padding: 4rem 0 0; }      /* 64px top mobile */
}

.m_privacy > .u-container {
  gap: 4rem;                             /* 64px header→layout */
  align-items: center;
}
@media (max-width: 991px) {
  .m_privacy > .u-container { gap: 3rem; }
}

.m_privacy .m_feature_header { max-width: 43.75rem; }   /* 700px */

/* ---- Two-column layout (phone | features) ------------------------- */

.m_privacy_layout {
  display: flex;
  align-items: flex-start;
  gap: 3rem;                             /* 48px between columns */
  width: 100%;
  max-width: 80rem;                      /* 1280px */
  margin: 0 auto;
  position: relative;
}
@media (max-width: 991px) {
  .m_privacy_layout {
    flex-direction: column;
    align-items: center;
    gap: 3rem;                           /* 48 mobile between blocks */
  }
}

/* ---- Phone mockup column ------------------------------------------ */

.m_privacy_phone {
  position: relative;
  flex: 0 0 auto;
  width: 32.9375rem;                     /* 527px */
  height: 26.4375rem;                    /* 423px */
  overflow: clip;
  /* Push phone slightly so glow can extend outside */
  isolation: isolate;
}
@media (max-width: 991px) {
  .m_privacy_phone {
    order: 2;                            /* phone after features on mobile */
    width: 100%;
    max-width: 23rem;                    /* 368px */
    height: 22.4375rem;                  /* 359px */
  }
}

/* Soft green ellipse glow behind phone */
.m_privacy_phone_glow {
  position: absolute;
  left: -22%;
  top: -65%;
  width: 90%;
  aspect-ratio: 1.05 / 1;
  background: radial-gradient(
    ellipse closest-side,
    rgba(144, 249, 156, 0.35) 0%,
    rgba(144, 249, 156, 0.1) 45%,
    transparent 75%
  );
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

/* iPhone shape — tall rounded rectangle, partly visible at the top of
   the clipped wrapper. Holds the dashboard screen image inside. */
.m_privacy_phone_frame {
  position: absolute;
  left: 5.8125rem;                       /* 93px */
  top: 0;
  width: 24rem;                          /* 384px */
  height: 48.8125rem;                    /* 781px */
  border-radius: 4.125rem;               /* 66px */
  background: #0f0b09;
  border: 0.3125rem solid #1a1a1a;
  box-shadow:
    19.31px 19.31px 38.62px -4px rgba(16, 24, 40, 0.2),
    9.655px 9.655px 19.31px -2px rgba(16, 24, 40, 0.08);
  overflow: hidden;
  opacity: 0.85;
  z-index: 1;
}
@media (max-width: 991px) {
  .m_privacy_phone_frame {
    left: 2.09rem;                       /* 33.5px (mobile Figma) */
    width: 18.94rem;                     /* 303px */
    height: 38.51rem;                    /* 616px */
    border-radius: 3.25rem;              /* 52px */
  }
}

.m_privacy_phone_screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Glassmorphism overlay — fades the lower half of the screen, blurs slightly,
   adds a faint green tint matching the brand. */
.m_privacy_phone_blur {
  position: absolute;
  left: 7.0625rem;                       /* 113px */
  top: 8.625rem;                         /* 138px */
  width: 21.4375rem;                     /* 343px */
  height: 19.8125rem;                    /* 317px */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 37.6%,
    rgba(144, 249, 156, 0.09) 100%
  );
  backdrop-filter: blur(3.5px);
  -webkit-backdrop-filter: blur(3.5px);
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 991px) {
  .m_privacy_phone_blur {
    left: 3.08rem;                       /* 49.28px */
    top: 6.8rem;                         /* 108.88px */
    width: 16.91rem;                     /* 270.6px */
    height: 15.63rem;                    /* 250.1px */
    backdrop-filter: blur(2.76px);
    -webkit-backdrop-filter: blur(2.76px);
  }
}

/* Big lock icon — green, overlaid on top of the screen */
.m_privacy_phone_lock {
  position: absolute;
  left: 15.9375rem;                      /* 255px */
  top: 14.75rem;                         /* 236px */
  width: 3.78625rem;                     /* 60.58px */
  height: 3.78625rem;
  color: var(--color--main-green, #90F99C);
  z-index: 3;
}
@media (max-width: 991px) {
  .m_privacy_phone_lock {
    /* Roughly center on the smaller phone */
    left: calc(50% - 1.32rem);
    top: 11.5rem;
    width: 2.64rem;                      /* 42.3px */
    height: 2.64rem;
  }
}
.m_privacy_phone_lock svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Features column ---------------------------------------------- */

.m_privacy_features {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;                             /* 48px between items */
  max-width: 37.5rem;                    /* 600px */
  min-width: 0;
}
@media (max-width: 991px) {
  .m_privacy_features {
    order: 1;                            /* features above phone on mobile */
    width: 100%;
    max-width: 100%;
    gap: 1.5rem;                         /* 24px mobile between items */
  }
}

/* ---- Single feature item ------------------------------------------ */

.m_privacy_feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;                             /* 16px between icon and content */
  width: 100%;
}

.m_privacy_feature_icon {
  flex-shrink: 0;
  width: 1.5rem;                         /* 24px */
  height: 1.5rem;
  margin-top: 0.375rem;                  /* 6px — Figma py-[6px] */
  color: var(--color--main-green, #90F99C);
}
.m_privacy_feature_icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.m_privacy_feature_content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;                         /* 6px between title and text */
}

.m_privacy_feature_title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 600;                      /* SemiBold */
  font-size: 1.25rem;                    /* 20px desktop */
  line-height: 1.5;                      /* 30/20 */
  color: var(--color--white, #ffffff);
}
@media (max-width: 991px) {
  .m_privacy_feature_title {
    font-size: 1.125rem;                 /* 18px mobile */
    line-height: 1.5556;                 /* 28/18 */
  }
}

.m_privacy_feature_text {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1rem;                       /* 16px */
  line-height: 1.5;                      /* 24/16 */
  color: rgba(255, 255, 255, 0.7);
}