@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 800; font-display: swap; src: url("../fonts/roboto-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("../fonts/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 900; font-display: swap; src: url("../fonts/inter-latin-900-normal.woff2") format("woff2"); }

:root {
  --cyan: #00a1c6;
  --primary-dark: #0087a6;
  --navy: #0f2a48;
  --navy-light: #173b64;
  --ink: #102d3c;
  --blue-gray: #56697b;
  --blue-gray-dark: #3c4e5e;
  --blue-gray-light: #cbd6df;
  --badge-gray: #647588;
  --border-gray: #dde3e9;
  --border-blue: #e0e6ed;
  --surface-gray: #f3f5f7;
  --surface-blue: #dff3fe;
  --orange-dark: #a33b00;
  --white: #ffffff;

  /* Aero is the brand display face; no web font of it is available yet. */
  --font-display: "Aero", "Inter", system-ui, sans-serif;
  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, sans-serif;

  --page-gutter: 16px;
  --content-width: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, p, ul, ol { margin: 0; }
a { color: var(--primary-dark); }
img { display: block; }

.container {
  width: 100%;
  max-width: calc(var(--content-width) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* Header */

.site-header { border-bottom: 1px solid var(--border-gray); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand__logo { width: 152px; height: 26px; }
.brand__divider { width: 1px; height: 26px; background: var(--blue-gray); }
.brand__label {
  color: var(--blue-gray);
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
}
.site-nav { display: flex; gap: 40px; }
.site-nav__link {
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-decoration: none;
  text-transform: uppercase;
}
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--cyan); }

/* Intro */

.section { padding-top: 68px; padding-bottom: 69px; display: flex; flex-direction: column; gap: 40px; }
.intro { display: flex; flex-direction: column; gap: 12px; }
.eyebrow {
  color: var(--cyan);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
}
.eyebrow a { color: inherit; text-decoration: none; text-transform: none; }
.eyebrow__trail { color: var(--blue-gray); font-weight: 400; text-transform: none; }
.display {
  font-family: var(--font-display);
  font-size: 55px;
  font-weight: 800;
  line-height: 66px;
  color: var(--navy);
}
.lead { max-width: 600px; font-size: 19px; line-height: 28px; }
.lead--narrow { max-width: 540px; }

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 24px;
  border: 2px solid var(--cyan);
  border-radius: 32px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.25px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.button__icon { flex: none; width: 20px; height: 20px; }
.button--filled { background: var(--cyan); color: var(--white); }
.button--filled:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.button--outline { background: transparent; color: var(--cyan); }
.button--outline:hover { background: var(--cyan); color: var(--white); }
.button:focus-visible, .app-chip:focus-visible, a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.button-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.button--wide { width: 100%; }

/* App cards */

.app-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 23px; }
.app-card {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 38px;
  border: 1px solid var(--border-gray);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
}
.app-card--dark { background: var(--navy); border-color: transparent; color: var(--white); }

.app-card__identity { display: flex; align-items: center; gap: 18px; }
.app-card__name { font-size: 34px; font-weight: 800; line-height: 41px; }
.platforms { display: flex; gap: 5px; margin-bottom: 5px; }
.platform {
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--border-gray);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.app-card--dark .platform { background: var(--badge-gray); color: var(--white); }

.app-icon { position: relative; flex: none; width: 85px; height: 85px; overflow: hidden; }
.app-icon img { position: absolute; }
.app-icon__tile { inset: 0; width: 100%; height: 100%; }
.app-icon__wordmark { top: 31.25%; left: 12.5%; width: 75%; height: 18.75%; }
.app-icon__badge { top: 53.13%; left: 50%; width: 37.5%; height: 18.74%; }
.app-icon__letter { top: 56.25%; height: 12.5%; }
.app-icon__letter--n { left: 53.13%; width: 9.37%; }
.app-icon__letter--e { left: 64.06%; width: 9.38%; }
.app-icon__letter--u { left: 75%; width: 9.37%; }
.app-icon--habbl { border: 1px solid var(--border-gray); border-radius: 8px; background: var(--white); }
.app-icon--habbl img { top: 25.5px; left: -16.5px; width: 199px; height: 34px; }

.app-card__benefits { display: flex; flex-direction: column; gap: 12px; }
.app-card__claim { font-size: 21px; font-weight: 700; line-height: 26px; }
.benefits { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; }
.benefits li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 16px;
  line-height: 20px;
}
.benefits li::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  background: url("../img/check-on-light.svg") center / contain no-repeat;
}
.app-card--dark .benefits li { color: var(--blue-gray-light); }
.app-card--dark .benefits li::before { background-image: url("../img/check-on-dark.svg"); }

.release-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding-top: 19px;
  border-top: 1px solid var(--border-gray);
  color: var(--blue-gray);
  font-size: 13.5px;
  line-height: 18px;
}
.release-meta strong { color: var(--navy); }
.app-card--dark .release-meta { border-top-color: var(--navy-light); color: var(--blue-gray-light); }
.app-card--dark .release-meta strong { color: var(--white); }

.app-card__actions { display: flex; flex-direction: column; gap: 16px; }
.app-card--dark .button--outline { border-color: var(--white); color: var(--white); }
.app-card--dark .button--outline:hover { background: var(--white); color: var(--navy); }

