.brand {
  display: flex;
  direction: ltr;
  align-items: center;
  gap: 0.625rem;
}

.brand__mark {
  inline-size: 3.2727rem;
  block-size: 1.125rem;
}

.brand__name {
  color: #fff;
  font-size: 1.125rem;
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
}

.beta-badge,
.header-cta,
.hero-button,
.quality-availability {
  border-radius: var(--radius-pill);
}

.beta-badge {
  display: inline-flex;
  direction: ltr;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  inline-size: 4.25rem;
  block-size: 1.9375rem;
  border: 1px solid rgb(255 255 255 / 8%);
  background: rgb(255 255 255 / 5%);
  color: #d7d2de;
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.075rem;
}

.beta-badge > span {
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background: var(--color-accent-lime);
  box-shadow: 0 0 0.75rem rgb(208 255 0 / 45%);
}

.header-cta,
.hero-button {
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.header-cta {
  display: inline-grid;
  inline-size: 7.5rem;
  block-size: 2.5rem;
  place-items: center;
  background: #fff;
  color: #151017;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-demibold);
}

.hero-button {
  display: flex;
  direction: ltr;
  align-items: center;
  gap: 0.75rem;
  block-size: 3.5rem;
  padding: 0.6875rem 1.25rem;
  overflow: hidden;
  box-shadow: 0 0.625rem 1.75rem -0.75rem rgb(0 0 0 / 42%);
}

.hero-button img {
  flex: 0 0 auto;
  inline-size: 1.875rem;
  block-size: 1.875rem;
}

.hero-button > span {
  display: flex;
  direction: rtl;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.0625rem;
  white-space: nowrap;
}

.hero-button strong {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-demibold);
  line-height: 1.25;
}

.hero-button small {
  font-size: 0.5625rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.0506rem;
  line-height: 1.2;
}

.hero-button--download {
  inline-size: 11.3125rem;
  background: #fff;
  color: #141017;
}

