/* Shared by /privacy, /terms and /support.
   The landing page keeps its styles inline because it is one file with one job; these three
   are the same document in three costumes, so they share a sheet. */

:root {
  --ink: #100718;
  --amber: #FFC24B;
  --coral: #FF6B35;
  --magenta: #FF2E93;
  --iris: #7C5CFF;
  --mint: #35E0A1;
  --cream: #FFF6EE;
  --muted: #B5A5C6;
  --faint: #7A6A8C;
  --hair: rgba(255, 246, 238, .10);
  --glass: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.022));
  --gut: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font: 400 17px/1.72 Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mesh {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 620px at 12% -10%, rgba(124,92,255,.30), transparent 62%),
    radial-gradient(900px 700px at 90% 4%,  rgba(255,107,53,.16), transparent 62%),
    var(--ink);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: min(820px, 100%); margin-inline: auto; padding-inline: var(--gut); }

header { border-bottom: 1px solid var(--hair); position: sticky; top: 0; z-index: 10;
  background: rgba(16,7,24,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.bar { display: flex; align-items: center; gap: 14px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none;
  font-family: Nunito, sans-serif; font-weight: 900; font-size: 18px; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 9px; }
.bar .back { margin-left: auto; font-size: 14.5px; font-weight: 600; color: var(--muted); }

h1, h2 { font-family: Nunito, -apple-system, sans-serif; font-weight: 900; letter-spacing: -.03em; line-height: 1.06; margin: 0; }
h1 { font-size: clamp(34px, 5.4vw, 52px); }
h2 { font-size: clamp(21px, 2.6vw, 26px); margin: 52px 0 14px; letter-spacing: -.02em; }
h3 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; margin: 30px 0 8px; letter-spacing: -.01em; }

.title { padding-block: clamp(48px, 7vw, 84px) 8px; }
.stamp { color: var(--faint); font-size: 14.5px; margin: 18px 0 0; }
.intro { color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); margin-top: 20px; }

main { padding-bottom: clamp(64px, 8vw, 110px); }
p { color: var(--muted); }
strong { color: var(--cream); font-weight: 700; }

ul { padding-left: 0; list-style: none; display: grid; gap: 12px; margin: 16px 0 0; }
li { color: var(--muted); display: flex; gap: 12px; align-items: flex-start; }
li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); margin-top: 11px; opacity: .8; }

.card {
  background: var(--glass); border: 1px solid var(--hair); border-radius: 22px;
  padding: clamp(22px, 3vw, 30px); margin-top: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.card.mint { background: linear-gradient(165deg, rgba(53,224,161,.12), rgba(255,255,255,.02) 60%); border-color: rgba(53,224,161,.26); }
.card p:first-child, .card h3:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15.5px; }
th, td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--muted); }
th { color: var(--cream); font-family: Nunito, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
td:first-child { color: var(--cream); font-weight: 600; white-space: nowrap; }
@media (max-width: 620px) { td:first-child { white-space: normal; } }

footer { border-top: 1px solid var(--hair); padding-block: 40px; }
.foot { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; font-size: 14.5px; color: var(--faint); }
.foot nav { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-left: auto; }
.foot a { color: var(--muted); }