.security-hero .slots-hero-art {
  background-image: url('assets/security-hero.webp');
  background-position: right center
}

.security-hero .slots-hero-copy {
  max-width: 1120px
}

.security-content h3 {
  font-size: 16px;
  line-height: 1.5
}

.security-content>.panel>p {
  margin: 0 0 16px;
  color: #e9dcef
}

.essential-grid,
.review-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px
}

.essential-grid article,
.review-steps article,
.credential-guidance article {
  min-width: 0;
  padding: 16px;
  border: 1px solid #bd7edc;
  border-radius: 13px;
  background: linear-gradient(140deg, #552571, #27123b);
  box-shadow: inset 0 1px 0 #edbdff40, 0 0 12px #c643e329
}

.security-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px
}

.security-card-top .ui-icon {
  width: 39px;
  height: 39px;
  filter: drop-shadow(0 0 6px #cd7deb55)
}

.security-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #f4c0ff;
  border-radius: 50%;
  background: linear-gradient(#e386f3, #9225bb);
  font-size: 16px;
  font-weight: 800
}

.essential-grid h3,
.review-steps h3 {
  font-size: 14px;
  margin: 0 0 10px;
  color: #f6d9ff
}

.essential-grid p,
.review-steps p,
.credential-guidance p {
  margin: 9px 0;
  color: #eadff1
}

.security-note {
  padding: 13px 15px;
  margin-top: 16px;
  border: 1px solid #edc28f;
  border-radius: 11px;
  background: linear-gradient(120deg, #fff0d0, #edc4e9);
  color: #2a1438
}

.security-note p {
  margin: 0
}

.credential-guidance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px
}

.credential-guidance .ui-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 7px #d379f04a)
}

.credential-guidance h3 {
  margin: 0 0 10px;
  color: #f6ddff
}

.security-disclosure {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #ad6dca;
  border-radius: 12px;
  background: linear-gradient(120deg, #4b215f, #28123c)
}

.security-disclosure summary {
  cursor: pointer;
  color: #f3b5ff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5
}

.security-disclosure p {
  margin: 12px 0 0;
  color: #eadcf0
}

.security-bullets {
  list-style: none;
  display: grid;
  gap: 11px;
  margin: 12px 0 0;
  padding: 0
}

.security-bullets li {
  position: relative;
  padding-left: 23px
}

.security-bullets li:before {
  content: '';
  position: absolute;
  left: 3px;
  top: 5px;
  width: 7px;
  height: 11px;
  border: solid #62ddae;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg)
}

.messaging-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.messaging-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid #bb7dd8;
  border-radius: 13px;
  background: linear-gradient(145deg, #4f2468, #27133c);
  box-shadow: inset 0 1px 0 #edbdff40, 0 0 12px #c643e329
}

.messaging-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px
}

