/* DidHePay — shared web design system.
   Linked by content pages (faq/terms/privacy) and reused by the
   function-rendered pages. Load the brand fonts via <link> in each page. */
:root{
  --ink:#0b0b16; --ink2:#12121f; --panel:#171728; --border:#23233a;
  --crimson:#e0234e; --rose:#ff5c7a; --gold:#f5c044; --ice:#bfe3ff; --mint:#7fe0a8;
  --muted:#8a8aa0; --text:#e9edf6;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --black:'Archivo Black',-apple-system,system-ui,sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
.mono{font-family:var(--mono)}
.grad-ice{background:linear-gradient(180deg,#fff,var(--ice) 55%,#7fb4e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--rose);text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;padding:14px 22px;border-radius:14px;cursor:pointer;border:0;transition:transform .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{color:#fff;background:linear-gradient(180deg,#ff3d63,#c41940);box-shadow:0 10px 26px rgba(224,35,78,.38)}
.btn-ghost{color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--border)}

/* nav + footer (shared) */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(11,11,22,.72);border-bottom:1px solid var(--border)}
nav .row{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--black);font-size:20px;letter-spacing:1px}
.brand .crown{color:var(--gold)}
.navlinks{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--muted)}
.navlinks a:hover{color:var(--text)}
.navlinks .btn{padding:9px 16px;font-size:13px}
@media(max-width:760px){.navlinks a:not(.btn){display:none}}
footer{border-top:1px solid var(--border);padding:40px 0;color:var(--muted);font-size:13px;margin-top:40px}
.fcols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
.fcols a{display:block;color:var(--muted);margin:7px 0}
.fcols a:hover{color:var(--text)}
.fcols h4{color:var(--text);font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.fine{margin-top:26px;font-family:var(--mono);font-size:11px;color:#5a5a6e}

/* document / prose pages (legal, faq) */
.pagehead{padding:56px 0 8px;background:radial-gradient(700px 360px at 50% -20%,#2b0f1a,var(--ink) 65%)}
.pagehead h1{font-family:var(--black);font-size:clamp(30px,5vw,48px);letter-spacing:-.5px}
.pagehead .sub{color:var(--muted);font-family:var(--mono);font-size:12px;margin-top:10px}
.doc{padding:36px 0 20px;line-height:1.7}
.doc h2{font-family:var(--black);font-size:20px;margin:34px 0 10px}
.doc h3{font-weight:800;font-size:16px;margin:22px 0 6px}
.doc p{color:#c9cede;margin:10px 0}
.doc b,.doc strong{color:var(--text);font-weight:800}
.doc a{color:var(--rose);border-bottom:1px solid rgba(255,92,122,.3)}
.doc ul{margin:10px 0 10px 20px;color:#c9cede}
.doc li{margin:7px 0}

/* FAQ accordion-ish list */
.qa{border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.02);margin-top:14px;overflow:hidden}
.qa .q{padding:18px 20px;font-weight:800;font-size:16px;border-bottom:1px solid var(--border)}
.qa .a{padding:14px 20px 20px;color:var(--muted);font-size:14.5px;line-height:1.65}