.hero-button--download small { color: #716b75; }

.hero-button--web {
  inline-size: 10.75rem;
  border: 1px solid rgb(255 255 255 / 11%);
  background: rgb(255 255 255 / 5%);
  color: #fff;
}

.hero-button--web small { color: #a9a4b2; }

.section-copy {
  position: absolute;
  z-index: var(--z-content);
}

.section-eyebrow,
.section-meta {
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.0875rem;
}

.section-copy h2 {
  color: #fff;
  font-size: 3.625rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.065rem;
  line-height: 1.16;
}

.section-copy > p:not(.section-eyebrow, .section-meta) {
  color: #aaa6b0;
  font-size: 1.1875rem;
  line-height: 2rem;
}

.copy-mobile { display: none; }

.product-device {
  --screen-left: 29.1%;
  --screen-top: 5.5%;
  --screen-width: 41.4%;
  --screen-height: 88%;
  --screen-radius-x: 12.75%;
  --screen-radius-y: 6%;

  position: absolute;
  z-index: 5;
  direction: ltr;
  pointer-events: none;
  filter: drop-shadow(0 0 2.875rem rgb(109 40 255 / 14%)) drop-shadow(0 2.125rem 3rem rgb(0 0 0 / 62%));
}

.product-device > img,
.product-device__screen,
.product-device__screen-image {
  position: absolute;
  max-inline-size: none;
}

.product-device__body {
  z-index: 3;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.product-device__screen {
  z-index: 4;
  inset: 0;
  overflow: hidden;
  mask: url("../assets/mockups/iphone-screen-mask.png") center / 100% 100% no-repeat;
}

.product-device__screen-image {
  inset-block-start: var(--screen-top);
  inset-inline-start: var(--screen-left);
  inline-size: var(--screen-width);
  block-size: var(--screen-height);
  border-radius: var(--screen-radius-x) / var(--screen-radius-y);
  object-fit: cover;
}

.lyrics-device--en {
  --screen-left: 29.2308%;
  --screen-top: 5.5128%;
  --screen-width: 41.4103%;
  --screen-height: 88.8462%;
  --screen-radius-x: 13.0031%;
  --screen-radius-y: 6.0606%;
}

.lyrics-device--fa {
  --screen-left: 29.1935%;
  --screen-top: 5.6452%;
  --screen-width: 41.4516%;
  --screen-height: 88.2258%;
  --screen-radius-x: 13.5093%;
  --screen-radius-y: 6.3472%;
}

.search-device {
  --screen-radius-x: 12.7482%;
  --screen-radius-y: 5.9975%;
}

.history-device--recent {
  --screen-radius-x: 11.8816%;
  --screen-radius-y: 5.5898%;
}

.history-device--stats {
  --screen-radius-x: 12.1344%;
  --screen-radius-y: 5.7087%;
}

.archive-device {
  --screen-left: 28.7356%;
  --screen-top: 5.0575%;
  --screen-width: 42.5287%;
  --screen-height: 89.8851%;
}

.search-showcase {
  position: absolute;
  z-index: 7;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: 2rem;
  background: rgb(11 10 15 / 78%);
  box-shadow: 0 1.5rem 4rem -1rem rgb(0 0 0 / 46%);
  direction: ltr;
}

.search-field {
  display: flex;
  align-items: center;
  block-size: 4.75rem;
  border-radius: 1.125rem;
  background: #fff;
  color: #16151a;
}

.search-field > span {
  position: relative;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-inline: 1.625rem 2rem;
  border: 0.1875rem solid #111116;
  border-radius: 50%;
}

.search-field > span::after {
  content: "";
  position: absolute;
  inset: 1rem auto auto 1rem;
  inline-size: 0.8125rem;
  block-size: 0.1875rem;
  rotate: 45deg;
  border-radius: 0.125rem;
  background: #111116;
}

.search-field strong {
  font-size: 1.5625rem;
  font-weight: var(--font-weight-medium);
}

.search-field i {
  position: absolute;
  inset-inline-end: 1.75rem;
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.search-field i::before,
.search-field i::after {
  content: "";
  position: absolute;
  inset: 0.7rem auto auto 0;
  inline-size: 1.5rem;
  block-size: 0.1875rem;
  rotate: 45deg;
  border-radius: 0.125rem;
  background: #111116;
}

.search-field i::after { rotate: -45deg; }

.search-filters {
  display: flex;
  gap: 0.75rem;
}

.search-filters > * {
  display: grid;
  min-inline-size: 4.625rem;
  block-size: 2.5rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 0.875rem;
  background: rgb(255 255 255 / 7%);
  color: #d5d1da;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
}

.search-filters b {
  min-inline-size: 3.625rem;
  border-color: rgb(143 100 255 / 40%);
  background: #6d28ff;
  color: #fff;
}

.search-showcase > small {
  display: block;
  color: #77717f;
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.0625rem;
}

.top-result {
  display: flex;
  align-items: center;
  border-radius: 1.375rem;
  background: linear-gradient(90deg, #9a514a, #5e3434);
}

.top-result > img {
  flex: 0 0 auto;
  border-radius: 50%;
}

.top-result > span,
.track-result > span {
  display: flex;
  flex-direction: column;
}

.top-result strong { color: #fff; font-size: 1.75rem; }
.top-result small { color: #e6dadf; font-size: 0.9375rem; }

.track-result {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 0.875rem;
  background: rgb(255 255 255 / 3%);
}

.track-result > img {
  flex: 0 0 auto;
  border-radius: 0.625rem;
}

.track-result strong { color: #f7f6f9; font-size: 0.9375rem; }
.track-result small { color: #8b8692; font-size: 0.6875rem; }
.track-result > b { position: absolute; inset-inline-end: 1.25rem; color: #8c8792; }

.history-metrics {
  position: absolute;
  z-index: 7;
  direction: ltr;
}

.history-metrics article {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 1.5rem;
  background: rgb(255 255 255 / 5%);
  box-shadow: 0 1.125rem 2.625rem -0.75rem rgb(0 0 0 / 35%);
  backdrop-filter: blur(0.375rem);
}

.history-metrics strong,
.history-metrics small {
  position: absolute;
  inset-inline-start: 1.3125rem;
}

.history-metrics strong {
  inset-block-start: 1.0625rem;
  color: #fff;
  font-size: 1.75rem;
}

.history-metrics small {
  inset-block-end: 1.25rem;
  color: #918a98;
  font-size: 0.625rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05rem;
}

.history-metrics article:nth-child(3) strong { color: #d0ff00; }
.history-metrics article:nth-child(4) strong { color: #a58bff; }