/* Shared by the public pages (Figma: Chango • Verkkosivu). The auth page keeps
   its own copy inline: it is the one page that must load with nothing else, so
   change both together. No third-party files anywhere on the site: the font
   and images are served from chango.fit itself. */
@font-face{
  font-family:"Figtree";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url(/fonts/figtree.woff2) format("woff2");
}
:root{
  --top:#346ba8; --bottom:#17293d; --ink:#ffffff; --tagline:#dce5ef;
  --line:#8aa4be; --button:#2c4c6f;
  --font:"Figtree",-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bottom)}
body{
  margin:0; min-height:100vh; min-height:100dvh;
  padding:68px 16px 64px; overflow-x:hidden;
  font-family:var(--font); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* The background stays put while the card scrolls over it. The monkeys are
   each two renders blended onto the gradient, as in Figma, so they take the
   colour of the background behind them; the sitting one stands on the bottom
   edge of the screen. */
.scene{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:linear-gradient(var(--top), var(--bottom));
}
.monkey{position:absolute}
.monkey img{position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:overlay}
.monkey img + img{opacity:.5}
.monkey.hang{left:calc(50% + 191px); top:-59px; width:578px; height:578px}
.monkey.sit{left:calc(50% - 711px); bottom:10px; width:484px; height:484px}
.monkey.sit::before{
  content:""; position:absolute; left:-55px; top:340px; width:585px; height:182px;
  background:radial-gradient(closest-side, rgba(0,0,0,.4), transparent);
  filter:blur(20px);
}

.logo{position:relative; width:338px; margin:0 auto; text-align:center}
.logo a, .logo img{display:block; width:100%; height:auto}
.logo img{filter:drop-shadow(0 4px 10px rgba(0,0,0,.15))}
.tagline{
  margin:14px 0 0; font-size:22px; line-height:24px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--tagline); opacity:.8;
}

.card{
  position:relative; width:100%; max-width:600px; margin:32px auto 0; padding:32px;
  border-radius:12px; background:rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(13px); backdrop-filter:blur(13px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Language menu at the top of the card (added by lang.js) */
.langs{
  display:block; height:24px; margin:0 0 16px; padding:0 24px 0 0; border:0; border-radius:4px;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 24px 24px;
  font:400 16px/24px var(--font); letter-spacing:-.02em; color:var(--ink);
}
.langs option{color:#27272e; background:#fff}

h1{font-size:22px; font-weight:800; letter-spacing:-.04em; line-height:28px; margin:0 0 20px}
h2{font-size:16px; font-weight:600; line-height:24px; margin:24px 0 4px}
p, li{font-size:16px; line-height:22px; letter-spacing:-.01em}
p{margin:0 0 16px}
ul{margin:0 0 16px; padding-left:20px}
a{color:var(--ink)}
a[href^="mailto:"]{text-decoration:none}
.foot{
  display:flex; justify-content:space-between; gap:16px;
  margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:12px; line-height:16px; letter-spacing:0;
}
.foot a:not(:last-child){display:inline-block; min-width:40px; margin-right:24px}
[hidden]{display:none !important}

@media (max-width:639px){
  body{padding:60px 16px 48px}
  .monkey.hang{left:128px; top:-62px; width:422px; height:422px}
  .monkey.sit{display:none}   /* only the hanging one on phones (Jenni 27.9.2026) */
  .logo{width:220px; margin:0 0 0 8px}
  .tagline{margin-top:10px; font-size:15px; white-space:nowrap}
  .card{padding:24px}
}