/* Repitamos — one stylesheet for all pages.

   Palette is lifted from the app itself (app/src/main/java/com/darkscreen/repitamos/ui/theme/Theme.kt)
   rather than invented for the web: terracotta and amber on near-black coffee. The site should look
   like the thing it is advertising.

   No @font-face and no webfont request. A system stack renders instantly, adds no bytes, and makes
   no third-party connection — which matters on a site whose central claim is that nothing about you
   is collected. A downloaded font would be the only thing on the page arguing otherwise.

   No inline style attributes anywhere in the HTML either, which is what lets the CSP say
   style-src 'self' with no 'unsafe-inline'. Keep it that way: one inline style attribute forces the
   whole policy to be loosened for every page. */

:root {
  --night: #14100D;
  --surface: #201914;
  --surface-high: #2B221B;
  --terracotta: #E07A5F;
  --amber: #F2CC8F;
  --sage: #81B29A;
  --cream: #F4F1DE;
  --muted: #CFC5B4;
  --rule: rgba(244, 241, 222, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--night);
  color: var(--cream);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1.12rem;
  line-height: 1.68;
}

/* Underlined by default, per WCAG 1.4.1 (Use of Color): amber against cream body text is only
   1.34:1, so hue alone never distinguished a link, and a hover-only underline does nothing for a
   keyboard or touch user. */
a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 0 22px; }
.prose { max-width: 660px; margin: 0 auto; }
.prose p + p,
.prose ul + p,
.prose p + ul { margin-top: 18px; }
.prose ul, .prose ol { margin-left: 1.15em; }
.prose li + li { margin-top: 8px; }

/* A skip link that is invisible until focused. */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 22px;
  top: 12px;
  z-index: 10;
  background: var(--amber);
  color: var(--night);
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
}

header {
  padding: 84px 0 64px;
  text-align: center;
  background: radial-gradient(ellipse 70% 55% at 50% 28%, #2E2119 0%, var(--night) 72%);
}
header img.mark {
  width: 116px;
  height: 116px;
  border-radius: 26px;
}
h1 {
  font-size: 3.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 24px;
  color: var(--amber);
  line-height: 1.15;
}
/* No text-transform here: this slot holds the literal tagline on the home page but the brand name
   on the inner pages, and lowercasing it rendered "repitamos" under "Privacy" as though the
   wordmark were styled that way. Whatever the tagline should say, the HTML says. */
.tagline {
  letter-spacing: 0.2em;
  color: var(--terracotta);
  font-size: 1.1rem;
  margin-top: 8px;
}
.sub {
  color: var(--muted);
  margin-top: 20px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.status { color: var(--cream); margin-top: 18px; font-size: 1.02rem; }
.updated { color: var(--muted); margin-top: 14px; font-size: 1rem; }
.topnav { margin-top: 22px; font-size: 1.03rem; color: var(--muted); }
.topnav a { white-space: nowrap; }

section { padding: 58px 0; }
section.alt { background: var(--surface); }

h2 {
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--terracotta);
  margin-bottom: 26px;
  text-align: center;
}
h3 {
  font-weight: 600;
  font-size: 1.14rem;
  color: var(--amber);
  margin-top: 28px;
  margin-bottom: 6px;
}
.prose h3:first-of-type { margin-top: 0; }

.lede { font-size: 1.22rem; color: var(--cream); }

blockquote {
  border-left: 3px solid var(--terracotta);
  padding-left: 20px;
  font-style: italic;
  color: var(--amber);
  margin: 26px auto;
  max-width: 620px;
}
blockquote cite {
  display: block;
  font-style: normal;
  font-size: 0.97rem;
  color: var(--muted);
  margin-top: 8px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.feature {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(224, 122, 95, 0.42);
  border-radius: 10px;
  padding: 20px;
}
.feature h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--terracotta);
  margin-bottom: 8px;
}
.feature p { font-size: 1.02rem; }

/* The three headline numbers. minmax(0,1fr) rather than 1fr so a long label cannot force the
   track wider than the viewport at 320px (WCAG 1.4.10 Reflow). */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 18px;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.figure { padding: 14px 8px; }
.figure b {
  display: block;
  font-size: 2.15rem;
  font-weight: 600;
  color: var(--amber);
  line-height: 1.2;
}
.figure span {
  display: block;
  color: var(--muted);
  font-size: 0.98rem;
  margin-top: 4px;
}

ul.sources { max-width: 660px; margin: 0 auto; list-style: none; }
ul.sources li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.04rem;
}
ul.sources li span { color: var(--muted); }

ol.steps { max-width: 660px; margin: 0 auto 0 1.2em; }
ol.steps li { padding: 5px 0; }

/* A hostname or an address is one unbreakable token and will punch out of a 320px viewport
   otherwise. `anywhere` because only it breaks a word that is alone on its line. */
code, .brk {
  overflow-wrap: anywhere;
  word-break: break-word;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.93em;
  background: var(--surface-high);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

footer {
  background: var(--surface);
  padding: 42px 0 52px;
  text-align: center;
  color: var(--muted);
  font-size: 0.99rem;
}
footer .fvc {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
}
footer p { margin-top: 10px; }

@media (max-width: 520px) {
  h1 { font-size: 2.4rem; }
  header { padding: 60px 0 48px; }
  section { padding: 46px 0; }
  body { font-size: 1.08rem; }
}

/* Respect a reduced-motion preference: there is no motion here, but the smooth-scroll a browser
   may apply to in-page anchors is still motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}