/* ---------- Security, privacy & reliability ---------- */
.security { --teal: #0f8fb0; --teal-50: #e2f6fa; }
.sec-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sec-left .sec-head { margin-bottom: 1.6rem; }

/* checklist: two columns of hairline-separated rows */
.sec-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.8rem; border-top: 1px solid var(--line); }
.sec-checks li {
  display: flex; gap: 0.8rem; align-items: flex-start; padding-block: 1rem;
  border-bottom: 1px solid var(--line-2); font-size: 0.98rem; line-height: 1.55; color: var(--text);
}
.sc-ic {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--teal-50); color: var(--teal); margin-top: -0.05rem;
  transition: background 0.3s ease, color 0.3s ease, scale 0.4s cubic-bezier(0.3, 1.5, 0.4, 1);
}
.sc-ic .i { width: 1rem; height: 1rem; stroke-width: 2.2; }
.sec-checks li:hover .sc-ic { background: var(--teal); color: #fff; scale: 1.1; }

.sec-right { display: grid; gap: var(--gap); position: sticky; top: calc(var(--head-h) + 1.5rem); }

/* access tiers card */
.tiers {
  background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-md); overflow: hidden;
}
.tiers-head {
  display: flex; align-items: center; gap: 0.8rem; padding: 1.3rem 1.6rem;
  background: var(--navy); color: #fff;
}
.th-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--orange); color: #fff; }
.th-ic .i { width: 1.15rem; height: 1.15rem; }
.tiers-head h3 { color: #fff; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

.tiers ol { padding: 0.6rem 1.6rem 1.2rem; }
.tiers li { display: flex; gap: 1rem; align-items: flex-start; padding-block: 1rem; }
.tiers li + li { border-top: 1px solid var(--line-2); }
.tr-num {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-head); font-weight: 700; font-size: 0.95rem; color: var(--navy); background: var(--navy-50);
  transition: background 0.3s ease, color 0.3s ease;
}
.tiers li:first-child .tr-num { background: var(--navy); color: #fff; }
.tiers li:hover .tr-num { background: var(--orange); color: #fff; }
.tr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tr-body b { font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; color: var(--navy); line-height: 1.3; }
.tr-body > span:not(.tr-bar) { margin-top: 0.15rem; font-size: 0.93rem; color: var(--muted); line-height: 1.45; }
.tr-bar { display: block; margin-top: 0.65rem; height: 5px; border-radius: 5px; background: var(--line-2); overflow: hidden; }
.tr-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--orange), #f8c77f); }

/* built to grow */
.grow {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem 1.5rem; border-radius: 20px;
  background: var(--orange-50); border: 1px solid #fbe0bd;
}
.g-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--orange-600); box-shadow: var(--shadow-sm); }
.g-ic .i { width: 1.25rem; height: 1.25rem; }
.grow p { font-size: 0.98rem; line-height: 1.6; color: var(--muted); }
.grow b { font-family: var(--f-head); font-weight: 700; color: var(--navy); }

@media (prefers-reduced-motion: no-preference) {
  .tiers.rv .tr-bar i { width: 0; }
  .tiers.rv.in .tr-bar i { width: var(--w); transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s; }
}

@media (max-width: 1100px) {
  .sec-grid { grid-template-columns: 1fr; }
  .sec-right { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .sec-checks { grid-template-columns: 1fr; }
  .sec-right { grid-template-columns: 1fr; }
  .tiers ol { padding-inline: 1.2rem; }
  .tiers-head { padding-inline: 1.2rem; }
}
