/* ============================================================
   Red Dot Tracker — website styles
   Single shared stylesheet for all pages.
   Mirrors the app's iOS design system (iOS 26 / Liquid Glass).
   ============================================================ */

/* -------------------- Tokens (light mode) -------------------- */
:root {
  /* iOS system grey palette */
  --bg:         #F2F2F7;  /* systemGroupedBackground */
  --surface:    #FFFFFF;  /* secondarySystemGroupedBackground (cards) */
  --surface-2:  #FFFFFF;  /* hero surface */
  --ink:        #000000;  /* .primary label */
  --ink-soft:   rgba(60, 60, 67, 0.85);
  --ink-faint:  rgba(60, 60, 67, 0.60);
  --ink-fainter:rgba(60, 60, 67, 0.30);
  --separator:  rgba(60, 60, 67, 0.18);

  /* App brand red (oklch-derived) — used sparingly, only for brand moments */
  --red:        #E5314A;

  /* iOS system tints — feature icons */
  --tint-blue:   #007AFF;
  --tint-green:  #34C759;
  --tint-orange: #FF9500;
  --tint-purple: #AF52DE;
  --tint-red:    #E5314A;

  /* Tinted-square fills (10% of tint over surface) */
  --tint-blue-fill:   rgba(0, 122, 255, 0.12);
  --tint-green-fill:  rgba(52, 199, 89, 0.14);
  --tint-orange-fill: rgba(255, 149, 0, 0.14);
  --tint-purple-fill: rgba(175, 82, 222, 0.14);
  --tint-red-fill:    rgba(229, 49, 74, 0.12);

  /* Liquid Glass header */
  --glass-bg:    rgba(242, 242, 247, 0.72);
  --glass-line:  rgba(60, 60, 67, 0.18);
}

/* -------------------- Tokens (dark mode) -------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #000000;
    --surface:    #1C1C1E;  /* secondarySystemGroupedBackground dark */
    --surface-2:  #1C1C1E;
    --ink:        #FFFFFF;
    --ink-soft:   rgba(235, 235, 245, 0.85);
    --ink-faint:  rgba(235, 235, 245, 0.60);
    --ink-fainter:rgba(235, 235, 245, 0.30);
    --separator:  rgba(84, 84, 88, 0.65);

    --tint-blue:   #0A84FF;
    --tint-green:  #30D158;
    --tint-orange: #FF9F0A;
    --tint-purple: #BF5AF2;
    --tint-red:    #E5314A;

    --tint-blue-fill:   rgba(10, 132, 255, 0.18);
    --tint-green-fill:  rgba(48, 209, 88, 0.18);
    --tint-orange-fill: rgba(255, 159, 10, 0.18);
    --tint-purple-fill: rgba(191, 90, 242, 0.18);
    --tint-red-fill:    rgba(229, 49, 74, 0.20);

    --glass-bg:    rgba(0, 0, 0, 0.72);
    --glass-line:  rgba(84, 84, 88, 0.40);
  }
}

/* -------------------- Reset -------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* -------------------- Base -------------------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* -------------------- Liquid Glass header -------------------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--glass-line);
}
header.site .wrap {
  max-width: 980px;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 16px;
  color: var(--ink);
}
.wordmark .mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.lang {
  font-size: 14px;
  color: var(--ink-faint);
  display: inline-flex; gap: 4px; align-items: center;
}
.lang a { color: var(--ink-faint); }
.lang a:hover { color: var(--ink); }
.lang .active { color: var(--ink); font-weight: 500; }
.lang .sep { color: var(--ink-fainter); }

/* -------------------- Hero -------------------- */
.hero { padding: 96px 0 64px; }
.hero .icon-cluster {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 36px;
}
.hero .app-icon {
  width: 128px;
  height: 128px;
  border-radius: 28px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
}
@media (prefers-color-scheme: dark) {
  .hero .app-icon { box-shadow: 0 18px 60px rgba(229, 49, 74, 0.20), 0 2px 6px rgba(0,0,0,0.40); }
}
.hero .wordmark-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero .wordmark-stack .name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero .wordmark-stack .tagline {
  font-size: 18px;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.hero h1 {
  font-size: clamp(40px, 7vw, 68px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 840px;
  color: var(--ink);
}
.hero .sub {
  font-size: clamp(18px, 2.3vw, 21px);
  color: var(--ink-soft);
  margin-top: 24px;
  max-width: 640px;
  line-height: 1.45;
}
.cta-row {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.cta-row .badge {
  height: 54px;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.15s ease;
}
.cta-row .badge img {
  height: 54px;
  width: auto;
  display: block;
}
.cta-row .badge:hover { opacity: 0.82; }
/* Show the black badge in light mode, white badge in dark mode */
.cta-row .badge .badge-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .cta-row .badge .badge-light { display: none; }
  .cta-row .badge .badge-dark { display: block; }
}
.pill {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--ink-faint);
  padding: 7px 14px;
  border: 1px solid var(--separator);
  border-radius: 999px;
  font-weight: 500;
}

/* -------------------- Stats card (inset-grouped style) -------------------- */
.stats-section { padding: 32px 0 64px; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-radius: 14px;
  padding: 36px 28px;
  gap: 24px;
}
.stat .num {
  font-size: clamp(32px, 4.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}
.stat .lab {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 28px 22px; }
}

/* -------------------- Section header -------------------- */
.section-head {
  font-size: 12px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 16px;
  padding-left: 16px;
}

/* -------------------- Features (inset-grouped list of cards) -------------------- */
.features { padding: 64px 0; }
.features .grid {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
}
.feature {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 24px 24px;
  align-items: start;
  border-top: 1px solid var(--separator);
}
.feature:first-child { border-top: none; }
.feature .icon-square {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
}
.feature .icon-square.blue   { background: var(--tint-blue-fill);   color: var(--tint-blue); }
.feature .icon-square.red    { background: var(--tint-red-fill);    color: var(--tint-red); }
.feature .icon-square.green  { background: var(--tint-green-fill);  color: var(--tint-green); }
.feature .icon-square.orange { background: var(--tint-orange-fill); color: var(--tint-orange); }
.feature .icon-square.purple { background: var(--tint-purple-fill); color: var(--tint-purple); }
.feature .icon-square svg {
  width: 24px; height: 24px;
  fill: currentColor;
}
.feature h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.25;
}
.feature p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}
@media (max-width: 540px) {
  .feature { grid-template-columns: 52px 1fr; gap: 14px; padding: 20px 18px; }
  .feature .icon-square { width: 38px; height: 38px; }
  .feature .icon-square svg { width: 20px; height: 20px; }
  .feature h3 { font-size: 18px; }
}

