#security {
 padding: 20px 0 70px;
 background: linear-gradient(180deg, #f8f9fd 0%, #fff 15%, #f9faff 100%);
}

.security-page .crumb {
 min-height: 56px;
 margin-bottom: 30px;
 padding: 0 26px;
 border-radius: 7px;
 display: flex;
 align-items: center;
 gap: 10px;
 color: #78839b;
 background: linear-gradient(100deg, #f0f0ff, #f4f4ff);
 font-size: 13px;
}

.security-page .crumb b { color: #aeb5c7; font-size: 18px; font-weight: 400; }

.safe-tabs {
 margin-bottom: 34px;
 display: flex;
 align-items: center;
 gap: 10px;
}

.safe-tabs a {
 min-width: 104px;
 min-height: 50px;
 padding: 0 16px;
 border: 1px solid #dfe4ef;
 border-radius: 7px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #65728b;
 background: #fff;
 font-size: 14px;
}

.safe-tabs a.is-current {
 color: #fff;
 border-color: transparent;
 background: linear-gradient(135deg, #875ff0, #5c40dd);
 box-shadow: 0 8px 16px rgba(94, 64, 221, .17);
}

.safe-tabs .tab-sort {
 min-width: 124px;
 margin-left: auto;
 justify-content: space-between;
}

.safe-tabs i { font-size: 15px; font-style: normal; }

.safe-hero {
 min-height: 0;
}

.safe-copy {
 padding: 10px 20px 61px;
 text-align: center;
}

.eyebrow {
 width: max-content;
 padding: 5px 12px;
 border-radius: 999px;
 color: #7149e6;
 background: #ebe5ff;
 font-size: 13px;
}

.safe-copy h1 {
 margin-top: 12px;
 color: #192744;
 font-size: clamp(31px, 2.6vw, 45px);
 line-height: 1.24;
 letter-spacing: -.02em;
}

.safe-copy > p {
 max-width: none;
 margin-top: 10px;
 color: #71809b;
 font-size: 18px;
 font-weight: 400;
 line-height: 1.65;
 letter-spacing: .01em;
}

.hero-meta {
 margin-top: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 24px;
 color: #8490a7;
 font-size: 16px;
}

.hero-meta time,
.hero-meta span,
.hero-meta a {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 color: inherit;
}

.hero-meta svg {
 width: 20px;
 height: 20px;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.7;
 stroke-linecap: round;
 stroke-linejoin: round;
}

.safe-media {
 margin: 0;
 position: relative;
 overflow: hidden;
 display: grid;
 place-items: center;
 color: #a89bef;
 background:
  radial-gradient(circle at 50% 48%, rgba(126, 87, 245, .42), transparent 24%),
  radial-gradient(circle at 73% 26%, rgba(61, 158, 255, .26), transparent 28%),
  linear-gradient(135deg, #0b1747, #162162 58%, #3d2e8a);
}

.safe-media::before,
.safe-media::after {
 position: absolute;
 inset: 12%;
 border: 1px solid rgba(174, 156, 255, .25);
 border-radius: 50%;
 content: "";
}

.safe-media::after {
 inset: 28% 16%;
 border-radius: 12px;
 transform: rotate(30deg);
}

.safe-media span {
 z-index: 1;
 padding: 9px 13px;
 border: 1px dashed rgba(226, 218, 255, .55);
 border-radius: 6px;
 color: #e1dbff;
 background: rgba(10, 19, 67, .3);
 font-size: 13px;
}

#security .safe-media span { display: none; }

.hero-media {
 height: auto;
 min-height: 0;
 aspect-ratio: 2048 / 482;
 border-radius: 12px;
 background: #06143d;
}

.hero-media::before,
.hero-media::after { display: none; }

.hero-media img {
 width: 100%;
 height: 100%;
 display: block;
 object-fit: contain;
 object-position: center;
}

.stats {
 min-height: 188px;
 margin-top: 40px;
 padding: 22px 5.4%;
 border: 1px solid #e6e9f4;
 border-radius: 14px;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 background: linear-gradient(115deg, #fbfbff, #f5f3ff);
 box-shadow: 0 12px 30px rgba(45, 57, 104, .04);
}

.stats article {
 min-width: 0;
 padding: 0 13%;
 display: flex;
 align-items: center;
 gap: 18px;
}

.stats article + article {
 border-left: 1px solid #dfe3f1;
}

.stats i,
.guide-copy li i,
.safe-call > i {
 flex: 0 0 auto;
 width: 68px;
 height: 68px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 color: #7750ec;
 background: #eee9ff;
}

.stats svg,
.guide-copy li svg,
.safe-call > i svg {
 width: 36px;
 height: 36px;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
}

.stats small,
.stats span {
 display: block;
 color: #78849b;
 font-size: 15px;
}

.stats strong {
 margin: 3px 0;
 display: block;
 font-variant-numeric: tabular-nums;
 color: #7049e5;
 font-size: 36px;
 line-height: 1;
}

.intro {
 max-width: 1220px;
 margin-top: 24px;
 color: #64718a;
 font-size: 15px;
 line-height: 1.9;
 text-align: center;
}

.guide {
 margin-top: 30px;
 position: relative;
 display: grid;
 gap: 24px;
}

.guide::before {
 width: 2px;
 position: absolute;
 top: 9%;
 bottom: 8%;
 left: 50%;
 background: linear-gradient(#d6cbff, #e6eaf7);
 content: "";
}

.guide-row {
 min-width: 0;
 position: relative;
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 align-items: start;
 gap: 160px;
}

.guide-row.is-reverse { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.media-tall {
 width: min(100%, 812px);
 height: auto;
 min-height: 0;
 aspect-ratio: 2 / 1;
 border-radius: 14px;
}

.guide-row:not(.is-reverse) .media-tall { justify-self: end; }
.guide-row.is-reverse .media-tall { justify-self: start; }

.data-media img,
.account-media img,
.privacy-media img,
.monitor-media img,
.advice-media img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 display: block;
 object-fit: contain;
 object-position: center;
}

.data-media::before,
.data-media::after,
.account-media::before,
.account-media::after,
.privacy-media::before,
.privacy-media::after,
.monitor-media::before,
.monitor-media::after,
.advice-media::before,
.advice-media::after { display: none; }

.guide-copy {
 min-height: 306px;
 align-self: center;
 padding: 38px 42px 34px;
 display: flex;
 flex-direction: column;
 border: 1px solid #e5e9f2;
 border-radius: 14px;
 background: #fff;
 box-shadow: 0 12px 28px rgba(36, 48, 91, .035);
}

.step-num {
 width: 52px;
 height: 52px;
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 1;
 transform: translate(-50%, -50%);
 border: 4px solid #f9faff;
 border-radius: 50%;
 display: grid;
 place-items: center;
 color: #fff;
 background: linear-gradient(135deg, #8d64f3, #6042df);
 box-shadow: 0 4px 10px rgba(104, 69, 229, .22);
 font-size: 18px;
}

.guide-copy h2 {
 color: #273652;
 font-size: 26px;
}

.guide-copy > p {
 margin-top: 10px;
 color: #748099;
 font-size: 15px;
 line-height: 1.75;
}

.guide-copy ul {
 margin-top: auto;
 padding-top: 26px;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
}

.guide-copy li {
 min-width: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 text-align: center;
}

.guide-copy li i {
 width: 64px;
 height: 64px;
 border-radius: 0;
 color: #7c59e9;
 background: transparent;
}

.guide-copy li svg { width: 40px; height: 40px; }

.guide-copy li span {
 min-width: 0;
 color: #56419f;
 font-size: 16px;
 line-height: 1.25;
 white-space: normal;
}

.guide-copy li small {
 margin-top: 3px;
 display: block;
 color: #8993a7;
 font-size: 13px;
 line-height: 1.25;
 white-space: normal;
}

.panels {
 margin-top: 28px;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 34px;
}

.panels > article {
 min-height: 480px;
 padding: 44px;
 border: 1px solid #e7eaf2;
 border-radius: 14px;
 display: flex;
 flex-direction: column;
 background: #fff;
 box-shadow: 0 12px 30px rgba(33, 44, 89, .035);
}

.panels h2 {
 color: #26334e;
 font-size: 30px;
 line-height: 1.25;
}

.panels h2 i {
 width: 28px;
 height: 28px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 margin-right: 7px;
 vertical-align: -6px;
 color: #7652e9;
 font-style: normal;
}

.panels h2 i svg { width: 25px; height: 25px; fill: #f0ebff; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

.panels > article:nth-child(3) h2 {
 padding-bottom: 15px;
 border-bottom: 1px solid #edf0f4;
}

.compare {
 margin-top: 18px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 min-height: 283px;
 border-radius: 9px;
 overflow: hidden;
}

.compare div { padding: 24px 22px; display: flex; flex-direction: column; justify-content: space-between; background: #f2f3f9; }
.compare div + div { border-left: 1px solid #dedcf0; background: #f0ecff; }
.compare b { color: #7150df; font-size: 17px; }
.compare p { margin-top: 0; color: #718099; font-size: 16px; line-height: 1.4; }
.panels > article > small { margin-top: auto; display: block; color: #8a94a9; font-size: 12px; }

.panels > article > p {
 margin-top: 18px;
 max-width: 360px;
 color: #758097;
 font-size: 16px;
 line-height: 1.75;
}

.panels > article > strong {
 margin-top: auto;
 display: block;
 color: #6b48df;
 font-size: 17px;
 text-align: right;
}

.panels > article > strong small { color: #8a94a9; font-size: 14px; font-weight: 400; }

.check-list { margin-top: 18px; }
.check-list li { margin-top: 13px; color: #65728b; font-size: 17px; line-height: 1.35; }
.check-list li::before { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; margin-right: 12px; border: 2px solid #76b18f; border-radius: 50%; color: #55a77c; content: "✓"; font-size: 15px; font-weight: 700; vertical-align: -4px; }
.panels > article > a { margin-top: auto; display: inline-block; color: #7050df; font-size: 17px; }

.safe-more > h2 {
 color: #25324e;
 font-size: 28px;
}

.safe-call {
 min-height: 228px;
 margin-top: 30px;
 padding: 0 64px;
 position: relative;
 overflow: hidden;
 border: 1px solid #dfd8ff;
 border-radius: 22px;
 display: flex;
 align-items: center;
 gap: 34px;
 background: linear-gradient(100deg, #f7f5ff 0%, #f6f7ff 58%, #f1efff 100%);
}

.safe-call > i { width: 88px; height: 88px; border-radius: 0; color: #714be7; background: transparent; transform: translate(-12px, -10px); }
.safe-call > i svg { width: 76px; height: 76px; stroke-width: 1.55; }
.safe-call > div { width: 930px; max-width: 930px; flex: 0 1 930px; transform: translate(8px, -7px); }
.safe-call h2 { color: #303d5b; font-size: 34px; line-height: 1.25; }
.safe-call p { margin-top: 13px; color: #737f96; font-size: 19px; line-height: 1.55; }
.safe-call .btn { min-width: 276px; min-height: 88px; margin-left: auto; border-radius: 12px; font-size: 20px; }

.call-media { width: 230px; height: 220px; margin: 0 -28px 0 -12px; overflow: visible; border-radius: 0; flex: 0 0 230px; background: transparent; }
.call-media::before, .call-media::after { display: none; }
.call-media img { width: 260px; height: 260px; max-width: none; position: absolute; top: calc(50% + 18px); left: 50%; display: block; object-fit: contain; transform: translate(-50%, -50%); }

.safe-more {
 margin-top: 34px;
 padding: 22px;
 border: 1px solid #e6e9f1;
 border-radius: 14px;
 background: #fff;
}

.safe-more > div {
 margin-top: 18px;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
}

.safe-more a {
 min-width: 0;
 overflow: hidden;
 border: 1px solid #e6e9f2;
 border-radius: 8px;
 display: block;
 color: inherit;
}

.safe-more figure { height: 116px; }
.safe-more figure::before { inset: 17%; }
.safe-more figure::after { inset: 32% 20%; }
.safe-more figure span { padding: 6px; font-size: 11px; text-align: center; }
.safe-more b { margin: 10px 11px 0; display: block; color: #45516a; font-size: 13px; }
.safe-more small { margin: 8px 11px 12px; display: block; color: #8993a8; font-size: 11px; }

.safe-next {
 margin-top: 22px;
 border: 1px solid #e4e8f1;
 border-radius: 10px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 background: #fff;
}

.safe-next a {
 min-height: 72px;
 padding: 12px 18px;
 display: flex;
 align-items: center;
 gap: 14px;
 color: #8490a7;
 font-size: 12px;
}

.safe-next a + a { border-left: 1px solid #e6e9f1; justify-content: flex-end; text-align: right; }
.safe-next i { color: #7650e8; font-size: 27px; font-style: normal; }
.safe-next b { color: #4e5b75; font-size: 13px; line-height: 1.8; }

.safe-comment {
 margin-top: 22px;
 padding: 0 2px;
 display: grid;
 grid-template-columns: 190px minmax(0, 1fr);
 gap: 20px;
}

.safe-comment h2 { color: #27344f; font-size: 20px; }
.safe-comment p { margin-top: 7px; color: #8893a7; font-size: 13px; }
.safe-comment textarea { width: 100%; height: 100px; padding: 13px; resize: vertical; border: 1px solid #e3e7f1; border-radius: 8px; color: #5f6c85; background: #fff; font: inherit; font-size: 13px; }
.comment-form > div { margin-top: 9px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.comment-form > div span { color: #9aa3b3; font-size: 12px; }
.safe-comment .btn { min-width: 110px; min-height: 38px; border-radius: 6px; font-size: 13px; }

@media (max-width: 1000px) {
 .safe-hero { grid-template-columns: 1fr 1fr; }
 .guide-row, .guide-row.is-reverse { gap: 26px; }
 .guide-copy { padding: 30px 30px 25px; }
 .guide-copy ul { grid-template-columns: repeat(3, 1fr); gap: 12px; }
 .guide-copy li { display: flex; flex-direction: column; }
 .step-num { display: none; }
 .guide::before { display: none; }
 .stats article { padding: 0 7%; }
}

@media (max-width: 820px) {
 #security { padding-top: 12px; padding-bottom: 38px; }
 .security-page .crumb { margin-bottom: 12px; }
 .safe-tabs { width: calc(100% - 28px); margin-bottom: 18px; overflow-x: auto; gap: 7px; }
 .safe-tabs a { min-width: 88px; min-height: 36px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
 .safe-tabs .tab-sort { display: none; }
 .safe-copy { padding: 3px 12px 17px; }
 .safe-copy h1 { color: #192744; font-size: 29px; }
 .safe-copy > p { color: #71809b; font-size: 15px; line-height: 1.65; }
 .hero-meta { margin-top: 13px; gap: 14px; font-size: 13px; flex-wrap: wrap; }
 .hero-meta svg { width: 18px; height: 18px; }
 .hero-media { height: auto; min-height: 0; aspect-ratio: 2048 / 482; border-radius: 10px; opacity: 1; }
 .stats { min-height: 0; margin-top: 14px; padding: 5px 0; grid-template-columns: 1fr; }
 .stats article { padding: 15px 22px; }
 .stats article + article { border-top: 1px solid #e2e6f1; border-left: 0; }
 .stats i { width: 42px; height: 42px; }
 .stats strong { font-size: 23px; }
 .intro { padding: 0 8px; margin-top: 18px; font-size: 14px; text-align: left; }
 .guide { margin-top: 20px; gap: 14px; }
 .guide-row, .guide-row.is-reverse { grid-template-columns: 1fr; gap: 10px; }
 .guide-row.is-reverse .guide-copy { order: 2; }
 .guide-row.is-reverse .media-tall { order: 1; }
 .media-tall { width: 100%; height: auto; min-height: 0; }
 .guide-copy { height: auto; min-height: 0; padding: 23px 20px; }
 .guide-copy h2 { font-size: 21px; }
 .guide-copy > p { font-size: 13px; }
 .guide-copy ul { margin-top: 17px; grid-template-columns: repeat(3, 1fr); gap: 7px; }
 .guide-copy li { display: flex; gap: 6px; }
 .guide-copy li i { width: 35px; height: 35px; }
 .guide-copy li span { font-size: 11px; }
 .guide-copy li small { display: none; }
 .panels { margin-top: 16px; grid-template-columns: 1fr; gap: 10px; }
 .panels > article { min-height: 0; padding: 20px; }
 .safe-more > h2 { font-size: 21px; }
 .safe-call { min-height: 0; padding: 20px; display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; }
 .safe-call > i { width: 46px; height: 46px; }
 .safe-call > i svg { width: 26px; height: 26px; }
 .safe-call h2 { font-size: 16px; }
 .safe-call p { font-size: 12px; line-height: 1.6; }
 .safe-call > i, .safe-call > div { transform: none; }
 .safe-call > div { width: auto; max-width: none; }
 .safe-call .btn { min-width: 0; min-height: 44px; grid-column: 2; margin: 0; border-radius: 7px; font-size: 14px; }
 .call-media { display: none; }
 .safe-more { margin-top: 24px; padding: 15px; }
 .safe-more > div { margin-top: 14px; grid-template-columns: 1fr; gap: 10px; }
 .safe-more a { display: grid; grid-template-columns: 112px minmax(0,1fr); grid-template-rows: auto 1fr; align-items: start; }
 .safe-more figure { height: 78px; grid-row: span 2; }
 .safe-more b { margin: 13px 10px 0; font-size: 13px; }
 .safe-more small { margin: 7px 10px 10px; }
 .safe-next { grid-template-columns: 1fr; }
 .safe-next a + a { border-top: 1px solid #e6e9f1; border-left: 0; }
 .safe-comment { grid-template-columns: 1fr; gap: 10px; }
 .safe-comment textarea { height: 88px; }
}

@media (min-width: 821px) {
 .safe-copy h1 {
  font-size: clamp(36px, 2.8vw, 48px);
  line-height: 1.18;
 }

 .safe-copy > p {
  font-size: 17px;
  line-height: 1.7;
 }

 .hero-meta {
  font-size: 15px;
 }

 .stats small,
 .stats span {
  font-size: 15px;
  line-height: 1.5;
 }

 .stats strong {
  font-size: 36px;
 }

 .intro {
  font-size: 17px;
  line-height: 1.8;
 }

 .guide-copy h2 {
  font-size: 32px;
  line-height: 1.22;
 }

 .guide-copy > p {
  font-size: 17px;
  line-height: 1.72;
 }

 .guide-copy li span {
  font-size: 18px;
  line-height: 1.28;
  font-weight: 700;
 }

 .guide-copy li small {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.4;
 }

 .panels h2,
 .safe-more > h2 {
  font-size: 30px;
  line-height: 1.24;
 }

 .compare b,
 .panels > article > strong,
 .panels > article > a,
 .check-list li {
  font-size: 16px;
  line-height: 1.58;
 }

 .compare p,
 .panels > article > p {
  font-size: 16px;
  line-height: 1.72;
 }

 .panels > article > small,
 .panels > article > strong small {
  font-size: 14px;
 }

 .safe-call h2 {
  font-size: 32px;
  line-height: 1.24;
 }

 .safe-call p {
  font-size: 17px;
  line-height: 1.66;
 }

 .safe-call .btn {
  font-size: 17px;
 }

 .safe-more b,
 .safe-next b,
 .safe-comment h2 {
  font-size: 16px;
 }

 .safe-more small,
 .safe-next a,
 .safe-comment p,
 .safe-comment textarea {
  font-size: 14px;
 }
}

@media (max-width: 820px) {
 .safe-copy h1 {
  font-size: 30px;
  line-height: 1.22;
 }

 .safe-copy > p {
  font-size: 14px;
  line-height: 1.72;
 }

 .hero-meta {
  font-size: 13px;
 }

 .stats small,
 .stats span {
  font-size: 13px;
  line-height: 1.45;
 }

 .stats strong {
  font-size: 24px;
 }

 .intro {
  font-size: 14px;
  line-height: 1.72;
 }

 .guide-copy h2 {
  font-size: 22px;
  line-height: 1.24;
 }

 .guide-copy > p {
  font-size: 14px;
  line-height: 1.68;
 }

 .guide-copy li span {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
 }

 .panels h2,
 .safe-more > h2 {
  font-size: 24px;
  line-height: 1.25;
 }

 .compare b,
 .compare p,
 .panels > article > p,
 .panels > article > strong,
 .panels > article > a,
 .check-list li {
  font-size: 14px;
  line-height: 1.6;
 }

 .panels > article > small,
 .panels > article > strong small {
  font-size: 13px;
 }

 .safe-call h2 {
  font-size: 22px;
  line-height: 1.25;
 }

 .safe-call p {
  font-size: 14px;
  line-height: 1.6;
 }

 .safe-call .btn {
  font-size: 14px;
 }

 .safe-more b,
 .safe-next b,
 .safe-comment h2 {
  font-size: 14px;
 }

 .safe-more small,
 .safe-next a,
 .safe-comment p,
 .safe-comment textarea,
 .comment-form > div span {
  font-size: 12px;
 }
}