/* Dipstick site: the app's dark look, its fonts and its orange accent. */

@font-face { font-family: "Chakra Petch"; src: url("/fonts/ChakraPetch-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("/fonts/ChakraPetch-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("/fonts/ShareTechMono-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --ground: #07080A;
  --panel: #101216;
  --border: #23272E;
  --text: #DCE6F2;
  --muted: #8A94A3;
  --accent: #FF6A2B;
  --amber: #FFB000;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #F2F3F5;
    --panel: #FFFFFF;
    --border: #D9DDE3;
    --text: #14181F;
    --muted: #5A6472;
    --accent: #E85A1C;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

a { color: var(--accent); }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

header.site {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 0;
}
header.site a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
header.site img { width: 36px; height: 36px; border-radius: 9px; }
.wordmark {
  font-family: "Chakra Petch", system-ui, sans-serif; font-weight: 600;
  letter-spacing: 0.22em; font-size: 18px;
}

.hero { text-align: center; padding: 40px 0 24px; }
.hero img { width: 140px; height: 140px; border-radius: 32px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
.hero h1 {
  font-family: "Chakra Petch", system-ui, sans-serif; font-weight: 600;
  letter-spacing: 0.18em; font-size: clamp(34px, 9vw, 52px); margin: 28px 0 8px;
}
.tagline { color: var(--muted); font-size: 19px; margin: 0 auto; max-width: 30em; }
.badge {
  display: inline-block; margin-top: 22px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
  font-family: "Share Tech Mono", ui-monospace, monospace; font-size: 14px; letter-spacing: 0.06em;
}

h2 {
  font-family: "Chakra Petch", system-ui, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 14px; color: var(--muted);
  margin: 48px 0 14px;
}

.features { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px;
}
.card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.card .num {
  font-family: "Share Tech Mono", ui-monospace, monospace; color: var(--amber); font-size: 13px; letter-spacing: 0.08em;
}

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; }

/* Privacy policy */
.policy h1 {
  font-family: "Chakra Petch", system-ui, sans-serif; font-weight: 600; letter-spacing: 0.06em;
  font-size: 32px; margin: 16px 0 4px;
}
.policy .effective { color: var(--muted); margin: 0 0 24px; font-size: 15px; }
.policy h2 { margin-top: 36px; }
.policy p, .policy li { color: var(--text); }
.policy ul { padding-left: 22px; }
.lead { font-size: 19px; }

footer.site {
  margin: 64px 0 40px; padding-top: 20px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px;
}
footer.site a { color: var(--muted); }