/* Visual sample: navigation, hero and App section only.
   All content, source images, data and interactions are inherited unchanged. */

.site-header {
  background: #eee8f8eb;
  border-bottom-color: #7962c710;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.site-header .wrap {
  height: 76px;
}

.site-header .wordmark {
  font-size: 30px;
  letter-spacing: -.045em;
}

.site-header .site-nav {
  gap: 26px;
  font-size: 14px;
}

.site-header .btn,
.hero .btn {
  background: var(--purple);
  box-shadow: none;
}

.site-header .btn {
  min-height: 44px;
  padding-inline: 22px;
}

.site-header .btn:hover,
.hero .btn:hover {
  background: #6953b4;
}

.hero {
  min-height: 0;
  padding: 32px 0 40px;
  background: #eee8f8;
}

.hero .hero-copy {
  max-width: 1000px;
  margin-inline: auto;
}

.hero .eyebrow {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  gap: 10px;
  color: #67518f;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .13em;
  line-height: 20px;
}

.hero .eyebrow i {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 5px #7962c710;
}

.hero h1 {
  margin-top: 16px;
  font-size: clamp(36px, 4.7vw, 56px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.2;
}

.hero .hero-copy .hero-lead {
  max-width: 47em;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.8;
  color: #62596f;
}

.hero .phrase {
  max-width: 100%;
}

.hero .day-card {
  width: min(920px, 100%);
  margin: 28px auto 0;
  border: 1px solid #ffffffb3;
  border-radius: 28px;
  box-shadow: 0 16px 48px -32px #39275245;
}

.hero .sky[data-sky="high"] {
  background: linear-gradient(180deg, #eff3e9 0%, #f8faf6 42%, #fff 80%);
}

.hero .sky[data-sky="steady"] {
  background: linear-gradient(180deg, #ece5f6 0%, #f8f5fc 42%, #fff 80%);
}

.hero .sky[data-sky="low"] {
  background: linear-gradient(180deg, #f7ecdf 0%, #fcf8f2 42%, #fff 80%);
}

.hero .sky[data-sky="rest"] {
  background: linear-gradient(180deg, #f6e5ed 0%, #fcf5f8 42%, #fff 80%);
}

.hero .readout {
  align-items: center;
  padding: 20px 32px 0;
}

.hero .readout-time {
  font-size: 14px;
  line-height: 1.4;
}

.hero .readout-state {
  margin-top: 3px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 600;
}

.hero .readout-tip {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
}

.hero .today-score {
  min-width: 112px;
  padding: 12px 16px;
  border-radius: 18px;
  background: #ffffff8c;
  border: 0;
  box-shadow: none;
}

.hero .today-score span {
  opacity: .85;
}

.hero .today-score b {
  font-size: 36px;
}

.hero .chart {
  margin: 12px 24px 0;
}

.hero .cat {
  width: clamp(76px, 12%, 116px);
}

.hero .chart-caption {
  align-items: center;
  padding: 4px 32px 18px;
  color: #716a7c;
  font-size: 12px;
}

.hero .legend {
  gap: 16px;
}

.hero .legend i {
  border: 1px solid #24212b12;
}

.hero .hero-foot {
  margin-top: 24px;
}

.hero .hero-actions .btn {
  min-width: 166px;
  min-height: 52px;
  font-size: 16px;
  font-weight: 500;
}

.hero .hero-foot .hero-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.7;
  color: #716a7c;
}

/* Large device on a quiet color field, with the four original state cats. */
.app-view {
  background: #faf9f6;
  padding-block: 112px;
}

.app-view .wrap {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 88px;
}

.app-view .phone-col {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 700px;
  padding: 48px 36px;
  border-radius: 40px;
  background: #e7dff5;
  isolation: isolate;
  overflow: hidden;
}

.app-view .phone-col::before {
  content: "";
  position: absolute;
  width: 540px;
  height: 540px;
  border: 1px solid #ffffff75;
  border-radius: 50%;
  top: -160px;
  left: -190px;
  z-index: -1;
}

.app-view .phone-col::after {
  content: "";
  position: absolute;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: #f2edf9;
  top: 230px;
  left: 60px;
  z-index: -1;
}

.app-view .phone {
  width: min(368px, 100%);
  border-radius: 52px;
  padding: 3px;
  background: linear-gradient(145deg, #aaa4b4, #e7e3ec 40%, #928b9c);
  box-shadow: 0 30px 48px -30px #39275270, 0 3px 6px #39275218;
}

.app-view .screen {
  min-height: 610px;
  padding: 16px 18px 28px;
  border: 5px solid #26232c;
  border-radius: 49px;
  background: linear-gradient(180deg, #e9e0f8, #f7f3fc 36%, #fff 76%);
}

.app-view .island {
  width: 90px;
  height: 25px;
  margin-bottom: 18px;
  background: #17151b;
}

.app-view .screen-state img {
  width: 144px;
}

.app-view .screen-state h3 {
  margin-top: 6px;
  font-size: 28px;
}

.app-view .screen-state p {
  margin-top: 4px;
}

.app-view .screen-card {
  margin-top: 28px;
  padding: 20px;
  border-color: #eee9f4;
  box-shadow: 0 8px 24px -16px #39275224;
}

.app-view .screen-card small {
  color: #716a7c;
}

.app-view .screen-score {
  margin-top: 6px;
}

.app-view .screen-score b {
  font-size: 42px;
}

.app-view .slots {
  gap: 12px;
  margin-top: 18px;
}

.app-view .slot-row > .chip {
  width: auto;
}

.app-view .slot-row > .chip::before {
  content: none;
}

.app-view .screen-tip {
  margin-top: 18px;
}

.app-view .section-head h2 {
  max-width: 6em;
  margin-top: 0;
  font-size: 48px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.app-view .section-lead {
  max-width: 22em;
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.9;
}

.app-view .state-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 380px;
  margin-top: 44px;
}

.app-view .state-pill {
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #625d6b;
  font-size: 14px;
}

.app-view .state-pill img {
  width: 72px;
  height: 76px;
}

@media (max-width: 1040px) {
  .site-header .site-nav { gap: 18px; }
  .app-view .wrap { gap: 48px; }
  .app-view .phone-col { padding-inline: 24px; }
  .app-view .section-head h2 { font-size: 42px; }
}

@media (max-width: 900px) {
  .app-view { padding-block: 80px; }
  .app-view .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .app-view .wrap > div:not(.phone-col) { text-align: center; }
  .app-view .section-head,
  .app-view .section-head h2,
  .app-view .section-lead,
  .app-view .state-row { margin-inline: auto; }
  .app-view .section-head h2 { max-width: none; }
  .app-view .state-row { margin-top: 28px; }
  .app-view .phone-col { min-height: 0; padding-block: 48px; }
  .hero .hero-copy .hero-lead { font-size: 17px; }
}

@media (max-width: 600px) {
  .site-header .wrap,
  .hero > .wrap,
  .app-view > .wrap { width: calc(100% - 40px); }
  .site-header .wrap { height: 68px; }
  .site-header .wordmark { font-size: 27px; }
  .site-header .btn { padding-inline: 18px; font-size: 14px; }
  .hero { padding: 36px 0 44px; }
  .hero .eyebrow { font-size: 12px; }
  .hero h1 {
    max-width: 9em;
    margin-inline: auto;
    margin-top: 16px;
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: -.035em;
  }
  .hero .hero-copy .hero-lead {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.85;
  }
  .hero .day-card { margin-top: 28px; border-radius: 24px; }
  .hero .readout { padding: 20px 18px 0; gap: 8px; }
  .hero .readout-time { font-size: 12px; }
  .hero .readout-state { font-size: 24px; }
  .hero .readout-tip { font-size: 12px; }
  .hero .today-score { min-width: 86px; padding: 10px; border-radius: 14px; }
  .hero .today-score b { font-size: 30px; }
  .hero .today-score span { font-size: 10px; }
  .hero .today-score em { font-size: 11px; }
  .hero .chart { margin: 14px 8px 0; }
  .hero .cat { width: 21%; min-width: 64px; }
  .hero .chart-caption { align-items: flex-start; padding: 8px 18px 18px; gap: 8px; font-size: 11px; }
  /* Separate the low-period label from the nearby morning peak on narrow charts. */
  .hero #chart-svg > rect[fill="#fbefe2"] + text { transform: translateY(16px); }
  .hero .hero-foot { margin-top: 24px; }
  .hero .hero-foot .hero-note { gap: 6px; font-size: 11px; }
  .app-view { padding-block: 64px; }
  .app-view .section-head h2 { font-size: 34px; }
  .app-view .section-lead { margin-top: 18px; font-size: 16px; }
  .app-view .phone-col { border-radius: 28px; padding: 32px 20px; }
  .app-view .phone { width: min(328px, 100%); border-radius: 44px; }
  .app-view .screen { min-height: 570px; border-radius: 41px; padding-inline: 14px; }
  .app-view .screen-card { padding: 16px 14px; }
  .app-view .slot-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px 8px;
  }
  .app-view .slot-row > span:not(.chip) { grid-row: 1; grid-column: 1; width: auto; }
  .app-view .slot-row > .chip { grid-column: 2; justify-self: start; }
  .app-view .screen-state img { width: 128px; }
  .app-view .state-row { gap: 4px; }
  .app-view .state-pill img { width: 64px; height: 68px; }
  .app-view .state-pill { font-size: 13px; }
}