/*
 * Service — Security/Hardening (Archetype F variant: defense-in-depth).
 * Loaded only on the dedicated security service page template.
 */

.mwp-sec-hero { padding-block: var(--sp-12) var(--sp-16); background: linear-gradient(180deg, var(--surface-sunken), transparent); }
.mwp-sec-hero__grid { display: grid; gap: var(--sp-12); align-items: center; margin-block-start: var(--sp-6); }
@media (min-width: 900px) { .mwp-sec-hero__grid { grid-template-columns: 1.1fr .9fr; } }
.mwp-sec-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mwp-ink); background: #fef3c7; border: 1px solid #fde68a;
  padding: 6px 14px; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--fs-sm);
  margin-block-end: var(--sp-4);
}
:root[data-theme="dark"] .mwp-sec-hero__eyebrow { background: #3a2e12; color: #fcd34d; border-color: #5a4718; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mwp-sec-hero__eyebrow { background: #3a2e12; color: #fcd34d; border-color: #5a4718; }
}
.mwp-sec-hero__content h1 { margin-block-end: var(--sp-3); }
.mwp-sec-hero__sub { color: var(--text-secondary); font-size: 1.15rem; max-width: 56ch; }
.mwp-sec-hero__cta { margin-block-start: var(--sp-6); }

/* Defense-in-depth: literal concentric rings around a lock — each ring is
 * one layer of protection, echoed by the legend list beside it. */
.mwp-sec-visual { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; justify-content: center; }
.mwp-shield {
  position: relative; width: 200px; height: 200px; flex: none;
}
.mwp-shield__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--primary); opacity: .16;
}
.mwp-shield__ring--3 { inset: 24px; opacity: .32; }
.mwp-shield__ring--2 { inset: 48px; opacity: .55; }
.mwp-shield__core {
  position: absolute; inset: 72px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
}
.mwp-sec-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.mwp-sec-legend li { display: flex; align-items: center; gap: var(--sp-3); font-weight: 700; color: var(--text-primary); }
.mwp-sec-legend__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); flex: none; }
@media (max-width: 560px) { .mwp-shield { width: 160px; height: 160px; } .mwp-shield__core { inset: 58px; } .mwp-shield__ring--3 { inset: 20px; } .mwp-shield__ring--2 { inset: 40px; } }

/* ---------- Signature section: risk checklist ---------- */
.mwp-sec-checklist { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .mwp-sec-checklist { grid-template-columns: 1fr; } }
.mwp-sec-checklist__item {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); border-inline-start: 3px solid #f59e0b;
}
.mwp-sec-checklist__icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm); flex: none;
  background: #fef3c7; color: #92400e; display: grid; place-items: center;
}
:root[data-theme="dark"] .mwp-sec-checklist__icon { background: #3a2e12; color: #fcd34d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mwp-sec-checklist__icon { background: #3a2e12; color: #fcd34d; }
}
.mwp-sec-checklist__item h3 { font-size: 1rem; margin-block-end: 4px; }
.mwp-sec-checklist__item p { color: var(--text-secondary); font-size: var(--fs-sm); }