/* ServPrivacy — page-level components (loaded after app.css) */

/* inner page hero */
.page-hero{position:relative;color:var(--on-dark);padding:52px 0 46px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,rgba(9,15,28,.80),rgba(9,15,28,.93)),url(/assets/img/hero-mesh.webp) right -40px/68% no-repeat,var(--ink)}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 130% at 88% 8%,rgba(43,224,201,.14),transparent 55%),radial-gradient(50% 120% at 5% 100%,rgba(19,166,230,.12),transparent 60%)}
.page-hero h1{color:#fff;margin-top:12px;max-width:18ch}
.page-hero .lede{color:var(--muted-dark);margin-top:14px;max-width:600px}
.page-hero.center{text-align:center}
.page-hero.center h1,.page-hero.center .lede{margin-inline:auto}
.page-hero .breadcrumbs{color:var(--muted-dark)}
.page-hero .breadcrumbs a{color:var(--muted-dark)}
.page-hero .breadcrumbs a:hover{color:var(--accent-bright)}

/* what's included grid */
.incl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.incl{min-width:0;display:flex;gap:12px;align-items:flex-start;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.incl svg{color:var(--accent);flex:none;margin-top:2px}
.incl b{display:block;font-size:.96rem}
.incl span{font-size:.86rem;color:var(--muted)}

/* knowledge base */
.kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kb-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;transition:transform .18s,box-shadow .18s,border-color .18s}
.kb-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.kb-cat{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:9px}
.kb-card h3{font-size:1.1rem;margin-bottom:8px}
.kb-card p{font-size:.93rem;flex:1}
.kb-card .more{margin-top:14px;font-weight:640;color:var(--accent-press);display:inline-flex;align-items:center;gap:6px;font-size:.9rem}

/* status / network */
.status-banner{display:flex;align-items:center;gap:13px;background:rgba(22,199,132,.08);border:1px solid rgba(22,199,132,.25);color:#0E8B5C;border-radius:var(--r);padding:16px 20px;font-weight:620}
.dotok{width:11px;height:11px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(22,199,132,.18);flex:none}
.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.status-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.status-card .loc{padding:0;border:0}
.status-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.status-row:last-child{border-bottom:0}
.status-row .up{color:#0E8B5C;font-weight:660;font-size:.86rem;display:inline-flex;align-items:center;gap:7px}
.uptime{font-family:var(--mono);font-weight:600;color:var(--text)}

/* steps list */
.steps{counter-reset:s;display:flex;flex-direction:column;gap:16px;max-width:680px}
.step{display:flex;gap:16px;align-items:flex-start}
.step__n{counter-increment:s;flex:none;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#04201d;font-weight:760;display:grid;place-items:center}
.step__n::before{content:counter(s)}
.step b{display:block;margin-bottom:3px}
.step p{font-size:.95rem;margin:0}

/* compare table emphasis */
table.spec td.first{font-weight:680;color:var(--text);background:var(--bg-soft)}

/* order lookup / pay summary */
.mini-summary{display:flex;flex-direction:column;gap:9px}
.kv{display:flex;justify-content:space-between;gap:14px;font-size:.93rem;color:var(--text-2)}
.kv b{color:var(--text);text-align:right}
.badge-status{display:inline-flex;align-items:center;gap:7px;font-weight:660;font-size:.82rem;padding:5px 12px;border-radius:999px}
.badge-status.s-pending{background:rgba(246,166,35,.10);color:#9A6A12}
.badge-status.s-paid{background:rgba(22,199,132,.10);color:#0E8B5C}
.badge-status.s-cancelled,.badge-status.s-expired{background:rgba(229,72,77,.08);color:#C13A3F}

/* success */
.success-hero{text-align:center;max-width:620px;margin-inline:auto}
.success-ico{width:74px;height:74px;border-radius:50%;background:var(--grad);display:grid;place-items:center;margin:0 auto 20px;color:#04201d;box-shadow:var(--sh-glow)}

@media(max-width:980px){
  .incl-grid{grid-template-columns:repeat(2,1fr)}
  .kb-grid{grid-template-columns:repeat(2,1fr)}
  .status-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .incl-grid,.kb-grid{grid-template-columns:1fr}
}