/* Securavo — shared styles for legal / info pages (privacy, terms, refund, contact).
   Matches the design tokens used in index.html. Edit here to restyle all four pages at once. */

*{ box-sizing:border-box; }
:root{
    --logo-pink:#cc3399;
    --pink-2:#e24fb3;
    --bg:#0b0b11;
    --bg-2:#0f0f17;
    --card-bg:#15151e;
    --card-2:#1b1b25;
    --border:#272733;
    --border-soft:#1e1e28;
    --text-white:#f4f4f7;
    --text-muted:#9a9aa8;
    --text-dim:#6b6b78;
    --trust:#34c77b;
    --radius:16px;
    --maxw:760px;
}
html{ scroll-behavior:smooth; }
body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background-color:var(--bg);
    background-image:radial-gradient(1100px 520px at 50% -10%, rgba(204,51,153,.08), transparent 60%);
    background-repeat:no-repeat;
    color:var(--text-white);
    margin:0;
    padding-top:64px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}
a{ color:var(--logo-pink); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* --- Top bar --- */
.legal-nav{
    position:fixed; top:0; left:0; width:100%;
    background:rgba(11,11,17,.82); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-soft); z-index:1000;
    display:flex; justify-content:space-between; align-items:center;
    padding:11px 28px;
}
.legal-nav .nav-logo{ height:32px; width:auto; background:#fff; padding:5px 9px; border-radius:8px; display:block; }
.legal-nav .nav-back{ font-size:.85rem; font-weight:600; color:var(--text-muted); }
.legal-nav .nav-back:hover{ color:var(--logo-pink); text-decoration:none; }

/* --- Content --- */
.legal-wrap{ max-width:var(--maxw); margin:0 auto; padding:56px 22px 40px; }
.legal-eyebrow{ display:block; font-size:.76rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--logo-pink); margin-bottom:12px; }
.legal-wrap h1{ font-size:2.4rem; letter-spacing:-1px; margin:0 0 10px; font-weight:800; line-height:1.1; }
.legal-meta{ color:var(--text-dim); font-size:.9rem; margin:0 0 36px; }
.legal-wrap h2{ font-size:1.35rem; margin:40px 0 12px; color:var(--text-white); letter-spacing:-.3px; }
.legal-wrap h3{ font-size:1.05rem; margin:26px 0 8px; color:var(--pink-2); }
.legal-wrap p{ color:#c9c9d4; margin:0 0 16px; }
.legal-wrap ul{ color:#c9c9d4; margin:0 0 16px; padding-left:22px; }
.legal-wrap li{ margin:8px 0; }
.legal-wrap strong{ color:var(--text-white); }

/* --- Callout boxes --- */
.note{
    background:linear-gradient(180deg,var(--card-2),var(--card-bg));
    border:1px solid var(--border); border-left:4px solid var(--logo-pink);
    border-radius:var(--radius); padding:20px 24px; margin:26px 0;
}
.note.trust{ border-left-color:var(--trust); }
.note p:last-child{ margin-bottom:0; }
.note-label{ display:block; font-size:.74rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--logo-pink); margin-bottom:8px; }
.note.trust .note-label{ color:var(--trust); }

/* --- Placeholder highlight: replace every [.ph] before publishing, then this styling can be removed --- */
.ph{ color:var(--pink-2); background:rgba(226,79,179,.10); border:1px solid rgba(226,79,179,.30); border-radius:5px; padding:1px 6px; font-size:.92em; font-weight:600; white-space:nowrap; }

/* --- Contact card --- */
.contact-card{
    background:linear-gradient(180deg,var(--card-2),var(--card-bg));
    border:1px solid var(--border); border-top:4px solid var(--logo-pink);
    border-radius:var(--radius); padding:14px 30px; margin:26px 0;
}
.contact-row{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border-soft); align-items:baseline; }
.contact-row:last-child{ border-bottom:none; }
.contact-row .k{ color:var(--text-dim); min-width:130px; font-size:.85rem; text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.contact-row .v{ color:var(--text-white); }

/* --- Back link --- */
.legal-back{ display:inline-block; margin-top:40px; font-weight:600; }

/* --- Footer --- */
.legal-footer{ border-top:1px solid var(--border-soft); background:var(--bg-2); margin-top:64px; padding:36px 22px; }
.legal-footer-inner{ max-width:var(--maxw); margin:0 auto; text-align:center; color:var(--text-dim); font-size:.82rem; line-height:1.7; }
.legal-footer-inner a{ color:var(--text-muted); }
.legal-footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-bottom:16px; }

@media (max-width:640px){
    .legal-wrap h1{ font-size:1.9rem; }
    .legal-nav{ padding:10px 16px; }
    .contact-row{ flex-direction:column; gap:3px; }
    .contact-card{ padding:10px 22px; }
}