/* ═══ Security ═════════════════════════════════════════════ */
/* No stacking context over the illustration — see .hero-figure in site.css. */
.se-hero { padding-bottom: 64px; }

.se-hero .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 72px;
  align-items: center;
}
.se-hero .h-page { max-width: 14ch; }
.se-hero .lede { max-width: 42ch; }

/* Pulled past the page edge so the two goats read as meeting over the
   copy rather than sitting politely opposite it. */
.se-goat { margin-right: -28px; }
.se-goat img { height: 380px; }

.se-actions {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.se-standards { padding: 64px 0 96px; }

.se-standards .wrap {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 72px;
  align-items: center;
}
.se-standards-copy { padding-left: 48px; }
.se-standards .h-sec { line-height: 1.12; max-width: 20ch; }
.se-standards .body-copy { max-width: 50ch; margin-top: 20px; }

/* The six commitments orbit the SOC 2 mark rather than listing beside
   it — the badge is the claim, the labels are what it covers. Each
   label's inner edge is pinned to a 145px circle around the badge
   centre, so the set stays a ring rather than two ragged columns. Their
   places are fixed, so they are keyed on source order: left column top
   to bottom, then right column top to bottom. */
.se-halo {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.se-seal {
  width: 190px;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.se-halo > p {
  position: absolute;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--cm-ink-secondary);
}
.se-halo > p:nth-of-type(-n + 3) { max-width: 150px; text-align: right; }
.se-halo > p:nth-of-type(n + 4) { max-width: 160px; }
/* Runs to two lines at 160px, and the abbreviation is what keeps it to
   one — so this label gets the wider measure. */
.se-halo > p:nth-of-type(4) { max-width: 220px; }

.se-halo > p:nth-of-type(1) { right: calc(50% + 91px); top: 18.5%; }
.se-halo > p:nth-of-type(2) { right: calc(50% + 145px); top: 48%; }
.se-halo > p:nth-of-type(3) { right: calc(50% + 117px); top: 74%; }
.se-halo > p:nth-of-type(4) { left: calc(50% + 91px); top: 18.5%; }
.se-halo > p:nth-of-type(5) { left: calc(50% + 145px); top: 48%; }
.se-halo > p:nth-of-type(6) { left: calc(50% + 117px); top: 74%; }

/* A quiet callout on the canvas, not a band: the page's one dark moment
   is the closing CTA below it. */
.se-delete { padding: 0 0 64px; }

.se-delete-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  border: 1px solid var(--cm-border-strong);
  border-radius: var(--cm-radius);
  padding: 32px 36px 32px 48px;
}

.se-delete-title {
  font-family: var(--cm-font-serif);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: var(--cm-tracking-tight);
  margin: 0;
}

/* Both edges are pulled inward off the card's padding so the pair reads
   as one settled block rather than two things pushed to the corners. */
.se-delete .btn { height: 44px; padding: 0 22px; margin-right: 24px; white-space: nowrap; }

.se-delete p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--cm-ink-secondary);
  margin: 10px 0 0;
  max-width: 56ch;
}
@media (max-width: 940px) {
  .se-hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .se-goat { margin-right: 0; }
  .hero-figure { height: auto; }
  .se-goat img { height: auto; width: 100%; max-width: 460px; }

  .se-standards .wrap { grid-template-columns: 1fr; gap: 40px; }
  /* Stacked, the copy leads and the halo follows it. */
  .se-standards-copy { order: -1; padding-left: 0; }
}

@media (max-width: 767px) {
  .se-hero { padding-bottom: 24px; }
  .se-hero .wrap { gap: 12px; }
  /* The pair's baked canvas padding comes back in; the wash hugs them. */
  .se-goat img { margin: -3% 0 -10%; }
  .se-goat .hero-wash.is-goat { inset: 5% 0%; }

  /* The halo's orbit needs width the phone doesn't have: the badge
     stands alone and the labels sit this width out. */
  .se-standards { padding: 64px 0 48px; }
  .se-halo { min-height: 0; }
  .se-halo > p { display: none; }

  .se-delete-card { padding: 28px 24px; }
  .se-delete .btn { margin-right: 0; }
}