@charset "UTF-8";



:root {

  --brand: #2040f0;

  --brand-light: #112ab6;

  --navy: #10102c;

  --navy-soft: #2e2a13;

  --navy-line: #d7deea;

  --paper: #f6f8fc;

  --white: #ffffff;

  --ink: #19170f;

  --muted: #5b6472;

  --yellow: #bcade0;

  --coral: #ad41d6;

  --border: #696863;

  --header-height: 78px;

  --container: 1200px;

}



* {

  box-sizing: border-box;

}



html {

  scroll-padding-top: var(--header-height);

}



body {

  min-width: 320px;

  margin: 0;

  padding-top: var(--header-height);

  overflow-x: hidden;

  color: var(--ink);

  background: var(--paper);

  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;

  line-height: 1.65;

}



body.menu-open {

  overflow: hidden;

}



button,

input,

textarea,

select {

  color: inherit;

  font: inherit;

}



button,

a,

input,

textarea,

select {

  -webkit-tap-highlight-color: transparent;

}



button {

  border: 0;

  cursor: pointer;

}



a {

  color: inherit;

  text-decoration: none;

}



img {

  display: block;

  max-width: 100%;

}



h1,

h2,

h3,

p {

  margin-top: 0;

}



section {

  scroll-margin-top: var(--header-height);

}



.container {

  width: min(calc(100% - 48px), var(--container));

  margin-inline: auto;

}



.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



.eyebrow {

  margin-bottom: 16px;

  color: var(--brand-light);

  font-family: Consolas, monospace;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 1.8px;

}



.eyebrow.coral {

  color: var(--coral);

}



.eyebrow.dark-label {

  color: var(--navy);

}



.section-light {

  background-color: var(--paper);

  background-image: radial-gradient(rgba(7, 17, 31, 0.12) 1px, transparent 1px);

  background-size: 17px 17px;

}



.section-dark {

  color: var(--white);

  background-color: var(--navy);

  background-image:

    linear-gradient(rgba(36, 60, 87, 0.25) 1px, transparent 1px),

    linear-gradient(90deg, rgba(36, 60, 87, 0.25) 1px, transparent 1px);

  background-size: 48px 48px;

}



.icon {

  display: inline-flex;

  flex: 0 0 auto;

  width: 24px;

  height: 24px;

}



.icon::before {

  width: 100%;

  height: 100%;

  background: var(--icon-url) center / contain no-repeat;

  content: "";

}



.icon-search {

  --icon-url: url("../icons/search.svg");

}



.icon-menu {

  --icon-url: url("../icons/menu.svg");

}



.icon-bell {

  --icon-url: url("../icons/bell.svg");

}



.icon-arrow {

  --icon-url: url("../icons/arrow.svg");

}



.icon-android {

  --icon-url: url("../icons/android.svg");

}



.icon-ios {

  --icon-url: url("../icons/ios.svg");

}



.site-header {

  position: fixed;

  z-index: 1000;

  top: 0;

  right: 0;

  left: 0;

  height: var(--header-height);

  color: var(--white);

  background: #050d18;

  border-bottom: 1px solid rgba(53, 185, 255, 0.2);

  transform: translateZ(0);

  backface-visibility: hidden;

}



.header-inner {

  display: flex;

  align-items: center;

  width: min(calc(100% - 48px), var(--container));

  height: 100%;

  margin-inline: auto;

}



.brand {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  flex: 0 0 auto;

  font-size: 21px;

  font-weight: 900;

  white-space: nowrap;

}



.brand-copy {

  display: grid;

  gap: 2px;

  line-height: 1.05;

}



.brand-copy strong {

  font-size: inherit;

}



.brand-copy small {

  color: #8fa2b8;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0;

}



.brand img {

  width: 44px;

  height: 44px;

  border-radius: 10px;

}



.site-nav {

  margin-left: auto;

}



.site-nav ul,

.site-footer ul {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 0;

  margin: 0;

  list-style: none;

}



.site-nav a {

  position: relative;

  display: block;

  padding: 27px 17px 26px;

  color: #cdd8e5;

  font-size: 14px;

  font-weight: 700;

}



.site-nav a::after {

  position: absolute;

  right: 17px;

  bottom: 0;

  left: 17px;

  height: 3px;

  background: var(--brand-light);

  content: "";

  opacity: 0;

}



.site-nav a:hover,

.site-nav a:focus-visible,

.site-nav a.is-active {

  color: #ffffff;

}



.site-nav a.is-active::after {

  opacity: 1;

}



.header-download {

  display: none;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-width: 154px;

  height: 46px;

  margin-left: 16px;

  color: var(--navy);

  background: var(--yellow);

  border-radius: 4px;

  font-size: 14px;

  font-weight: 900;

  white-space: nowrap;

}



.header-download:hover,

.header-download:focus-visible {

  background: #f0ff85;

}



.header-download .icon {

  width: 19px;

  height: 19px;

}



.menu-toggle {

  display: none;

  align-items: center;

  justify-content: center;

  width: 46px;

  height: 46px;

  color: var(--white);

  background: transparent;

  border: 1px solid var(--navy-line);

}



.hero {

  position: relative;

  overflow: hidden;

  min-height: 820px;

  color: var(--white);

  background:

    radial-gradient(circle at 84% 42%, rgba(24, 144, 230, 0.28), transparent 31%),

    linear-gradient(135deg, #07111f 0%, #0a1830 72%, #102449 100%);

}



.hero::before {

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(53, 185, 255, 0.1) 1px, transparent 1px),

    linear-gradient(90deg, rgba(53, 185, 255, 0.1) 1px, transparent 1px);

  background-size: 48px 48px;

  content: "";

}



.hero::after {

  position: absolute;

  right: -14%;

  bottom: -220px;

  left: -6%;

  height: 360px;

  background: rgba(4, 12, 24, 0.66);

  content: "";

  transform: rotate(-6deg);

}