.secondary-downloads { font-size: 14px; line-height: 20px; color: var(--blue-gray); }
.app-card--dark .secondary-downloads, .app-card--dark .secondary-downloads a { color: var(--blue-gray-light); }

.more-link { margin-top: auto; font-size: 14px; font-weight: 500; line-height: 20px; }
.app-card--dark .more-link { color: var(--white); }

/* Which app */

.which-app { background: var(--surface-gray); padding: 60px 0; }
.which-app__inner { display: grid; grid-template-columns: minmax(0, 387px) minmax(0, 1fr); gap: 45px; }
.which-app__intro { display: flex; flex-direction: column; gap: 13px; color: var(--blue-gray-dark); font-size: 17px; line-height: 25.75px; }
.which-app__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; align-content: start; }
.option-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 23px;
  border: 1px solid var(--border-gray);
  border-radius: 15px;
  background: var(--white);
  font-size: 17px;
  line-height: 24.8px;
}
.option-card__app { color: var(--primary-dark); font-family: var(--font-heading); font-size: 12.4px; font-weight: 700; line-height: 17px; }
.option-card__app--neu { color: var(--orange-dark); }

.section-title { font-family: var(--font-heading); font-size: 32px; font-weight: 800; line-height: 38px; color: var(--navy); }

/* APK guide */

.apk-guide { background: var(--navy); color: var(--blue-gray-light); padding: 64px 0 68px; }
.apk-guide .section-title { color: var(--white); }
.apk-guide__intro { max-width: 700px; margin-top: 13px; font-weight: 500; line-height: 25px; }
.apk-guide__intro strong { color: var(--white); }
.cpu-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin-top: 24px; }
.cpu-type { padding: 20px 24px; border: 1px solid var(--navy-light); border-radius: 16px; font-size: 14px; line-height: 22px; }
.cpu-type dt { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--white); font-size: 18px; font-weight: 700; }
.cpu-type dd { margin: 0; }
.cpu-type__hint {
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--cyan);
  color: var(--white);
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 15px;
  margin-top: 39px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step { padding: 27px; border-radius: 16px; background: var(--navy-light); font-size: 14px; font-weight: 500; line-height: 23px; counter-increment: step; }
.step::before {
  content: counter(step);
  display: block;
  color: var(--cyan);
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 900;
  line-height: 36px;
}
.step__title { margin: 6px 0 9px; color: var(--white); font-size: 18px; font-weight: 700; line-height: 22px; }

/* Footer */

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 23px;
  min-height: 75px;
  padding-top: 16px;
  padding-bottom: 16px;
  color: var(--blue-gray);
  font-size: 14px;
  line-height: 20px;
}
.site-footer__links { display: flex; gap: 23px; }

/* All versions */

.app-chips { display: flex; gap: 8px; }
.app-chip {
  min-width: 103px;
  height: 41px;
  padding: 0 24px;
  border: 0;
  border-radius: 28px;
  background: var(--border-blue);
  color: var(--blue-gray);
  font: 700 14px var(--font-body);
  cursor: pointer;
}
.app-chip[aria-pressed="true"] { background: var(--blue-gray); color: var(--white); }

.versions { border: 1px solid var(--border-blue); border-radius: 14px; overflow: hidden; }
.versions__head, .version {
  display: grid;
  grid-template-columns: 97px 143px minmax(0, 1fr);
  align-items: start;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--border-blue);
}
.versions__head {
  align-items: center;
  min-height: 42px;
  padding-right: 33px;
  color: var(--blue-gray);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.versions__download-head { text-align: right; }
.versions__list { padding: 0; list-style: none; }
.version:last-child { border-bottom: 0; }
.version__name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.version__name strong { color: #102936; font-family: var(--font-heading); font-size: 14px; line-height: 19px; }
.version__build { color: var(--blue-gray); font-size: 12px; line-height: 16px; }
.version__current {
  padding: 1px 7px;
  border-radius: 7px;
  background: var(--surface-blue);
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-transform: uppercase;
}
.version__date { color: var(--blue-gray); font-size: 13px; line-height: 20px; }
.version__download { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.version__download .button { min-width: 200px; }
.version__secondary { color: var(--blue-gray); font-size: 12px; line-height: 18px; }
a.version__secondary { color: var(--primary-dark); }
.versions__status { padding: 20px; color: var(--blue-gray); font-size: 14px; }

/* Phone width */

@media (max-width: 720px) {
  .site-nav { gap: 20px; }
  .site-nav__link { font-size: 14px; }
  .section { padding-top: 40px; padding-bottom: 48px; gap: 28px; }
  .display { font-size: 36px; line-height: 44px; }
  .lead { font-size: 17px; line-height: 26px; }
  .app-card { padding: 24px; }
  .app-card__name { font-size: 28px; line-height: 34px; }
  .which-app { padding: 40px 0; }
  .which-app__inner { grid-template-columns: 1fr; gap: 24px; }
  .section-title { font-size: 26px; line-height: 32px; }
  .apk-guide { padding: 40px 0 48px; }
  .versions__head { display: none; }
  .version { grid-template-columns: 1fr auto; gap: 12px; padding: 16px; }
  .version__date { grid-column: 2; grid-row: 1; text-align: right; }
  .version__download { grid-column: 1 / -1; align-items: stretch; }
  .version__download .button { min-width: 0; }
}