/* =====================================================================
   HP - Trust & Security / "Your gold. Fully insured. Physically redeemable."
   Figma UK desktop 10125:23057, UK mobile 10129:300. Tokens only.
   Desktop: phone render + hero content on a pale-blue->white gradient band.
   ===================================================================== */

.hp-trust-security {
  /* pale-blue (#f3f8ff) at top -> white at bottom */
  background-image: linear-gradient(to bottom, var(--pale-blue), var(--gray-0));
  padding-block: var(--home-sec-pad-y); /* 80px */
}

.hp-trust-security__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--home-hero-gap); /* 80px */
}

/* --- Media (phone render) ------------------------------------------- */
.hp-trust-security__media {
  flex: 0 0 auto;
  width: var(--hp-trust-security-phone-w);   /* 359px */
  height: var(--hp-trust-security-phone-h);  /* 460px */
}

.hp-trust-security__phone {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Hero content --------------------------------------------------- */
.hp-trust-security__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--home-stack-gap); /* 20px */
}

.hp-trust-security__eyebrow {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20); /* OG Desktop H4 */
  line-height: 1;
  background-image: linear-gradient(
    270deg,
    var(--og-blue) 8.7%,
    var(--hp-trust-security-grad-to) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hp-trust-security__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32); /* OG Desktop H2 */
  line-height: var(--lh-45); /* 45px */
  color: var(--gray-8);
}

/* --- Trust points --------------------------------------------------- */
.hp-trust-security__points {
  display: flex;
  flex-direction: column;
  gap: var(--hp-trust-security-points-gap); /* 30px */
  width: 100%;
}

.hp-trust-security__point {
  display: flex;
  flex-direction: column;
  gap: var(--home-trust-title-gap); /* 5px */
}

.hp-trust-security__point-head {
  display: flex;
  align-items: center;
  gap: var(--btn-gap); /* 8px */
}

.hp-trust-security__icon {
  flex: 0 0 auto;
  width: var(--hp-trust-security-icon-size);  /* 25px */
  height: var(--hp-trust-security-icon-size);
  object-fit: contain;
}

.hp-trust-security__point-title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
  line-height: var(--lh-25); /* 25px */
  color: var(--gray-8);
}

.hp-trust-security__point-body {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16); /* OG Desktop Normal Body */
  line-height: normal;
  color: var(--gray-8);
}

/* --- Tablet (768–1023): Archetype C — keep 2-col, reduce phone width, step text --- */
@media (max-width: 1023.98px) {
  .hp-trust-security {
    padding-block: var(--ba-pad-y); /* 40px */
  }

  .hp-trust-security__inner {
    gap: var(--home-steps-stack-gap); /* 40px */
  }

  .hp-trust-security__media {
    width: 280px;
    height: 360px;
  }

  .hp-trust-security__heading {
    font-size: var(--fs-28);
    line-height: var(--lh-36);
  }

  .hp-trust-security__eyebrow {
    font-size: var(--fs-18);
  }
}

/* --- Large-mobile (600–767): keep 2-col but tighten further ---------- */
@media (max-width: 767.98px) {
  .hp-trust-security__inner {
    gap: var(--home-stack-gap); /* 20px */
  }

  .hp-trust-security__media {
    width: 240px;
    height: 308px;
  }
}

/* --- Mobile (UK mobile 10129:300; 390 frame, 20px gutters) ----------- */
@media (max-width: 599.98px) {
  .hp-trust-security {
    padding-block: var(--ba-pad-y); /* 40px */
  }

  .hp-trust-security__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--home-stack-gap); /* 20px: 10px phone->content + 10px absorbed */
  }

  .hp-trust-security__media {
    width: var(--hp-trust-security-phone-w-mobile);   /* 300px */
    height: var(--hp-trust-security-phone-h-mobile);  /* 385px */
  }

  .hp-trust-security__content {
    align-items: center;
    gap: var(--home-steps-stack-gap); /* 40px */
    width: 100%;
    text-align: center;
  }

  .hp-trust-security__eyebrow {
    font-weight: var(--fw-medium);
    font-size: var(--fs-18); /* OG Mobile H4 */
  }

  .hp-trust-security__heading {
    font-size: var(--fs-26); /* OG Mobile H2 */
    line-height: var(--lh-36); /* 36px */
  }

  .hp-trust-security__points {
    gap: var(--hp-trust-security-points-gap); /* 30px */
  }

  .hp-trust-security__point {
    align-items: center;
  }

  .hp-trust-security__point-head {
    align-items: flex-start;
    justify-content: center;
    gap: var(--home-trust-title-gap); /* 5px */
    width: 100%;
  }

  .hp-trust-security__point-title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-16);
    line-height: normal;
  }

  .hp-trust-security__point-body {
    text-align: center;
  }
}