/* Concept 02: a quiet lavender field gives the curve its own breathing room. */
html[data-concept="soft"] .site-header {
  background: #e7e1f3;
}

html[data-concept="soft"] .site-header.is-scrolled {
  background: transparent;
}

html[data-concept="soft"] .hero {
  padding: 26px 0 36px;
  background: #e7e1f3;
}

html[data-concept="soft"] .hero > .sky {
  opacity: 0;
}

html[data-concept="soft"] .hero > .wrap {
  width: min(1120px, 100% - 64px);
}

html[data-concept="soft"] .hero .hero-copy {
  max-width: 960px;
}

html[data-concept="soft"] .hero h1 {
  margin-top: 14px;
  font-size: clamp(38px, 4.4vw, 56px);
}

html[data-concept="soft"] .hero .hero-copy .hero-lead {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.8;
}

html[data-concept="soft"] .hero .day-card {
  width: min(960px, 100%);
  margin-top: 30px;
  padding: 24px 0 18px;
  background: #f3eff9;
  border: 0;
  border-radius: 32px;
  box-shadow: none;
}

html[data-concept="soft"] .hero .readout {
  padding: 0 34px;
  align-items: center;
}

html[data-concept="soft"] .hero .readout > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
}

html[data-concept="soft"] .hero .readout-time {
  font-size: 14px;
  letter-spacing: .02em;
}

html[data-concept="soft"] .hero .readout-state {
  margin: 0;
  font-size: 23px;
}

html[data-concept="soft"] .hero .readout-tip {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
}

html[data-concept="soft"] .hero .today-score {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 8px;
  min-width: 96px;
  text-align: left;
}

html[data-concept="soft"] .hero .today-score span {
  grid-column: 1 / -1;
  font-size: 10px;
}

html[data-concept="soft"] .hero .today-score b {
  font-size: 34px;
  line-height: 1.1;
}

html[data-concept="soft"] .hero .today-score em {
  font-size: 11px;
}

html[data-concept="soft"] .hero .chart {
  margin: 6px 24px 0;
}

html[data-concept="soft"] .hero .cat {
  width: clamp(78px, 11%, 108px);
}

html[data-concept="soft"] .hero .chart-caption {
  padding: 6px 34px 0;
  color: #7c728b;
  font-size: 11px;
}

html[data-concept="soft"] .hero .hero-foot {
  margin-top: 22px;
}

html[data-concept="soft"] .hero .hero-actions .btn {
  min-height: 46px;
}

html[data-concept="soft"] .hero .hero-foot .hero-note {
  margin-top: 10px;
}

@media (max-width: 600px) {
  html[data-concept="soft"] .hero {
    padding: 24px 0 32px;
  }

  html[data-concept="soft"] .hero > .wrap {
    width: calc(100% - 32px);
  }

  html[data-concept="soft"] .hero .hero-copy {
    padding-inline: 4px;
  }

  html[data-concept="soft"] .hero h1 {
    font-size: 36px;
  }

  html[data-concept="soft"] .hero .hero-copy .hero-lead {
    font-size: 13px;
    line-height: 1.9;
  }

  html[data-concept="soft"] .hero .day-card {
    margin-top: 26px;
    padding-block: 20px 16px;
    border-radius: 24px;
  }

  html[data-concept="soft"] .hero .readout {
    padding-inline: 18px;
    gap: 8px;
  }

  html[data-concept="soft"] .hero .readout > div:first-child {
    column-gap: 8px;
  }

  html[data-concept="soft"] .hero .readout-time {
    font-size: 12px;
  }

  html[data-concept="soft"] .hero .readout-state {
    font-size: 20px;
  }

  html[data-concept="soft"] .hero .readout-tip {
    font-size: 11px;
  }

  html[data-concept="soft"] .hero .today-score {
    min-width: 76px;
    column-gap: 5px;
  }

  html[data-concept="soft"] .hero .today-score b {
    font-size: 30px;
  }

  html[data-concept="soft"] .hero .chart {
    margin: 14px 8px 0;
  }

  html[data-concept="soft"] .hero .cat {
    width: 22%;
    min-width: 64px;
  }

  html[data-concept="soft"] .hero .chart-caption {
    padding: 6px 18px 0;
    font-size: 10px;
    gap: 7px;
  }

  html[data-concept="soft"] .hero .hero-foot {
    margin-top: 22px;
  }
}