.hero-grid {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);

  align-items: center;

  gap: 70px;

  min-height: 820px;

  padding-block: 84px 72px;

}



.hero-copy h1 {

  margin-bottom: 4px;

  font-size: clamp(64px, 7.2vw, 96px);

  line-height: 1.05;

  letter-spacing: -5px;

}



.hero-slogan {

  margin-bottom: 18px;

  font-size: clamp(26px, 2.8vw, 38px);

  font-weight: 800;

  letter-spacing: -1px;

}



.hero-intro {

  max-width: 620px;

  margin-bottom: 36px;

  color: #9fb0c4;

  font-size: 17px;

}



.search-form {

  display: flex;

  align-items: center;

  background: var(--white);

}



.hero-search {

  width: min(100%, 720px);

  height: 84px;

  border-left: 8px solid var(--brand-light);

  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.26);

}



.search-form .icon {

  margin-left: 24px;

  color: var(--navy);

}



.search-form input {

  min-width: 0;

  flex: 1;

  height: 100%;

  padding: 0 18px;

  background: transparent;

  border: 0;

  outline: 0;

  font-size: 17px;

}



.search-form button {

  align-self: stretch;

  min-width: 132px;

  margin: 10px;

  color: var(--white);

  background: var(--coral);

  border-radius: 3px;

  font-weight: 800;

}



.search-form button:hover,

.search-form button:focus-visible {

  background: #ff7185;

}



.hot-terms {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 18px;

  color: #8ea1b7;

  font-size: 13px;

  scrollbar-width: none;

}



.hot-terms::-webkit-scrollbar,

.week-strip::-webkit-scrollbar,

.screenshot-track::-webkit-scrollbar {

  display: none;

}



.hot-terms span {

  margin-right: 6px;

}



.hot-terms button {

  padding: 6px 10px;

  color: #c7d4e2;

  background: transparent;

  border: 1px solid #30445e;

}



.hot-terms button:hover,

.hot-terms button:focus-visible {

  color: var(--navy);

  background: var(--brand-light);

  border-color: var(--brand-light);

}



.hero-downloads {

  display: flex;

  gap: 14px;

  margin-top: 34px;

}



.hero-downloads a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-width: 220px;

  height: 60px;

  color: var(--navy);

  background: var(--brand-light);

  border: 1px solid var(--brand-light);

  border-radius: 3px;

  font-weight: 900;

  white-space: nowrap;

}



.hero-downloads a.secondary {

  color: var(--white);

  background: transparent;

  border-color: #d6e0ea;

}



.hero-downloads a:hover,

.hero-downloads a:focus-visible {

  color: var(--navy);

  background: var(--yellow);

  border-color: var(--yellow);

}



.product-note {

  margin: 22px 0 0;

  color: #7f90a4;

  font-size: 13px;

}



.hero-device {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 650px;

}



.device-orbit {

  position: absolute;

  border: 1px solid rgba(53, 185, 255, 0.34);

  border-radius: 50%;

}



.orbit-one {

  width: 520px;

  height: 520px;

}



.orbit-two {

  width: 650px;

  height: 650px;

  border-color: rgba(220, 255, 55, 0.2);

}



.phone-shell {

  position: relative;

  z-index: 2;

  width: 348px;

  height: 654px;

  padding: 12px;

  background: #03070d;

  border-radius: 54px;

  box-shadow: 0 38px 80px rgba(0, 0, 0, 0.5);

}



.phone-screen {

  position: relative;

  height: 100%;

  overflow: hidden;

  color: var(--ink);

  background: #ffffff;

  border-radius: 43px;

}



.phone-status {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 31px;

  padding: 0 14px;

  color: #ffffff;

  background: var(--brand);

  font-size: 11px;

  font-weight: 800;

}



.phone-appbar {

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 12px;

  height: 59px;

  padding: 0 14px;

  color: #ffffff;

  background: var(--brand);

}



.phone-appbar > strong {

  position: relative;

  font-size: 20px;

  white-space: nowrap;

}



.phone-appbar > strong small {

  position: absolute;

  bottom: -7px;

  left: 1px;

  padding: 0 3px;

  color: #ffffff;

  background: var(--coral);

  font-size: 7px;

  line-height: 10px;

}



.phone-appbar > span {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  height: 26px;

  padding-right: 9px;

  background: rgba(255, 255, 255, 0.45);

  border-radius: 16px;

}



.phone-appbar .icon {

  width: 15px;

  height: 15px;

}



.phone-appbar > b {

  font-size: 18px;

}



.phone-tabs {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  height: 48px;

  color: #ffffff;

  background: var(--brand);

  box-shadow: 0 4px 8px rgba(2, 43, 76, 0.18);

}



.phone-tabs > * {

  position: relative;

  display: grid;

  place-items: center;

  font-size: 12px;

  font-weight: 500;

}



.phone-tabs strong::after {

  position: absolute;

  right: 7px;

  bottom: 0;

  left: 7px;

  height: 3px;

  background: #ffffff;

  content: "";

}



