/* Shared styles for the static content pages (/privacy, /support).
   Tokens, fonts, header and footer mirror index.html so the pages read as the same site. */
@font-face { font-family: Oswald; src: url('/assets/Oswald-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: ArchivoWordmark; src: url('/assets/Archivo-Condensed-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: JetBrains; src: url('/assets/JetBrainsMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: JetBrains; src: url('/assets/JetBrainsMono-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Mona; src: url('/assets/MonaSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Mona; src: url('/assets/MonaSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  --ink: #031713;
  --porcelain: #f2eee3;
  --mint: #2ce5bd;
  --cyan: #35b9da;
  --indigo: #5148e7;
  --vermilion: #f04738;
  --line: rgba(242, 238, 227, .22);
  --page: min(1320px, calc(100vw - 48px));
  --measure: min(760px, 100%);
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0;
  color: var(--porcelain);
  font-family: Mona, Arial, sans-serif;
  background:
    radial-gradient(75% 40% at -8% 0%, rgba(25, 164, 116, .30), transparent 62%),
    radial-gradient(52% 50% at 108% 40%, rgba(214, 55, 42, .16), transparent 64%),
    radial-gradient(46% 38% at -10% 96%, rgba(23, 151, 105, .18), transparent 67%),
    var(--ink);
  overflow-x: hidden;
}
a { color: inherit; }

.shell { width: var(--page); margin-inline: auto; }
.display { font-family: Oswald, Impact, sans-serif; text-transform: uppercase; line-height: .88; letter-spacing: -.035em; }
.eyebrow { color: var(--mint); font: 700 .76rem/1 JetBrains, monospace; letter-spacing: .18em; text-transform: uppercase; }
.spectral-text { text-shadow: -1.5px 0 var(--mint), 1.5px 0 var(--indigo), 2.4px .6px var(--vermilion); }

.topbar { height: 86px; display: flex; align-items: center; border-bottom: 1px solid var(--line); position: relative; }
.topbar::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: linear-gradient(90deg, var(--mint), var(--cyan), var(--indigo), var(--vermilion)); opacity: .55; }
.nav { width: var(--page); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .62rem; color: var(--porcelain); text-decoration: none; }
.brand img { display: block; width: 38px; height: 38px; flex: none; filter: invert(1); }
.brand span { font: 700 1.42rem/1 ArchivoWordmark, sans-serif; letter-spacing: -.055em; }
.navlinks { display: flex; align-items: center; gap: 2rem; }
.navlinks a { text-decoration: none; font: 400 .72rem/1 JetBrains, monospace; letter-spacing: .14em; text-transform: uppercase; color: #c9d1ca; }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--mint); }

.page { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 9vw, 7rem); }
.page-head { width: var(--measure); margin-bottom: 3rem; }
.page-head h1 { font-size: clamp(3.4rem, 8vw, 6.6rem); margin: 1rem 0 1.4rem; }
.lead { color: #bcc5be; font-size: 1.12rem; line-height: 1.6; margin: 0; }
.meta { margin-top: 1.4rem; color: #8e9a93; font: .7rem JetBrains, monospace; letter-spacing: .1em; text-transform: uppercase; }

.prose { width: var(--measure); color: #d3d9d3; font-size: 1.02rem; line-height: 1.7; }
.prose section { border-top: 1px solid var(--line); padding: 2rem 0 .6rem; }
.prose h2 { font: 700 clamp(1.7rem, 3.4vw, 2.3rem)/1 Oswald, Impact, sans-serif; text-transform: uppercase; letter-spacing: -.01em; color: var(--porcelain); margin: 0 0 1rem; }
.prose h3 { font: 700 .76rem/1.3 JetBrains, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); margin: 1.6rem 0 .6rem; }
.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.prose li { margin: .3rem 0; }
.prose li::marker { color: var(--mint); }
.prose strong { color: var(--porcelain); font-weight: 600; }
.prose a { color: var(--mint); text-underline-offset: 3px; }
.retention { display: inline-block; margin-top: .2rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: #bcc5be; font: .66rem JetBrains, monospace; letter-spacing: .1em; text-transform: uppercase; }
.notice { border: 1px solid rgba(44, 229, 189, .45); border-radius: 16px; padding: 1rem 1.2rem; background: rgba(3, 23, 19, .46); }

footer { border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; }
.footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 2rem; color: #8e9a93; font: .66rem JetBrains, monospace; letter-spacing: .1em; text-transform: uppercase; }
.footer-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--mint); }
.footer-legal { opacity: .8; white-space: nowrap; }
.imprint-address { font-style: normal; line-height: 1.7; }

@media (max-width: 640px) {
  :root { --page: calc(100vw - 28px); }
  .topbar { height: 72px; }
  .brand { gap: .55rem; }
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 1.28rem; }
  .navlinks { gap: 1.1rem; }
  .prose { font-size: 1rem; }
  .footer-grid { align-items: flex-start; flex-direction: column; font-size: .72rem; }
}