/* One sheet for every UMI page. The three text pages used to carry their own
   inline styles from the old green palette, so terms, privacy and support each
   looked like a different website. */

:root {
  color-scheme: light;
  --ground:#F6F0F5; --surface:#FFFFFF; --ink:#1B1220; --muted:#6F6577;
  --faint:#E7DCE7; --accent:#8C61A4; --pop:#2B0E3A; --pink:#FDE4F2;
}
* { box-sizing:border-box }
html, body { height:100% }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.7;
  display:flex; flex-direction:column; min-height:100%;
}

/* header ------------------------------------------------------------------ */
.top { padding:34px 24px 0; text-align:center }
.top img { width:96px; height:auto }

/* content ----------------------------------------------------------------- */
main { flex:1; width:100%; max-width:720px; margin:0 auto; padding:34px 24px 72px }
h1 { font-size:28px; font-weight:700; letter-spacing:-.4px; margin:0 0 6px; line-height:1.25 }
h2 { font-size:18px; font-weight:700; margin:38px 0 12px }
p { margin:0 0 12px }
ul { padding-left:20px; margin:0 0 12px }
li { margin-bottom:6px }
strong { font-weight:600 }
a { color:var(--accent) }
.date { color:var(--muted); font-size:14px; margin:0 0 24px }
.intro p { color:var(--ink) }
hr { border:0; border-top:1px solid var(--faint); margin:56px 0 }
.en { color:var(--muted) }
.en h1, .en h2, .en strong { color:var(--ink) }
.mail {
  display:inline-block; margin:6px 0 8px; padding:12px 22px; border-radius:999px;
  background:var(--pop); color:var(--pink); font-weight:700; font-size:14px; text-decoration:none;
}
.box { background:var(--surface); border-radius:20px; padding:18px 20px; margin:18px 0 }
.box p { margin:0; font-size:14.5px; color:var(--muted) }

/* home -------------------------------------------------------------------- */
.home { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:56px 24px 40px; max-width:none }
.home .logo { width:168px; max-width:52vw; height:auto; margin-bottom:34px }
.home h1 { font-size:26px; margin:0 }
.soon { display:inline-block; margin-top:30px; padding:14px 30px; border-radius:999px;
  background:var(--pop); color:var(--pink); font-size:14.5px; font-weight:700; letter-spacing:.3px }

/* footer ------------------------------------------------------------------ */
footer { padding:0 24px 44px; text-align:center; color:var(--muted); font-size:13px; line-height:1.9 }
footer a { color:var(--accent); text-decoration:none; margin:0 9px; white-space:nowrap }
footer a:hover { text-decoration:underline }
.company { margin-top:16px; font-size:12px; opacity:.85 }

@media (min-width:640px) {
  h1 { font-size:31px }
  .home h1 { font-size:31px }
  .home .logo { width:196px }
}