.messaging-title>.ui-icon {
  width: 41px;
  height: 41px;
  flex: 0 0 41px;
  filter: drop-shadow(0 0 6px #ce81e72b)
}

.messaging-title h3 {
  margin: 0
}

.messaging-card>p {
  margin-bottom: 14px;
  color: #ebdef3
}

.messaging-card .security-bullets {
  gap: 12px;
  margin: 0
}

.messaging-card .security-bullets li {
  padding: 13px 13px 13px 34px;
  border: 1px solid #c68bdc;
  border-radius: 10px;
  background: linear-gradient(120deg, #f3e7fc, #d3bceb);
  color: #29143b
}

.messaging-card .security-bullets li:before {
  top: 17px;
  left: 13px;
  border-color: #17874e
}

.messaging-context {
  margin-top: 17px;
  padding: 15px;
  border: 1px solid #a167c1;
  border-radius: 11px;
  background: #341542
}

.messaging-context h3 {
  margin: 0 0 9px
}

.messaging-context p {
  margin: 0;
  color: #eadcf2
}

.activity-list {
  display: grid;
  gap: 12px
}

.activity-list article {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 13px;
  padding: 9px;
  border: 1px solid #c17fdf;
  border-radius: 13px;
  background: linear-gradient(120deg, #4f1e66, #251037)
}

.activity-concern {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px
}

.activity-concern>.ui-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  padding: 6px;
  border: 1px solid #ca86e1;
  border-radius: 10px;
  background: linear-gradient(#ab53c8, #5b227f)
}

.activity-concern h3 {
  margin: 0 0 8px;
  font-size: 14px
}

.activity-concern p {
  margin: 0;
  color: #eadcf0
}

.activity-action {
  padding: 15px;
  border: 1px solid #e5bff6;
  border-radius: 10px;
  background: linear-gradient(120deg, #f4eaff, #cdb6eb);
  color: #29143a;
  display: flex;
  align-items: center
}

.activity-action p {
  margin: 0
}

.account-related {
  margin: 14px 0 0 !important
}

.self-check-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 13px 15px;
  border: 1px solid #b879d6;
  border-radius: 11px;
  background: #391447;
  margin-bottom: 16px
}

.self-check-status p {
  margin: 0;
  font-size: 14px
}

.reset-checks {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  flex-shrink: 0
}

.security-check-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.security-check-groups fieldset {
  min-width: 0;
  padding: 10px 15px 14px;
  margin: 0;
  border: 1px solid #b777d4;
  border-radius: 13px;
  background: linear-gradient(135deg, #51236b, #29133c)
}

.security-check-groups legend {
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  color: #f2d2ff
}

.security-check-groups legend .ui-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px
}

.security-check-groups label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid #9e64b94d;
  cursor: pointer;
  line-height: 1.6;
  font-size: 14px
}

.security-check-groups label:last-child {
  border: 0
}

.security-check-groups input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #c33de5;
  cursor: pointer;
  color-scheme: light
}

.security-check-groups input:checked+span {
  color: #c9f8e4
}

.security-content [hidden] {
  display: none !important
}

.information-pair {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px
}

.information-pair>div {
  min-width: 0
}

.support-information>h3,
.never-share>h3 {
  margin: 0 0 11px
}

.support-information>p {
  margin: 0 0 15px;
  color: #eadcf0
}

.support-information table {
  min-width: 340px;
  font-size: 14px
}

.support-information tbody th {
  width: 34%
}

.identity-note {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid #b67bcb;
  border-radius: 12px;
  background: linear-gradient(120deg, #4a2059, #28133b)
}

.identity-note h3 {
  margin: 0 0 9px
}

.identity-note p {
  margin: 9px 0;
  color: #eadcf1
}

.never-share {
  display: flex;
  flex-direction: column
}

.never-share ul {
  list-style: none;
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0
}

.never-share li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  border: 1px solid #dd9ecf;
  border-radius: 11px;
  background: linear-gradient(120deg, #fae8f6, #dfbce8);
  color: #3b163b
}

.never-share li>.ui-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  padding: 4px;
  border-radius: 7px;
  background: linear-gradient(#a94fb1, #692077)
}

.credentials-art {
  display: block;
  width: 100%;
  height: 150px;
  min-height: 100px;
  max-height: 190px;
  flex: 1;
  object-fit: contain;
  margin-top: 15px;
  filter: drop-shadow(0 0 8px #bc54dd28)
}

.security-content :is(button, summary, a, input):focus-visible {
  outline: 2px solid #f0acff;
  outline-offset: 3px
}

@media(max-width:1350px) {

  .essential-grid,
  .review-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .information-pair {
    grid-template-columns: 1fr
  }

  .credentials-art {
    height: 170px;
    flex: none
  }

  .credential-guidance {
    grid-template-columns: 1fr
  }

  .activity-list article {
    grid-template-columns: 1fr 1fr
  }
}

@media(min-width:681px) and (max-width:1250px) {
  .security-content .faq-grid {
    grid-template-columns: 1fr
  }

  .messaging-grid {
    grid-template-columns: 1fr
  }
}

@media(min-width:681px) and (max-width:1350px) {

  .essential-grid,
  .review-steps {
    grid-template-columns: 1fr 1fr
  }

  .essential-grid>article:last-child,
  .review-steps>article:last-child {
    grid-column: 1/-1
  }
}

@media(max-width:680px) {
  .security-hero .slots-hero-art {
    background-position: 70% center
  }

  .essential-grid,
  .review-steps,
  .messaging-grid,
  .security-check-groups,
  .activity-list article {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .activity-concern {
    padding: 4px
  }

  .activity-action {
    padding: 13px
  }

  .self-check-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px
  }

  .self-check-status .reset-checks {
    width: 100%
  }

  .security-check-groups legend {
    font-size: 14px
  }

  .security-check-groups fieldset {
    padding: 8px 13px 12px
  }

  .security-check-groups label {
    gap: 9px
  }

  .credentials-art {
    height: 160px
  }

  .messaging-card {
    padding: 15px
  }

  .essential-grid article,
  .review-steps article {
    padding: 15px
  }

  .security-disclosure {
    padding: 13px
  }

  .security-card-top {
    margin-bottom: 12px
  }

  .never-share li {
    padding: 12px
  }
}

.never-share .no-share-cross {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  border: 1px solid #d85b91;
  border-radius: 7px;
  background: linear-gradient(#b52a66, #76133f);
  color: #fff;
  font: 700 26px/1 Arial, sans-serif
}