/* Center the complete start-screen composition inside the portal. */
.screen-start .start-wrap
{
  width: min(100%, 1080px);
  margin-inline: auto;
}

.screen-start .hero-label, .test-hero-title
{
  margin-inline: auto;
  text-align: center;
}

.screen-start .hero-content
{
  width: min(100%, 860px);
  margin: 34px auto 0;
}

.screen-start .hero-meta
{
  text-align: center;
}

.screen-start .hero-label, .screen-start .eyebrow
{
  margin: 0 0 16px;
  color: var(--color-cyan);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.screen-start .hero-content
{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
  align-items:stretch;
  gap:24px;
  max-width:1060px;
  margin:34px auto 0;
}

.screen-start .hero-description,.screen-start .hero-image
{
  height:340px;
}



.screen-start .hero-description, .screen-start .hero-image
{
  min-height: 300px;
  border: 1px solid var(--color-mint-soft);
  border-radius: 26px;
  background: linear-gradient(145deg, var(--color-blue-dark), var(--color-surface-dark));
}

.screen-start .hero-description
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 32px;
  color: var(--color-white-74);
  font-size: 17px;
  line-height: 1.55;
}

.screen-start .hero-description p
{
  margin: 0 0 14px;
}

.screen-start .hero-description p:last-child
{
  margin-bottom: 0;
}

.screen-start .hero-image
{
  overflow: hidden;
}

.screen-start .hero-image img
{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: none;
  object-fit: cover;
}

.screen-start .hero-meta
{
  margin: 24px 0 18px;
  color: var(--color-silver-muted);
  font-size: 15px;
  text-align: center;
}

/* Quiz screen */

.screen-start .progress-head
{
  margin-bottom: 24px;
}

.screen-start .top-row
{
  margin-bottom: 16px;
}

.screen-start .progress-line
{
  background: var(--color-white-50);
}

.screen-start .progress-line-fill
{
  background: linear-gradient(90deg, var(--color-cyan), var(--color-gold));
}

.screen-start .answers
{
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Start screen */
.screen-start .screen-start
{
  align-items: stretch;
}

.screen-start .start-wrap
{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.screen-start .app-logo, .screen-start .app-footer
{
  display: none !important;
}

.screen-start .screen
{
  width: 100%;
  min-height: 0;
}

.screen-start .center-wrap
{
  width: 100%;
  max-width: none;
}

body.test-result-mode .screen-start,
.screen-start .hero-text
{
  width: 100%;
}

@media (max-height: 850px)
{
  .screen-start .hero-content
  {
    margin-top: 22px;
  }

  .screen-start .hero-description, .screen-start .hero-image, .screen-start .hero-image img
  {
    min-height: 230px;
  }

  .screen-start .hero-description
  {
    padding: 24px;
    font-size: 15px;
    line-height: 1.42;
  }

  .screen-start .hero-description p
  {
    margin-bottom: 8px;
  }

  .screen-start .hero-meta
  {
    margin: 14px 0 12px;
  }
}

@media (max-width: 760px)
{
.screen-start .hero-content
  {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
    width:100%;
    max-width:none;
  }

  .screen-start .hero-description, .screen-start .hero-image, .screen-start .hero-image img
  {
    min-height: 220px;
  }

  .screen-start .hero-description
  {
    width:100%;
    max-width:none;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .screen-start .hero-description
  {
    padding: 22px;
    font-size: 15px;
  }

  .screen-start .answers
  {
    grid-template-columns: 1fr;
  }
}