:root {
  --page-background: #eaf4f5;
  --page-background-accent: #f7fbfa;
  --text-color: #1f353a;
  --accent: #00587c;
  --badge-height: 40px;
}

body {
  min-height: 100vh;
  padding: 1.5rem 0;
  color: var(--text-color);
  background: linear-gradient(135deg, var(--page-background), var(--page-background-accent));
}

.migration-card {
  max-width: 700px;
  border: 0;
  border-radius: 8px;
}

.clee-logo {
  width: 140px;
  height: 31px;
}

.migration-heading {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 700;
}

.migration-copy {
  line-height: 1.6;
}

.app-preview {
  max-width: 100%;
  max-height: 400px;
  height: auto;
}

.app-badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.app-badges a {
  display: inline-flex;
}

.store-badge {
  width: auto;
}

/* Apple's SVG badge has no transparent clear space, so its rendered height is
   the visible height. */
.store-badge-apple {
  height: var(--badge-height);
}

/* The Google Play PNG bakes in transparent clear space around the visible
   badge, and the amount of clear space differs by language, so the rendered
   height and compensating negative margin are computed per language to keep
   both badges the same visible height. Measured from the source 646x250 PNGs:
   en has 41px clear space / 168px visible badge; de, fr, it and sl have 29px
   clear space / 192px visible badge. */
.store-badge-google {
  height: calc(var(--badge-height) * 250 / 192);
  margin: calc(var(--badge-height) * -29 / 192) 0;
}

html[lang="en"] .store-badge-google {
  height: calc(var(--badge-height) * 250 / 168);
  margin: calc(var(--badge-height) * -41 / 168) 0;
}

@media (max-width: 380px) {
  :root {
    --badge-height: 32px;
  }

  .app-badges {
    gap: 0.5rem;
  }
}

.support-button {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--accent);
}

.support-button:hover,
.support-button:focus {
  color: #fff;
  background: var(--accent);
}

.support-dialog {
  width: min(100% - 2rem, 540px);
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow-y: auto;
  color: var(--text-color);
  background: transparent;
  border: 0;
}

.support-dialog::backdrop {
  background: rgb(31 53 58 / 45%);
}

.support-panel {
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
}

.support-section {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #d9e4e5;
}

.support-contact {
  display: block;
  width: fit-content;
  color: var(--accent);
  font-weight: 700;
}

.support-contact + .support-contact {
  margin-top: 0.5rem;
}

.about-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.about-brand img {
  width: 64px;
  height: 64px;
  background: #fdb913;
  border-radius: 4px;
}

.about-name {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 300;
}

.about-tagline {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
}

.office-hours > div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.75rem;
}

.office-hours > div + div {
  margin-top: 0.35rem;
}

.office-hours dd {
  display: flex;
  gap: 1rem;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .migration-card {
    padding: 1.5rem !important;
  }

  .clee-logo {
    margin-bottom: 2rem !important;
  }
}

@media (max-width: 420px) {
  .office-hours dd {
    flex-direction: column;
    gap: 0.15rem;
  }
}