/* Clear foreground copy; the curve lives in a continuous, softly colored scene. */
html[data-concept="layered"] .site-header {
  padding-top: 12px;
  background: #faf9fc;
}
html[data-concept="layered"] .site-header .wrap {
  height: 60px;
  padding-inline: 22px;
  background: #ffffffd9;
  border: 1px solid #eeeaf3;
  box-shadow: 0 4px 20px -15px #46325335;
}
html[data-concept="layered"] .site-header.is-scrolled {
  background: transparent;
}
html[data-concept="layered"] .site-header.is-scrolled .wrap {
  background: #fffffff2;
  transform: none;
}
html[data-concept="layered"] .site-header .wordmark,
html[data-concept="layered"] .site-header .site-nav { color: #302736; }
html[data-concept="layered"] .site-header .btn { min-height: 38px; }

html[data-concept="layered"] .hero {
  padding: 44px 0 36px;
  background: #faf9fc;
}
html[data-concept="layered"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 30% at 50% 68%, #d6c6efb3, transparent 100%),
    radial-gradient(ellipse 90% 46% at 50% 78%, #e5dcf4, transparent 100%);
}
html[data-concept="layered"] .hero > .sky {
  inset: 36% 0 4%;
  opacity: 0;
  transition: opacity 1.6s ease;
}
html[data-concept="layered"] .hero > .sky.is-on { opacity: .65; }
html[data-concept="layered"] .hero .sky[data-sky="high"] {
  background: radial-gradient(ellipse 45% 50% at 30% 55%, #e6efd8a6, transparent 100%);
}
html[data-concept="layered"] .hero .sky[data-sky="steady"] {
  background: radial-gradient(ellipse 45% 50% at 48% 55%, #cbb8e980, transparent 100%);
}
html[data-concept="layered"] .hero .sky[data-sky="low"] {
  background: radial-gradient(ellipse 45% 50% at 52% 55%, #f5dcc299, transparent 100%);
}
html[data-concept="layered"] .hero .sky[data-sky="rest"] {
  background: radial-gradient(ellipse 45% 50% at 78% 55%, #eed3e199, transparent 100%);
}
html[data-concept="layered"] .hero > .wrap {
  width: min(1120px, 100% - 64px);
}
html[data-concept="layered"] .hero .hero-copy {
  position: relative;
  max-width: 1020px;
  z-index: 2;
}
html[data-concept="layered"] .hero .eyebrow {
  font-size: 12px;
  color: #6a587c;
  letter-spacing: .18em;
}
html[data-concept="layered"] .hero h1 {
  margin-top: 18px;
  font-size: clamp(38px, 4.7vw, 60px);
  color: #29212e;
  font-weight: 600;
  line-height: 1.25;
}
html[data-concept="layered"] .hero .hero-copy .hero-lead {
  margin-top: 20px;
  font-size: 16px;
  color: #514956;
  line-height: 1.85;
}
html[data-concept="layered"] .hero .day-card {
  margin-top: 42px;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-concept="layered"] .hero .readout {
  justify-content: center;
  align-items: center;
  gap: 26px;
  padding: 0 20px;
}
html[data-concept="layered"] .hero .readout > div:first-child {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 10px;
}
html[data-concept="layered"] .hero .readout-time {
  font-size: 13px;
  opacity: 1;
}
html[data-concept="layered"] .hero .readout-state {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}
html[data-concept="layered"] .hero .readout-tip {
  grid-column: 1 / -1;
  font-size: 12px;
  text-align: center;
  margin-top: 2px;
  opacity: 1;
}
html[data-concept="layered"] .hero .today-score {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 6px;
  padding-left: 26px;
  border-left: 1px solid #c6bcd6;
  color: #51445e;
  text-align: left;
}
html[data-concept="layered"] .hero .today-score span {
  grid-column: 1 / -1;
  font-size: 10px;
}
html[data-concept="layered"] .hero .today-score b { font-size: 32px; }
html[data-concept="layered"] .hero .today-score em { font-size: 11px; margin: 0; }
html[data-concept="layered"] .hero .chart { margin: 12px 24px 0; }
html[data-concept="layered"] .hero .cat {
  width: clamp(76px, 10%, 112px);
}
html[data-concept="layered"] .hero #chart-svg path[stroke="#7962c7"] { stroke: #8063b5; }
html[data-concept="layered"] .hero #chart-svg path[stroke="#b9abe3"] {
  stroke: #9c85bf;
  opacity: .65;
}
html[data-concept="layered"] .hero .chart-caption {
  padding: 8px 42px 0;
  color: #695d77;
  font-size: 11px;
}
html[data-concept="layered"] .hero .legend i { border-color: #7a6a8a40; }
html[data-concept="layered"] .hero .hero-foot { margin-top: 24px; }
html[data-concept="layered"] .hero .hero-actions .btn {
  min-width: 156px;
  min-height: 48px;
  background: #302637;
}
html[data-concept="layered"] .hero .hero-foot .hero-note { color: #655c6e; }

@media (max-width: 600px) {
  html[data-concept="layered"] .site-header { padding-top: 10px; }
  html[data-concept="layered"] .site-header .wrap {
    width: calc(100% - 28px);
    height: 54px;
    padding-inline: 15px;
  }
  html[data-concept="layered"] .site-header .wordmark { font-size: 24px; }
  html[data-concept="layered"] .site-header .btn { min-height: 36px; padding-inline: 16px; }
  html[data-concept="layered"] .hero { padding: 34px 0 32px; }
  html[data-concept="layered"] .hero > .wrap { width: calc(100% - 40px); }
  html[data-concept="layered"] .hero::before {
    background:
      radial-gradient(ellipse 100% 28% at 50% 72%, #d6c6efa6, transparent 100%),
      radial-gradient(ellipse 140% 38% at 50% 78%, #e5dcf4, transparent 100%);
  }
  html[data-concept="layered"] .hero > .sky { inset: 44% -15% 4%; }
  html[data-concept="layered"] .hero .eyebrow { font-size: 11px; }
  html[data-concept="layered"] .hero h1 { font-size: 38px; line-height: 1.3; }
  html[data-concept="layered"] .hero .hero-copy .hero-lead {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.9;
  }
  html[data-concept="layered"] .hero .day-card { margin-top: 32px; }
  html[data-concept="layered"] .hero .readout { padding: 0; gap: 18px; }
  html[data-concept="layered"] .hero .readout > div:first-child { column-gap: 8px; }
  html[data-concept="layered"] .hero .readout-time { font-size: 12px; }
  html[data-concept="layered"] .hero .readout-state { font-size: 20px; }
  html[data-concept="layered"] .hero .readout-tip { font-size: 11px; }
  html[data-concept="layered"] .hero .today-score { padding-left: 18px; min-width: 88px; }
  html[data-concept="layered"] .hero .today-score b { font-size: 29px; }
  html[data-concept="layered"] .hero .chart { margin: 16px 6px 0; }
  html[data-concept="layered"] .hero .cat { width: 22%; min-width: 60px; }
  html[data-concept="layered"] .hero .chart-caption { padding: 8px 2px 0; font-size: 10px; }
  html[data-concept="layered"] .hero .hero-foot { margin-top: 24px; }
}