/* Nimbo web — tokens mirrored from src/theme/colors.ts. */
:root {
  --brand: #12A8A0;
  --brand-deep: #0B6E68;
  --brand-soft: #CFEEEB;
  --aqua: #E8F7F6;
  --cream: #FFF8ED;
  --navy: #213141;
  --navy-muted: #5C6B7D;
  --surface: #FFFFFF;
  --border: #DDE7E6;
  --mint: #67C6A3;
  --radius: 18px;
  --max: 760px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --aqua: #0E2A2F;
    --cream: #101B22;
    --navy: #EAF3F2;
    --navy-muted: #A2B4B9;
    --surface: #16242C;
    --border: #243A42;
    --brand: #5FC7C0;
    --brand-deep: #9BDDD8;
    --brand-soft: #16383A;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff;
  padding: 10px 16px; border-radius: 0 0 var(--radius) 0; z-index: 10;
}
.skip:focus { left: 0; }

header.site {
  background: var(--aqua);
  border-bottom: 1px solid var(--border);
}
.bar {
  max-width: var(--max); margin: 0 auto; padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.bar a.home { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.bar img { height: 30px; width: auto; display: block; }
.bar .name { font-weight: 800; font-size: 19px; color: var(--navy); letter-spacing: -0.01em; }
nav.lang { display: flex; gap: 6px; }
nav.lang a {
  font-size: 14px; font-weight: 650; text-decoration: none; color: var(--brand-deep);
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  min-height: 34px; display: inline-flex; align-items: center;
}
nav.lang a[aria-current] { background: var(--brand); color: #fff; border-color: var(--brand); }

main { max-width: var(--max); margin: 0 auto; padding: 40px 22px 72px; }
h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 10px; }
h2 { font-size: clamp(20px, 3.4vw, 24px); line-height: 1.3; margin: 40px 0 12px; letter-spacing: -0.01em; }
h3 { font-size: 18px; margin: 26px 0 8px; }
p, li { color: var(--navy); }
.lede { font-size: 19px; color: var(--navy-muted); margin: 0 0 8px; }
.updated { font-size: 14px; color: var(--navy-muted); margin: 0 0 32px; }
a { color: var(--brand-deep); text-underline-offset: 3px; }
ul { padding-left: 22px; }
li { margin: 7px 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 44px 0; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; margin: 22px 0;
}
.card h2, .card h3 { margin-top: 0; }
.promise { display: grid; gap: 14px; padding: 0; list-style: none; }
.promise li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.promise .tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-deep);
  display: grid; place-items: center; font-weight: 800; font-size: 13px; margin-top: 2px;
}
.promise strong { display: block; }
.promise span.sub { color: var(--navy-muted); font-size: 15px; }

table { border-collapse: collapse; width: 100%; font-size: 15px; }
.scroll { overflow-x: auto; margin: 18px 0; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 700; color: var(--navy-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }

.contact { font-size: 18px; font-weight: 650; }
footer.site {
  border-top: 1px solid var(--border); background: var(--aqua);
  font-size: 14px; color: var(--navy-muted);
}
footer.site .bar { padding: 24px 22px; }
footer.site a { color: var(--brand-deep); margin-right: 16px; }
.hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.hero img { width: 88px; height: 88px; border-radius: 22px; }

/* Store badges.
   Apple ships its badge with no padding; Google bakes clear space equal to an
   eighth of the badge height into every side of the PNG. Sized to the same box
   the Play badge therefore looks smaller, so it is rendered a quarter taller
   and its built-in padding is pulled back out with a negative margin. */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 26px 0 30px; }
.stores a { display: inline-flex; border-radius: 8px; }
.stores a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.stores img { display: block; width: auto; }
.stores .apple img { height: 52px; }
.stores .play img { height: 65px; margin: -6px -7px; }