/* TaxmanSeKilos: the app's palette, teal (the icon's ground and the launch
   screen), charcoal (the hat) and warm paper, in light and dark. System fonts
   only, so the site loads nothing from anyone else (the CSP allows only this
   origin). Phone first: one column, wider layouts from 48rem. */
:root {
  --teal: #00708c;
  --teal-bright: #0385a8;
  --charcoal: #2e3538;
  --paper: #f4f1ea;
  --bg: #fbfaf7;
  --bg-raised: #ffffff;
  --text: #1d2224;
  --muted: #5b6569;
  --line: #e1ddd3;
  --link: #00708c;
  --accent: #00708c; /* small labels: 5.4:1 on --bg */
  --hero-text: #ffffff;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --wrap: 66rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111618;
    --bg-raised: #1a2124;
    --text: #e8ecec;
    --muted: #a2adb0;
    --line: #2b3539;
    --link: #5cc6e0;
    --accent: #5cc6e0;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.6 var(--sans);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0.3em 0 0.3em; }
h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin: 2.2rem 0 0.7rem; }
h3 { font-size: 1.1rem; margin: 1.6rem 0 0.4rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; }
.prose { max-width: 42rem; }
.muted { color: var(--muted); }
.eyebrow {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin: 0;
}
.page { padding-top: 2rem; padding-bottom: 3rem; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 38rem; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bg-raised); padding: 0.5rem 1rem; z-index: 10; }

/* Header */
.site-header { background: var(--teal); color: var(--hero-text); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; gap: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 0.55rem; color: var(--hero-text); text-decoration: none; font-weight: 700; }
.brand img { border-radius: 8px; }
.nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; list-style: none; margin: 0; padding: 0.4rem 0; align-items: center; }
.nav a { color: var(--hero-text); text-decoration: none; font-size: 0.95rem; opacity: 0.92; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; text-decoration: underline; }
.nav .lang-switch { border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; padding: 0.15rem 0.7rem; }

/* Landing page: a teal hero with the first screenshot, then one section per
   feature, text and screenshot side by side from 48rem (alternating sides). */
/* Ends at #006b85, so white text keeps at least 5.7:1 everywhere on it. */
.hero { background: linear-gradient(180deg, var(--teal) 0%, #006b85 100%); color: var(--hero-text); padding: 2rem 0 2.5rem; }
.hero .eyebrow { color: var(--hero-text); }
.hero h1 { margin-top: 0.2em; }
.hero .lede { color: var(--hero-text); }
.hero .small { color: var(--hero-text); }
.hero .soon { background: rgba(0, 0, 0, 0.18); border-color: rgba(255, 255, 255, 0.5); color: var(--hero-text); }
.hero-grid { display: grid; gap: 1.5rem; align-items: end; }
.hero-shot { width: min(72vw, 18rem); margin: 0 auto; }
.small { font-size: 0.9rem; color: var(--muted); }
.shot { border-radius: 1.4rem; box-shadow: 0 1rem 2.5rem rgba(0, 40, 50, 0.22); }
.features { padding-top: 3.5rem; padding-bottom: 2rem; }
.feature { display: grid; gap: 1.25rem; align-items: center; margin-bottom: 3.5rem; }
.feature .shot { width: min(72vw, 17rem); margin: 0 auto; }
.feature h2 { margin-top: 0; }
.closing { margin: 1rem auto 2rem; text-align: center; }
.closing .badges { justify-content: center; }

@media (min-width: 48rem) {
  .hero { padding: 3.5rem 0 3.5rem; }
  .hero-grid { grid-template-columns: 1fr 18rem; gap: 3rem; align-items: center; }
  .feature { grid-template-columns: 1fr 17rem; gap: 3rem; }
  .feature:nth-of-type(even) { grid-template-columns: 17rem 1fr; }
  .feature:nth-of-type(even) > div { order: 2; }
}

/* Store badges */
.badges { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1.5rem 0; }
.badge img { height: 50px; width: auto; }
/* Google's badges carry their own clear space (en: 41 px of 250 all round;
   af: 29 px above and below), so they're drawn larger and pulled in by it,
   and the artwork itself stands 50 px high next to Apple's. */
.badge-play img.play-en { height: 74px; margin: -12px; }
.badge-play img.play-af { height: 65px; margin: -7.5px 0; }
.soon {
  margin: 0; padding: 0.55rem 1rem; border-radius: 10px; font-size: 0.95rem; font-weight: 600;
  background: var(--bg-raised); border: 1px solid var(--line); color: var(--muted);
}

/* A notice in a long page, such as the translation note on the Afrikaans policy. */
.note { border-left: 4px solid var(--teal-bright); background: var(--bg-raised); padding: 0.6rem 1rem; font-size: 0.95rem; }

/* Logbook guide and other long pages */
.disclaimer { border-left: 4px solid var(--teal-bright); background: var(--bg-raised); padding: 0.8rem 1rem; margin: 2rem 0; }
.disclaimer p { margin: 0; }

/* Press facts and buttons */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.2rem; margin: 0; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
.button-link {
  display: inline-block; background: var(--teal); color: #ffffff; text-decoration: none; font-weight: 600;
  padding: 0.55rem 1.1rem; border-radius: 10px;
}
.button-link:hover { background: #005d75; color: #ffffff; }
.links { font-weight: 600; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0 2.5rem; color: var(--muted); font-size: 0.92rem; }
.site-footer p { margin: 0.35rem 0; }
.site-footer .fine { font-size: 0.82rem; }