/* -------------------- Stance section -------------------- */
.stance { padding: 64px 0; }
.stance h2 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 720px;
  margin-bottom: 16px;
  color: var(--ink);
}
.stance p.lede {
  color: var(--ink-soft);
  max-width: 620px;
  font-size: 18px;
  margin-bottom: 32px;
  line-height: 1.5;
}
.stance-list {
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
}
.stance-list .item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 22px 24px;
  border-top: 1px solid var(--separator);
  align-items: baseline;
}
.stance-list .item:first-child { border-top: none; }
.stance-list .k {
  font-size: 12px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.stance-list .v {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.stance-list .v small {
  display: block;
  font-size: 15px;
  color: var(--ink-soft);
  font-weight: 400;
  margin-top: 4px;
  line-height: 1.45;
}
@media (max-width: 540px) {
  .stance-list .item { grid-template-columns: 1fr; gap: 6px; padding: 18px 18px; }
}

/* -------------------- Tech / Designed for Apple strip -------------------- */
.tech-strip { padding: 56px 0; }
.tech-strip .row {
  background: var(--surface);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: center;
}
.tech-strip .item { white-space: nowrap; }
.tech-strip .item {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tech-strip .item::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--tint-blue);
  border-radius: 50%;
}

/* -------------------- Long-form prose (privacy / support / imprint) -------------------- */
.doc { padding: 64px 0 96px; }
.doc h1 {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 10px;
  color: var(--ink);
}
.doc .meta-line {
  color: var(--ink-faint);
  font-size: 14px;
  margin-bottom: 40px;
}
.doc h2 {
  font-size: 12px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin: 40px 0 16px;
}
.doc h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  line-height: 1.25;
  color: var(--ink);
}
.doc p {
  color: var(--ink-soft);
  margin-bottom: 14px;
  line-height: 1.6;
}
.doc p strong { color: var(--ink); font-weight: 600; }
.doc p a { color: var(--tint-blue); }
.doc p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.doc .lede {
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 22px;
  line-height: 1.5;
}
.doc ul { margin: 0 0 18px 22px; color: var(--ink-soft); }
.doc ul li { margin-bottom: 6px; line-height: 1.5; }
.doc address {
  font-style: normal;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.doc hr {
  border: none;
  border-top: 1px solid var(--separator);
  margin: 40px 0;
}
.doc .note {
  padding: 16px 20px;
  background: var(--surface);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 22px;
  line-height: 1.55;
}
.doc .small {
  font-size: 14px;
  color: var(--ink-faint);
}

/* -------------------- Support page — contact card + FAQ -------------------- */
.contact-card {
  padding: 24px 26px;
  background: var(--surface);
  border-radius: 14px;
  margin-bottom: 18px;
}
.contact-card .label {
  font-size: 12px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 6px;
}
.contact-card .email {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.contact-card .email a { color: var(--tint-blue); }
.contact-card .note { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }

details.q {
  background: var(--surface);
  padding: 18px 22px;
  margin-bottom: 8px;
  border-radius: 12px;
}
details.q summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--ink);
}
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after {
  content: "+";
  font-size: 22px;
  color: var(--ink-faint);
  font-weight: 400;
}
details.q[open] summary::after { content: "−"; }
details.q .a {
  color: var(--ink-soft);
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.55;
}
details.q .a p { margin-bottom: 10px; }
details.q .a a { color: var(--tint-blue); }

pre.template {
  background: var(--surface);
  border-radius: 12px;
  padding: 22px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* -------------------- Footer -------------------- */
footer.site {
  padding: 64px 0 56px;
  border-top: 1px solid var(--separator);
  font-size: 14px;
  color: var(--ink-faint);
  margin-top: 48px;
}
footer.site .wrap { max-width: 980px; }
footer.site .nav {
  display: flex;
  gap: 22px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
footer.site .nav a {
  color: var(--ink);
  font-weight: 500;
}
footer.site .nav a:hover { color: var(--tint-blue); }
footer.site .disclaimer {
  max-width: 700px;
  line-height: 1.6;
}
footer.site .credit { margin-top: 22px; font-size: 13px; }