.phone-banner {

  position: relative;

  height: 178px;

  overflow: hidden;

  margin: 0;

  background: linear-gradient(135deg, #e8fbff, #ffffff 48%, #edf5ff);

}



.phone-banner::before,

.phone-banner::after {

  position: absolute;

  color: var(--brand);

  content: "✦";

  font-size: 22px;

}



.phone-banner::before {

  top: 24px;

  left: 22px;

  color: var(--yellow);

}



.phone-banner::after {

  right: 18px;

  bottom: 49px;

}



.banner-shape {

  position: absolute;

  border-radius: 50%;

}



.shape-one {

  top: 13px;

  left: 98px;

  width: 150px;

  height: 150px;

  background: rgba(24, 144, 230, 0.16);

}



.shape-two {

  top: 42px;

  right: 18px;

  width: 82px;

  height: 82px;

  border: 2px solid rgba(255, 82, 107, 0.32);

}



.banner-person {

  position: absolute;

  top: 8px;

  left: 91px;

  width: 166px;

  height: 165px;

}



.person-hair {

  position: absolute;

  inset: 0 6px 15px;

  background: linear-gradient(140deg, #07111f 6%, #25375b 47%, #b52b88 100%);

  border-radius: 50% 50% 45% 45%;

  transform: rotate(-5deg);

}



.person-face {

  position: absolute;

  top: 32px;

  left: 48px;

  width: 77px;

  height: 91px;

  background: #ffd9cc;

  border-radius: 48% 48% 43% 43%;

}



.person-face::before,

.person-face::after {

  position: absolute;

  top: 36px;

  width: 13px;

  height: 18px;

  background: #20bce9;

  border: 3px solid #11182a;

  border-radius: 50%;

  content: "";

}



.person-face::before {

  left: 13px;

}



.person-face::after {

  right: 13px;

}



.person-body {

  position: absolute;

  right: 18px;

  bottom: -29px;

  left: 18px;

  height: 72px;

  background: linear-gradient(145deg, #f8b6c6, #7d69d8);

  border-radius: 70% 70% 0 0;

}



.phone-banner p {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 3;

  padding: 4px 8px;

  margin: 0;

  color: #ffffff;

  background: rgba(7, 17, 31, 0.74);

  font-size: 11px;

}



.phone-section-title {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 13px 10px 7px;

}



.phone-section-title strong {

  font-size: 15px;

}



.phone-section-title span {

  color: #a5afb9;

  letter-spacing: 3px;

}



.phone-recommendations {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 7px;

  padding: 0 8px;

}



.phone-recommendations article {

  min-width: 0;

}



.mini-cover {

  display: grid;

  height: 109px;

  margin-bottom: 6px;

  place-items: center;

  color: #ffffff;

  font-size: 34px;

  font-weight: 900;

  text-shadow: 2px 2px 0 rgba(7, 17, 31, 0.25);

}



.pink-cover {

  background: linear-gradient(145deg, #ff9dd1, #ff526b);

}



.gold-cover {

  background: linear-gradient(145deg, #ffe58c, #d78c28);

}



.dark-cover {

  background: linear-gradient(145deg, #263c64, #8e225d);

}



.phone-recommendations strong,

.phone-recommendations small,

.phone-recommendations em {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.phone-recommendations strong {

  font-size: 10px;

}



.phone-recommendations small {

  margin-top: 3px;

  color: #9ca5ae;

  font-size: 9px;

}



.phone-recommendations em {

  margin-top: 2px;

  color: #f26522;

  font-size: 9px;

  font-style: normal;

}



.phone-bottom-nav {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  height: 58px;

  padding-top: 5px;

  color: var(--ink);

  background: #ffffff;

  border-top: 1px solid #d9dfe3;

}



.cover-blue,

.blue-bg {

  background: linear-gradient(145deg, var(--brand-light), #0874c6);

}



.cover-yellow,

.yellow-bg {

  background: linear-gradient(145deg, var(--yellow), #9dcf19);

}



.cover-coral,

.coral-bg {

  background: linear-gradient(145deg, var(--coral), #d52d4a);

}



.navy-bg {

  background: linear-gradient(145deg, #314d6a, #13243a);

}



.phone-bottom-nav span {

  color: #8f969d;

  font-size: 9px;

  text-align: center;

}



.phone-bottom-nav i {

  display: block;

  height: 24px;

  font-size: 16px;

  font-style: normal;

}



.phone-bottom-nav span.active {

  color: var(--brand);

}



.section-heading {

  margin-bottom: 54px;

}



.section-heading h2,

.calendar-title h2,

.category-map h2,

.follow-radar h2,

.faq-title h2,

.download-intro h2 {

  margin-bottom: 8px;

  font-size: clamp(38px, 4vw, 56px);

  line-height: 1.12;

  letter-spacing: -2px;

}



.section-heading > div > p:last-child,

.calendar-title > div > p:last-child,

.category-map > p,

.follow-radar > p,

.faq-title > p:last-child,

.download-intro > p:last-child {

  color: var(--muted);

}



.search-lab {

  padding: 105px 0 110px;

}



.split-heading {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

}



.ghost-word {

  color: rgba(7, 17, 31, 0.07);

  font-size: 76px;

  font-weight: 900;

}



.search-console {

  display: grid;

  grid-template-columns: 1.6fr 0.8fr;

  gap: 26px;

  padding: 28px;

  background: var(--white);

  border: 1px solid var(--border);

  box-shadow: 0 20px 45px rgba(11, 25, 40, 0.08);

}



.lab-search {

  height: 70px;

  background: #eef1ed;

  border: 1px solid #d5dad8;

}



.lab-search button {

  min-width: 106px;

  color: var(--white);

  background: var(--navy);

}



.filter-group {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 9px;

  margin-top: 22px;

}



.filter-group strong {

  width: 58px;

  font-size: 14px;

}



.filter-group button {

  min-width: 68px;

  padding: 8px 14px;

  background: #edf0eb;

  border: 1px solid #d0d7d5;

  border-radius: 18px;

  font-size: 13px;

}



.filter-group button:hover,

.filter-group button:focus-visible,

.filter-group button.is-selected {

  color: var(--navy);

  background: var(--brand-light);

  border-color: var(--brand-light);

}



.search-suggestions {

  min-height: 294px;

  padding: 26px;

  color: var(--white);

  background: var(--navy);

}



.search-suggestions > p:first-child {

  margin-bottom: 18px;

  color: var(--brand-light);

  font-family: Consolas, monospace;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1px;

}



#search-results {

  display: grid;

  gap: 7px;

}



#search-results button {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 8px 0;

  color: var(--white);

  background: transparent;

  border-bottom: 1px solid #263d58;

  text-align: left;

}



#search-results button:hover,

#search-results button:focus-visible {

  color: var(--yellow);

}



#search-results small {

  color: #8090a3;

}



.empty-result {

  margin: 70px 0 0;

  color: #99a8b8;

  text-align: center;

}



.rankings {

  padding: 112px 0 120px;

}



.ranking-heading,

.showcase-heading {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

}



.ranking-heading h2,

.showcase-heading h2 {

  color: var(--white);

}



.ranking-heading > div > p:last-child,

.showcase-heading > p {

  color: #8d9db0;

}



.ranking-period {

  display: flex;

  border: 1px solid var(--navy-line);

}



.ranking-period button {

  padding: 12px 18px;

  color: #a5b2c1;

  background: var(--navy-soft);

  border-right: 1px solid var(--navy-line);

}



.ranking-period button:last-child {

  border-right: 0;

}



.ranking-period button:hover,

.ranking-period button:focus-visible,

.ranking-period button.is-selected {

  color: var(--navy);

  background: var(--brand-light);

}



.ranking-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 26px;

}



.ranking-card {

  min-width: 0;

  background: var(--navy-soft);

  border: 1px solid var(--navy-line);

}



.ranking-card::before {

  display: block;

  height: 7px;

  content: "";

}



.ranking-blue::before {

  background: var(--brand-light);

}



.ranking-yellow::before {

  background: var(--yellow);

}



.ranking-coral::before {

  background: var(--coral);

}



.ranking-card header {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  padding: 28px 28px 18px;

}



.ranking-card header span {

  color: var(--brand-light);

  font-family: Consolas, monospace;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.4px;

}



.ranking-yellow header span,

.ranking-yellow header small {

  color: var(--yellow);

}



.ranking-coral header span,

.ranking-coral header small {

  color: var(--coral);

}



.ranking-card header h3 {

  margin: 6px 0 0;

  font-size: 26px;

}



.ranking-card header small {

  color: var(--brand-light);

  font-family: Consolas, monospace;

  font-size: 11px;

}



.ranking-card ol {

  padding: 0 28px 28px;

  margin: 0;

  list-style: none;

}



.ranking-card li {

  display: grid;

  grid-template-columns: 44px 48px minmax(0, 1fr) auto;

  align-items: center;

  gap: 12px;

  min-height: 88px;

  border-top: 1px solid var(--navy-line);

}



.ranking-card li > b {

  color: var(--brand-light);

  font-size: 23px;

}



.ranking-yellow li > b {

  color: var(--yellow);

}



.ranking-coral li > b {

  color: var(--coral);

}



.rank-cover {

  display: grid;

  width: 48px;

  height: 60px;

  place-items: center;

  color: var(--navy);

  font-weight: 900;

}



.ranking-card li div {

  min-width: 0;

}



.ranking-card li strong,

.ranking-card li small {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.ranking-card li strong {

  font-size: 15px;

}



.ranking-card li small {

  margin-top: 3px;

  color: #8191a4;

  font-size: 12px;

}



.ranking-card li > i {

  color: #8b9aab;

  font-family: Consolas, monospace;

  font-size: 11px;

  font-style: normal;

}



.ranking-card li > i.trend-up {

  color: var(--brand-light);

}



.ranking-card li > i.trend-down {

  color: var(--coral);

}



.calendar {

  padding: 100px 0 90px;

  background: var(--yellow);

}



.calendar-title {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 44px;

}



.calendar-title > div > p:last-child {

  color: #43500b;

}



.calendar-title > strong {

  padding: 12px 18px;

  color: var(--white);

  background: var(--navy);

  font-size: 14px;

}



.week-strip {

  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  overflow: hidden;

  background: var(--white);

  border: 1px solid rgba(7, 17, 31, 0.2);

}



.week-strip button {

  min-width: 0;

  min-height: 190px;

  padding: 22px 18px;

  background: var(--white);

  border-right: 1px solid #d9dedc;

  text-align: left;

}



.week-strip button:last-child {

  border-right: 0;

}



.week-strip button:hover,

.week-strip button:focus-visible,

.week-strip button.is-selected {

  color: var(--white);

  background: var(--navy);

}



.week-strip small,

.week-strip strong,

.week-strip span,

.week-strip i {

  display: block;

}



.week-strip small {

  margin-bottom: 22px;

  color: var(--brand);

  font-family: Consolas, monospace;

  font-weight: 800;

}



.week-strip button.is-selected small,

.week-strip button:hover small,

.week-strip button:focus-visible small {

  color: var(--brand-light);

}



.week-strip strong {

  margin-bottom: 7px;

  font-size: 16px;

}



.week-strip span {

  color: #73808c;

  font-size: 12px;

  white-space: nowrap;

}



.week-strip i {

  width: fit-content;

  margin-top: 20px;

  padding: 5px 10px;

  color: var(--navy);

  background: #e9ede8;

  border-radius: 16px;

  font-size: 11px;

  font-style: normal;

  white-space: nowrap;

}



.week-strip button.is-selected i,

.week-strip button.has-reminder i {

  background: var(--brand-light);

}



.calendar-feedback {

  margin: 18px 0 0;

  color: #334008;

  font-size: 14px;

  text-align: right;

}



.discovery-tools {

  padding: 110px 0;

}



.tools-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 42px;

}



.category-panel,

.radar-panel {

  min-height: 450px;

  margin-top: 34px;

  padding: 30px;

  background: var(--white);

  border: 1px solid var(--border);

}



.category-panel > strong {

  font-size: 13px;

}



.category-options {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

  margin-top: 18px;

}



.category-options button {

  min-height: 58px;

  background: #edf0eb;

  border: 1px solid #d4dad8;

  font-weight: 700;

}



.category-options button:hover,

.category-options button:focus-visible,

.category-options button.is-selected {

  color: var(--white);

  background: var(--navy);

  border-color: var(--navy);

}



.select-row {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin-top: 28px;

}



.select-row label {

  color: #64717c;

  font-size: 12px;

}



.select-row select {

  width: 100%;

  height: 42px;

  margin-top: 7px;

  padding: 0 12px;

  background: var(--white);

  border: 1px solid #aeb9bf;

}



.category-submit {

  width: 100%;

  min-height: 56px;

  margin-top: 28px;

  color: var(--navy);

  background: var(--brand-light);

  font-weight: 900;

}



.category-submit:hover,

.category-submit:focus-visible {

  background: var(--yellow);

}



.follow-radar .eyebrow {

  color: var(--brand);

}



.radar-panel {

  display: grid;

  grid-template-columns: 220px minmax(0, 1fr);

  align-items: center;

  gap: 24px;

  color: var(--white);

  background: var(--navy);

  border-color: var(--navy);

}



.radar-visual {

  position: relative;

  display: grid;

  width: 210px;

  height: 210px;

  place-items: center;

  background:

    radial-gradient(circle, transparent 23%, #29415d 24%, transparent 25%, transparent 46%, #29415d 47%, transparent 48%, transparent 70%, #29415d 71%, transparent 72%);

  border: 1px solid #29415d;

  border-radius: 50%;

}



.radar-visual::before {

  position: absolute;

  width: 50%;

  height: 50%;

  background: linear-gradient(145deg, rgba(53, 185, 255, 0.7), rgba(53, 185, 255, 0));

  border-radius: 100% 0 0;

  content: "";

  transform: translate(26%, -24%) rotate(28deg);

  transform-origin: bottom left;

}



.radar-visual div {

  position: relative;

  z-index: 2;

  display: grid;

  width: 78px;

  height: 78px;

  place-content: center;

  background: #102943;

  border-radius: 50%;

  text-align: center;

}



.radar-visual strong,

.radar-visual small {

  display: block;

}



.radar-visual strong {

  font-size: 26px;

}



.radar-visual small {

  color: #94a4b6;

  font-size: 11px;

}



.radar-dot {

  position: absolute;

  width: 10px;

  height: 10px;

  background: var(--yellow);

  border-radius: 50%;

}



.dot-one {

  top: 26px;

  right: 42px;

}



.dot-two {

  bottom: 42px;

  left: 27px;

  background: var(--coral);

}



.dot-three {

  top: 69px;

  left: 39px;

  background: var(--brand-light);

}



.radar-list label {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  min-height: 62px;

  border-bottom: 1px solid var(--navy-line);

  cursor: pointer;

}



.radar-list label span {

  min-width: 0;

  font-size: 13px;

}



.radar-list label b {

  display: inline-block;

  width: 55px;

  color: var(--brand-light);

  font-family: Consolas, monospace;

}



.radar-list input {

  position: absolute;

  opacity: 0;

}



.radar-list label > i {

  position: relative;

  flex: 0 0 auto;

  width: 38px;

  height: 21px;

  background: #3d4d60;

  border-radius: 20px;

}



.radar-list label > i::after {

  position: absolute;

  top: 3px;

  left: 3px;

  width: 15px;

  height: 15px;

  background: var(--white);

  border-radius: 50%;

  content: "";

}



.radar-list input:checked + i {

  background: var(--brand);

}



.radar-list input:checked + i::after {

  left: 20px;

}



.radar-list button {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  width: 100%;

  min-height: 52px;

  margin-top: 20px;

  color: var(--navy);

  background: var(--yellow);

  font-weight: 900;

}



.radar-list button .icon {

  width: 18px;

  height: 18px;

}



.showcase {

  padding: 100px 0 118px;

}



.showcase-heading {

  margin-bottom: 40px;

}



.screenshot-track {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 20px;

}



.screenshot-track figure {

  min-width: 0;

  margin: 0;

}



.screenshot-track figure > div {

  aspect-ratio: 9 / 14;

  overflow: hidden;

  padding: 7px;

  background: var(--white);

  border-radius: 24px;

}



.screenshot-track img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: top;

  border-radius: 18px;

}



.screenshot-track figcaption {

  margin-top: 14px;

  font-size: 15px;

  font-weight: 800;

}



.screenshot-track figcaption b {

  display: inline-grid;

  width: 34px;

  height: 28px;

  margin-right: 8px;

  place-items: center;

  color: var(--navy);

  background: var(--brand-light);

  font-family: Consolas, monospace;

}



.reviews {

  padding: 110px 0;

}



.reviews-layout {

  display: grid;

  grid-template-columns: 330px minmax(0, 1fr);

  column-gap: 50px;

  row-gap: 24px;

}



.review-summary {

  display: flex;

  flex-direction: column;

  align-self: stretch;

  padding: 38px;

  color: var(--white);

  background: var(--navy);

  border-top: 7px solid var(--brand-light);

}



.review-summary h2 {

  margin-bottom: 18px;

  font-size: 36px;

  line-height: 1.3;

}



.review-summary > p:nth-of-type(2) {

  color: #98a8ba;

  font-size: 14px;

}



.review-summary > div {

  display: flex;

  align-items: center;

  gap: 20px;

  padding-top: 28px;

  margin-top: auto;

  border-top: 1px solid var(--navy-line);

}



.review-summary > div > strong {

  color: var(--yellow);

  font-size: 58px;

  line-height: 1;

}



.review-summary > div > span {

  color: var(--yellow);

  letter-spacing: 2px;

}



.review-summary > div small {

  display: block;

  margin-top: 6px;

  color: #a8b5c3;

  letter-spacing: 0;

}



.review-toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;

}



.review-toolbar h3 {

  margin: 0;

  font-size: 24px;

}



.review-toolbar > div {

  display: flex;

  gap: 8px;

}



.review-toolbar button {

  padding: 9px 13px;

  background: transparent;

  border: 1px solid #aeb9be;

  font-size: 12px;

}



.review-toolbar button:hover,

.review-toolbar button:focus-visible,

.review-toolbar button.is-selected {

  background: var(--brand-light);

  border-color: var(--brand-light);

}



.review-list {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

}



.review-card {

  min-height: 188px;

  padding: 24px;

  background: var(--white);

  border: 1px solid var(--border);

}



.review-card header {

  display: flex;

  justify-content: space-between;

  gap: 12px;

}



.review-card header strong,

.review-card header time {

  display: block;

}



.review-card header time {

  margin-top: 3px;

  color: #7a8792;

  font-size: 11px;

}



.review-card header > span {

  color: var(--brand);

  letter-spacing: 2px;

  white-space: nowrap;

}



.review-card > p {

  min-height: 52px;

  margin: 20px 0;

  font-size: 14px;

}



.review-card footer {

  padding-top: 12px;

  color: #7e8b96;

  border-top: 1px solid #dce1df;

}



.review-card.user-review footer {

  display: flex;

  justify-content: space-between;

}



.review-card footer button {

  padding: 0;

  color: var(--coral);

  background: transparent;

  font-size: 12px;

}



.review-form {

  grid-column: 1 / -1;

  padding: 28px;

  margin-top: 0;

  color: var(--white);

  background: var(--navy);

  border: 1px solid var(--navy-line);

}



.form-title h3 {

  margin: 0 0 22px;

  font-size: 28px;

}



.form-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

}



.form-grid > label,

.form-grid fieldset {

  min-width: 0;

  padding: 0;

  margin: 0;

  border: 0;

  font-size: 13px;

  font-weight: 700;

}



.form-grid input[type="text"],

.form-grid textarea {

  display: block;

  width: 100%;

  margin-top: 8px;

  color: var(--white);

  background: #12253a;

  border: 1px solid #3d5269;

  outline: 0;

}



.form-grid input[type="text"] {

  height: 52px;

  padding: 0 15px;

}



.form-grid textarea {

  min-height: 116px;

  padding: 14px 15px 30px;

  resize: vertical;

}



.form-grid input:focus,

.form-grid textarea:focus {

  border-color: var(--brand-light);

}



.rating-input {

  display: flex;

  flex-direction: row-reverse;

  justify-content: flex-end;

  height: 52px;

  padding: 8px 12px;

  margin-top: 8px;

  background: #12253a;

  border: 1px solid #3d5269;

}



.rating-input input {

  position: absolute;

  opacity: 0;

}



.rating-input label {

  padding: 0 4px;

  color: #6f8092;

  font-size: 25px;

  cursor: pointer;

}



.rating-input label:hover,

.rating-input label:hover ~ label,

.rating-input input:checked ~ label {

  color: var(--yellow);

}



.form-message {

  position: relative;

  grid-column: 1 / -1;

}



.form-message > span {

  position: absolute;

  right: 12px;

  bottom: 8px;

  color: #7f91a5;

  font-size: 11px;

}



.review-form > button {

  min-width: 170px;

  min-height: 50px;

  margin-top: 20px;

  color: var(--navy);

  background: var(--brand-light);

  font-weight: 900;

}



.review-form > button:hover,

.review-form > button:focus-visible {

  background: var(--yellow);

}



.form-feedback {

  display: inline-block;

  margin: 0 0 0 16px;

  color: var(--brand-light);

  font-size: 13px;

}



.faq {

  padding: 100px 0;

  background: #ffffff;

}



.faq-layout {

  display: grid;

  grid-template-columns: 320px minmax(0, 1fr);

  gap: 44px;

}



.faq-title {

  position: relative;

  min-height: 390px;

  padding: 42px;

  overflow: hidden;

  color: var(--white);

  background: var(--navy);

}



.faq-title > span {

  position: absolute;

  top: 50px;

  left: 34px;

  color: transparent;

  font-size: 126px;

  font-weight: 900;

  line-height: 1;

  -webkit-text-stroke: 1px rgba(53, 185, 255, 0.34);

}



.faq-title .eyebrow,

.faq-title h2,

.faq-title > p:last-child {

  position: relative;

  z-index: 2;

}



.faq-title .eyebrow {

  margin-top: 145px;

  color: var(--yellow);

}



.faq-title h2 {

  font-size: 42px;

}



.faq-title > p:last-child {

  color: #94a4b6;

  font-size: 14px;

}



.faq-list {

  border-top: 1px solid #bfc8cc;

}



.faq-list article {

  border-bottom: 1px solid #cbd2d5;

}



.faq-list article > button {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  min-height: 72px;

  padding: 0 22px;

  background: #ffffff;

  text-align: left;

}



.faq-list article > button:hover,

.faq-list article > button:focus-visible {

  background: #edf7fd;

}



.faq-list button span {

  font-size: 16px;

  font-weight: 800;

}



.faq-list button b {

  display: inline-block;

  width: 50px;

  color: var(--brand);

  font-family: Consolas, monospace;

  font-size: 12px;

}



.faq-list button i {

  font-size: 24px;

  font-style: normal;

}



.faq-list article > div {

  padding: 18px 72px;

  color: #536270;

  background: #eef7fb;

}



.faq-list article > div p {

  margin: 0;

}



.download {

  padding: 100px 0;

  background: var(--brand);

}



.download-layout {

  display: grid;

  grid-template-columns: 0.7fr 1.3fr;

  align-items: center;

  gap: 58px;

}



.download-intro h2 {

  margin-bottom: 20px;

  font-size: 48px;

}



.download-intro > p:last-child {

  color: #07375a;

}



.download-options {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

}



.download-options article {

  display: grid;

  grid-template-columns: 52px minmax(0, 1fr);

  gap: 14px;

  min-width: 0;

  padding: 28px;

  background: var(--white);

  border: 2px solid var(--navy);

  box-shadow: 8px 8px 0 var(--navy);

}



.download-options article > .icon {

  width: 48px;

  height: 48px;

  color: var(--brand);

}



.download-options article small {

  color: var(--brand);

  font-family: Consolas, monospace;

  font-weight: 800;

}



.download-options h3 {

  margin: 4px 0;

  font-size: 21px;

  white-space: nowrap;

}



.download-options p {

  margin-bottom: 0;

  color: var(--muted);

  font-size: 12px;

}



.download-options a {

  grid-column: 1 / -1;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 52px;

  margin-top: 12px;

  color: var(--white);

  background: var(--navy);

  font-weight: 900;

  white-space: nowrap;

}



.download-options a:hover,

.download-options a:focus-visible {

  color: var(--navy);

  background: var(--yellow);

}



.site-footer {

  padding: 45px 0 34px;

  color: #9aa9b9;

  background: #050d18;

}



.site-footer .container {

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 22px 34px;

}



.footer-brand {

  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--white);

  font-weight: 900;

}



.footer-brand img {

  border-radius: 9px;

}



.site-footer p {

  margin: 0;

  font-size: 13px;

}



.site-footer nav {

  grid-column: 3;

}



.site-footer ul {

  gap: 20px;

}



.site-footer a:hover,

.site-footer a:focus-visible {

  color: var(--brand-light);

}



.site-footer small {

  grid-column: 1 / -1;

  padding-top: 22px;

  border-top: 1px solid #263b54;

  text-align: center;

}



.back-to-top {

  position: fixed;

  z-index: 900;

  right: 24px;

  bottom: 24px;

  display: none;

  width: 52px;

  height: 52px;

  padding: 0;

  background: var(--yellow);

  border: 2px solid var(--navy);

  box-shadow: 4px 4px 0 var(--navy);

}



.back-to-top.is-visible {

  display: block;

}



.back-to-top i {

  display: block;

  width: 100%;

  height: 100%;

}



.back-to-top i::before {

  box-sizing: border-box;

  display: block;

  width: 18px;

  height: 18px;

  margin: 15px auto 0;

  border-left: 5px solid var(--navy);

  border-top: 5px solid var(--navy);

  background: none;

  transform: rotate(45deg);

  content: "";

}



:focus-visible {

  outline: 3px solid var(--yellow);

  outline-offset: 3px;

}



[hidden] {

  display: none !important;

}



@media (max-width: 1100px) {

  .site-nav a {

    padding-inline: 11px;

  }



  .site-nav a::after {

    right: 11px;

    left: 11px;

  }



  .header-download {

    min-width: 128px;

  }



  .hero-grid {

    grid-template-columns: minmax(0, 1.1fr) 340px;

    gap: 34px;

  }



  .orbit-two {

    width: 520px;

    height: 520px;

  }



  .ranking-card header,

  .ranking-card ol {

    padding-right: 20px;

    padding-left: 20px;

  }



  .ranking-card li {

    grid-template-columns: 38px 42px minmax(0, 1fr) auto;

    gap: 8px;

  }



  .rank-cover {

    width: 42px;

    height: 56px;

  }



  .radar-panel {

    grid-template-columns: 180px minmax(0, 1fr);

  }



  .radar-visual {

    width: 175px;

    height: 175px;

  }



  .download-layout {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 920px) {

  :root {

    --header-height: 70px;

  }



  .header-inner {

    width: min(calc(100% - 32px), var(--container));

  }



  .menu-toggle {

    display: inline-flex;

    margin-left: 0;

  }



  .site-nav {

    position: fixed;

    z-index: 999;

    top: var(--header-height);

    right: 0;

    bottom: 0;

    width: min(330px, 88vw);

    padding: 18px;

    background: #050d18;

    border-left: 1px solid var(--navy-line);

    transform: translateX(100%);

    visibility: hidden;

  }



  .site-nav.is-open {

    transform: translateX(0);

    visibility: visible;

  }



  .site-nav ul {

    display: block;

  }



  .site-nav li + li {

    border-top: 1px solid var(--navy-line);

  }



  .site-nav a {

    padding: 18px 12px;

  }



  .site-nav a::after {

    top: 15px;

    right: auto;

    bottom: 15px;

    left: 0;

    width: 3px;

    height: auto;

  }



  .header-download {

    display: inline-flex;

    min-width: auto;

    height: 40px;

    margin-left: auto;

    margin-right: 10px;

    padding: 0 12px;

    font-size: 12px;

  }



  .hero-grid {

    grid-template-columns: 1fr;

    padding-block: 72px 90px;

  }



  .hero-device {

    min-height: 610px;

  }



  .hero-copy {

    text-align: center;

  }



  .hero-intro,

  .hero-search {

    margin-inline: auto;

  }



  .hot-terms,

  .hero-downloads {

    justify-content: center;

  }



  .split-heading,

  .ranking-heading,

  .showcase-heading,

  .calendar-title {

    align-items: flex-start;

  }



  .ghost-word {

    font-size: 54px;

  }



  .search-console {

    grid-template-columns: 1fr;

  }



  .ranking-grid {

    grid-template-columns: 1fr;

  }



  .ranking-card li {

    grid-template-columns: 50px 48px minmax(0, 1fr) auto;

  }



  .week-strip {

    display: flex;

    overflow-x: auto;

    scrollbar-width: none;

    scroll-snap-type: x mandatory;

  }



  .week-strip button {

    flex: 0 0 190px;

    scroll-snap-align: start;

  }



  .tools-grid,

  .reviews-layout,

  .faq-layout {

    grid-template-columns: 1fr;

  }



  .review-summary {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 14px 30px;

  }



  .review-summary > div {

    grid-column: 2;

    grid-row: 1 / 4;

    margin: 0;

    border: 0;

  }



  .screenshot-track {

    overflow-x: auto;

    grid-template-columns: none;

    grid-auto-columns: 235px;

    grid-auto-flow: column;

    padding-bottom: 16px;

    scrollbar-width: none;

    scroll-snap-type: x mandatory;

  }



  .screenshot-track figure {

    scroll-snap-align: start;

  }



  .faq-title {

    min-height: 270px;

  }



  .faq-title .eyebrow {

    margin-top: 95px;

  }

}



@media (max-width: 680px) {

  .container {

    width: min(calc(100% - 30px), var(--container));

  }



  .brand img {

    width: 40px;

    height: 40px;

  }



  .brand-copy strong {

    font-size: 19px;

  }



  .hero {

    min-height: auto;

  }



  .hero-grid {

    min-height: auto;

    padding-top: 58px;

  }



  .hero-copy h1 {

    font-size: 58px;

    letter-spacing: -3px;

  }



  .hero-slogan {

    font-size: 24px;

  }



  .hero-intro {

    font-size: 15px;

  }



  .hero-search {

    height: 66px;

  }



  .search-form .icon {

    margin-left: 16px;

  }



  .search-form input {

    padding-inline: 10px;

    font-size: 14px;

  }



  .search-form button {

    min-width: 94px;

    margin: 7px;

    font-size: 13px;

  }



  .hot-terms {

    overflow-x: auto;

    justify-content: flex-start;

    padding-bottom: 5px;

  }



  .hot-terms > * {

    flex: 0 0 auto;

  }



  .hero-downloads {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

  }



  .hero-downloads a {

    min-width: 0;

    height: 56px;

    padding: 0 10px;

    font-size: 13px;

  }



  .hero-downloads .icon {

    width: 21px;

    height: 21px;

  }



  .hero-device {

    min-height: 545px;

  }



  .phone-shell {

    width: 290px;

    height: 545px;

    border-radius: 45px;

  }



  .phone-screen {

    padding: 0;

    border-radius: 36px;

  }



  .phone-status {

    height: 26px;

  }



  .phone-appbar {

    height: 50px;

    padding-inline: 11px;

  }



  .phone-appbar > strong {

    font-size: 17px;

  }



  .phone-tabs {

    height: 40px;

  }



  .phone-tabs > * {

    font-size: 10px;

  }



  .phone-banner {

    height: 135px;

  }



  .banner-person {

    top: -6px;

    left: 72px;

    width: 145px;

    height: 142px;

  }



  .shape-one {

    top: 6px;

    left: 79px;

    width: 125px;

    height: 125px;

  }



  .person-face {

    top: 28px;

    left: 42px;

    width: 67px;

    height: 78px;

  }



  .person-face::before,

  .person-face::after {

    top: 30px;

    width: 11px;

    height: 15px;

  }



  .phone-section-title {

    padding: 9px 8px 5px;

  }



  .mini-cover {

    height: 70px;

    font-size: 25px;

  }



  .phone-bottom-nav {

    height: 50px;

  }



  .phone-bottom-nav i {

    height: 20px;

    font-size: 13px;

  }



  .orbit-one {

    width: 390px;

    height: 390px;

  }



  .orbit-two {

    width: 490px;

    height: 490px;

  }



  .search-lab,

  .rankings,

  .discovery-tools,

  .showcase,

  .reviews,

  .faq,

  .download {

    padding-block: 76px;

  }



  .section-heading h2,

  .calendar-title h2,

  .category-map h2,

  .follow-radar h2,

  .download-intro h2 {

    font-size: 38px;

  }



  .split-heading,

  .ranking-heading,

  .showcase-heading,

  .calendar-title,

  .review-toolbar {

    display: block;

  }



  .ghost-word {

    display: none;

  }



  .search-console {

    padding: 16px;

  }



  .filter-group strong {

    width: 100%;

  }



  .ranking-period,

  .review-toolbar > div {

    margin-top: 20px;

  }



  .ranking-period button,

  .review-toolbar button {

    flex: 1;

  }



  .ranking-card header,

  .ranking-card ol {

    padding-right: 16px;

    padding-left: 16px;

  }



  .ranking-card li {

    grid-template-columns: 38px 42px minmax(0, 1fr) auto;

  }



  .calendar {

    padding-block: 74px;

  }



  .calendar-title > strong {

    display: inline-block;

    margin-top: 20px;

  }



  .category-panel,

  .radar-panel {

    min-height: 0;

    padding: 20px;

  }



  .category-options {

    grid-template-columns: repeat(2, 1fr);

  }



  .select-row {

    grid-template-columns: 1fr;

  }



  .radar-panel {

    grid-template-columns: 1fr;

  }



  .radar-visual {

    margin-inline: auto;

  }



  .review-summary {

    display: block;

  }



  .review-summary > div {

    padding-top: 22px;

    margin-top: 24px;

    border-top: 1px solid var(--navy-line);

  }



  .review-list,

  .form-grid,

  .download-options {

    grid-template-columns: 1fr;

  }



  .review-toolbar > div {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

  }



  .review-toolbar button {

    padding-inline: 7px;

    white-space: nowrap;

  }



  .form-message {

    grid-column: auto;

  }



  .form-feedback {

    display: block;

    margin: 12px 0 0;

  }



  .faq-title {

    min-height: 240px;

    padding: 28px;

  }



  .faq-title > span {

    font-size: 100px;

  }



  .faq-title .eyebrow {

    margin-top: 82px;

  }



  .faq-list article > div {

    padding: 18px 22px 22px 72px;

  }



  .download-layout {

    gap: 34px;

  }



  .download-options article {

    grid-template-columns: 48px minmax(0, 1fr);

    padding: 24px;

  }



  .download-options h3 {

    font-size: 19px;

  }



  .site-footer .container {

    grid-template-columns: 1fr;

    text-align: center;

  }



  .site-footer nav {

    grid-column: 1;

    margin: 0 auto;

  }



  .footer-brand,

  .site-footer ul {

    justify-content: center;

  }



  .site-footer ul {

    flex-wrap: wrap;

  }



  .back-to-top {

    right: 16px;

    bottom: 16px;

  }

}



@media (max-width: 390px) {

  .hero-downloads a {

    font-size: 12px;

  }



  .hero-downloads .icon {

    width: 18px;

    height: 18px;

  }



  .download-options article {

    padding: 20px;

  }



  .download-options h3 {

    font-size: 18px;

  }

}