/* Hero geometry from Figma nodes 292:23333 and 292:23342. */
.hero h1 {
  margin-top: 0;
}

.hero .actions {
  margin-top: 48px;
}

.hero .button-secondary.arrow::after {
  width: 20px;
  height: 20px;
  margin: 0;
  background: url("assets/arrow-secondary.svg") center / 20px 20px no-repeat;
  content: "";
}

/* Perks section from Figma node 292:23669. */
.perks .center-heading {
  margin: 0 48px;
  border-right: 1px solid #373a41;
  border-left: 1px solid #373a41;
}

.perks .button-orange.arrow::after {
  width: 20px;
  height: 20px;
  margin: 0;
  background: url("assets/arrow-conversion.svg") center / 20px 20px no-repeat;
  content: "";
}

.perks .feature-grid {
  border-top: 1px solid #373a41;
  border-bottom: 1px solid #373a41;
}

.perks .feature-grid article {
  border: 0;
  border-right: 1px solid #373a41;
}

.perks .feature-grid article:first-child {
  border-left: 1px solid #373a41;
}

.perks .icon img {
  width: 28px;
  height: 28px;
}

.perks .feature-grid p {
  color: #fff;
}

/* Interactive security cards from Figma component 109:8745. */
.security {
  background: #fcfaf4;
  border: 1px solid #e9eaeb;
}

.security .center-heading {
  height: 350px;
  margin: -1px 46px 0;
  padding-top: 94px;
  border-right: 1px solid #e9eaeb;
  border-left: 1px solid #e9eaeb;
}

.security-grid {
  height: 280px;
  margin: 0 46px;
  border: 1px solid #e9eaeb;
}

.security-grid article {
  height: 279px;
  padding: 32px;
  overflow: hidden;
  border: 0;
  background: #faf6ec;
  position: relative;
}

.security-grid article::before {
  position: absolute;
  top: 0;
  right: -1px;
  left: -1px;
  height: 2px;
  background: #e85c04;
  content: "";
  opacity: 0;
}

.security-grid article:hover {
  border-right: 1px solid #e9eaeb;
  border-left: 1px solid #e9eaeb;
  background: #fff;
}

.security-grid article:hover::before {
  opacity: 1;
}

.security-grid .icon img {
  width: 28px;
  height: 28px;
}

.security-copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 16px;
}

.security-detail {
  display: none;
  color: #000;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.security-grid article:hover .security-detail {
  display: block;
}

/* Pricing section and check icon from Figma node 292:23395. */
.pricing {
  padding-top: 0;
  border-bottom: 1px solid #e9eaeb;
  background: #fcfaf4;
}

.pricing .center-heading {
  height: 335px;
  margin: 0 48px;
  padding-top: 94px;
  border-right: 1px solid #e9eaeb;
  border-left: 1px solid #e9eaeb;
}

.plans {
  height: 776px;
  background: #faf6ec;
}

.plan {
  background: #faf6ec;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #181d27;
  line-height: 24px;
}

.feature-list li::before {
  display: none;
  content: none;
}

.feature-list li img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

@media (max-width: 760px) {
  .hero .actions {
    margin-top: 32px;
  }

  .perks .center-heading,
  .security .center-heading,
  .pricing .center-heading {
    height: auto;
    margin: 0;
    padding: 72px 20px;
  }

  .security-grid,
  .plans {
    height: auto;
    margin: 0 20px;
  }

  .security-grid article {
    height: 300px;
  }

  .perks .feature-grid article {
    border-left: 1px solid #373a41;
    border-right: 1px solid #373a41;
    border-bottom: 1px solid #373a41;
  }

  .perks .feature-grid article:last-child {
    border-bottom: 0;
  }
}


/* Mobile: hide honest comparison and interactive server map */
@media (max-width: 760px) {
  #features.comparison {
    display: none;
  }

  .location-section .globe-art {
    display: none;
  }
}