/* Home page (/, /es, /ru): hero, data tables, reviews, partners. */

.home-narrow {
  max-width: 760px;
}
.home-center {
  text-align: center;
}

.home-eyebrow {
  display: inline-block;
  margin: 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: #b2e6e6;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-intro {
  max-width: 62ch;
  color: #4d4d55;
  font-size: 1.125rem;
}
.home-center .home-intro {
  margin-left: auto;
  margin-right: auto;
}
.button--light {
  background: #ffffff;
  box-shadow: none;
  color: var(--ink);
}
.button--light:hover {
  background: #e9fbfc;
}
.button--outline {
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.button--outline:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Hero */
.home-hero {
  background: radial-gradient(110% 90% at 100% 0%, #d4f0f2 0%, rgba(212, 240, 242, 0) 62%), var(--soft);
  padding: var(--hero-pad) 0 var(--hero-safe-bottom);
}
.home-hero__grid {
  display: grid;
  gap: 32px;
  align-items: start;
}
.home-hero h1 {
  font-size: var(--hero-h1);
  line-height: 1.1;
  margin: var(--hero-gap) 0 calc(var(--hero-gap) * 0.75);
}
.home-hl {
  color: #e0242d;
}
.home-lead {
  font-size: var(--hero-lead);
  line-height: var(--hero-lead-lh);
  margin: 0 0 var(--hero-gap);
}
.home-hero .button--trial {
  min-height: var(--hero-cta-h);
}
.home-hero .home-small {
  margin: 8px 0 4px;
}
.home-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  margin: 0;
}
.home-hero__visual {
  margin: 0;
}
.home-hero__visual img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Sections */
.home-section {
  padding: 48px 0;
}
.home-section--tight {
  padding-top: 24px;
}
.home-section--grey {
  background: #f0f0f0;
}
.home-section--dark {
  background: linear-gradient(160deg, #1a0b2b 0%, #14234a 100%);
  color: #ffffff;
}
.home-section--dark h2,
.home-section--dark h3 {
  color: #ffffff;
}
.home-section--dark .home-intro,
.home-section--dark p {
  color: #d6def0;
}
.home-section--dark .home-eyebrow {
  color: var(--ink);
}

/* 3 steps */
.home-steps {
  display: grid;
  gap: 24px;
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}
.home-step {
  padding: 16px 16px 32px;
  border-radius: 16px;
  background: #ffffff;
}
.home-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font: 700 1.75rem/1 var(--font-head);
}
.home-step p {
  color: #4d4d55;
}

/* Call-to-action bands */
.home-band {
  background: linear-gradient(90deg, #1a0b2b 0%, #13284f 100%);
  color: #ffffff;
  padding: 32px 0;
}
.home-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.home-band h2 {
  color: #ffffff;
  font-size: var(--h2);
  margin: 0 0 12px;
}
.home-band__note {
  margin: 0;
  color: #bfe3ea;
  font-size: 0.9375rem;
}
.home-band__action {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

/* Feature and niche cards */
.home-cards,
.home-niches,
.home-posts,
.home-partners,
.home-reviews {
  display: grid;
  gap: 24px;
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}
.home-card {
  padding: 24px 16px;
  border: 1px solid #e3e3e3;
  border-radius: var(--radius);
}
.home-card img {
  display: block;
  border-radius: 18px;
}
.home-card p,
.home-niche p {
  color: #4d4d55;
}
.home-niche {
  padding: 20px;
  border-radius: 20px;
  background: #ffffff;
}
.home-niche img {
  display: block;
}

/* Real creator data */
.home-rev__meta {
  font-size: 1.125rem;
}
.home-rev {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}
.home-rev__table {
  overflow-x: auto;
  border-radius: 16px;
  border-top: 2px solid rgba(4, 186, 203, 0.6);
  background: #1e0e33;
}
.rpm-table,
.niche-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.rpm-table th,
.rpm-table td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  color: #ffffff;
  white-space: nowrap;
}
.rpm-table thead th {
  color: #aab4cc;
  font-size: 0.8125rem;
  font-weight: 600;
}
.rpm-table td:nth-child(2) {
  font-weight: 700;
}
.rpm-bar {
  width: 40%;
}
.rpm-bar span {
  display: block;
  width: var(--share);
  min-width: 12px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4cc9d3, #8ae4ea);
}
.rpm-x {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(4, 186, 203, 0.18);
  color: #7ee8ef;
  font-size: 0.8125rem;
  font-weight: 700;
}
.rpm-x--low {
  background: rgba(255, 170, 120, 0.16);
  color: #ffc29e;
}
.rpm-card {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.rpm-card h3 {
  margin-top: 0;
}
.rpm-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rpm-card li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.rpm-card__market {
  font-weight: 700;
}
.rpm-card__market small,
.rpm-card__views {
  color: #7ee8ef;
  font-weight: 400;
}
.rpm-card__views {
  text-align: right;
  font-size: 0.875rem;
}
.rpm-card li strong {
  grid-column: 2;
  text-align: right;
  color: #5ee28a;
  font-size: 1.125rem;
}
.rpm-card__total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin: 24px 0 0;
  padding: 16px 24px;
  border-radius: 999px;
  background: rgba(4, 186, 203, 0.14);
  font-size: 0.875rem;
}
.rpm-card__total strong {
  color: #ffffff;
  font: 700 2rem/1 var(--font-head);
}
.rpm-card--note {
  margin-top: 24px;
}
.home-stats {
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-stats li {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: #d6def0;
}
.home-stats strong {
  display: block;
  color: var(--accent);
  font: 700 2.25rem/1.2 var(--font-head);
}

/* Smart translation */
.home-split {
  display: grid;
  gap: 32px;
}
.template-home main mark {
  padding: 0 3px;
  border-radius: 3px;
  background: #eef0c0;
  color: inherit;
}
.template-home main mark.tag {
  background: #b2e6e6;
}
.home-example {
  padding: 16px 24px;
  border-radius: 24px;
  background: #f0f0f0;
  font-size: 1.0625rem;
}
.home-example__out {
  color: #55555c;
  margin-bottom: 1.4em;
}
.home-tones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.home-tones li {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.home-tones li:first-child {
  border-color: var(--accent);
  background: #eefbfb;
}
.home-tones li > span:first-child {
  grid-row: span 2;
  font-size: 1.75rem;
}
.home-tones li > span:last-child {
  color: #55555c;
  font-size: 0.9375rem;
}

/* Song & poetry mode */
.home-checks {
  list-style: none;
  padding: 0;
}
.home-checks li::before {
  content: '✓ ';
  color: var(--accent-ink);
  font-weight: 700;
}
.home-lyrics {
  display: grid;
  gap: 16px;
}
.home-lyrics__box {
  margin: 0;
  padding: 24px;
  border-radius: 16px;
  background: #ffffff;
}
.home-lyrics__box span,
.home-lyrics__box strong {
  display: block;
}
.home-lyrics__box strong {
  margin-bottom: 4px;
}
.home-lyrics__box--source {
  background: #eef0c0;
  font-style: italic;
}
.home-lyrics__box--source strong {
  font-style: normal;
}
.home-lyrics__box--plain {
  color: #55555c;
}
.home-lyrics__box--song {
  border: 2px solid var(--accent);
}

/* By niche */
.home-panel {
  align-self: start;
  padding: 16px 20px;
  border-radius: 16px;
  background: #ffffff;
}
.home-panel h3 {
  margin-top: 0;
}
.niche-table th,
.niche-table td {
  padding: 10px 4px;
  border-bottom: 1px solid #dddddd;
  text-align: left;
}
.niche-table thead th {
  color: #55555c;
  font-size: 0.8125rem;
}
.niche-table td:last-child {
  color: var(--accent-ink);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* Reviews */
.home-reviews__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.home-reviews__title img {
  width: 28px;
  height: auto;
}
.home-reviews__title img:first-of-type {
  margin-left: 16px;
}
.home-review figure {
  height: 100%;
  margin: 0;
  padding: 24px;
  border-radius: 16px;
  background: #f6f6f6;
}
.home-review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.home-review figcaption img {
  border-radius: 50%;
}
.home-review blockquote {
  margin: 16px 0 0;
}
.home-review blockquote p {
  margin: 0;
  font-size: 1.0625rem;
}
.home-trustpilot {
  gap: 10px;
  margin-top: 32px;
  padding: 10px 28px;
  border: 2px solid #00b67a;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.home-trustpilot::before {
  content: '★';
  color: #00b67a;
  font-size: 1.75rem;
  line-height: 1;
}

/* Partners and blog */
.home-partners {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
}
.home-partners img {
  display: block;
  width: 200px;
}
/* Final call to action: the dark band with white text, like the streaming page */
.home-final {
  padding: 96px 0;
  background: var(--cta-band-bg);
  color: #ffffff;
}
.home-final h2 {
  color: #ffffff;
}
.home-final .button--outline {
  border-color: #ffffff;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
}
.home-final .button--outline:hover {
  background: #ffffff;
  color: var(--ink);
}
.home-final p {
  font-size: 1.125rem;
}
.home-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 20px;
  margin-top: 24px;
}
.home-final .button {
  min-height: 64px;
  padding: 10px 32px;
}

@media (min-width: 720px) {
  .home-section {
    padding: 64px 0;
  }
  .home-cards,
  .home-niches,
  .home-reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-partners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .home-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 48px;
    align-items: center;
  }
  .home-hero__visual {
    margin-top: 0;
  }
  .home-hero__visual img {
    max-height: var(--hero-visual-max);
    width: auto;
    max-width: 100%;
    margin-left: auto;
  }
  .home-steps,
  .home-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-niches {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .home-reviews {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-posts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .home-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
  }
  .home-rev {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
  .home-stats {
    grid-column: 1;
  }
  .home-lyrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-lyrics__box--source {
    grid-column: 1 / -1;
  }
}

@media (max-width: 479px) {
  .rpm-table .rpm-bar,
  .rpm-table th:nth-child(3) {
    display: none;
  }
  .rpm-table th,
  .rpm-table td {
    padding: 10px 8px;
  }
}