/* Presentation refinements approved in the complete landing-page preview. */
html {
  --text-light: #797976;
}

html .hero { padding-top: 64px; }
html .hero h1 { margin-bottom: 24px; }
html .hero-sub { margin-bottom: 30px; }
html .hero-platform { margin-bottom: 36px; }
html .hero .btn-primary {
  box-shadow: 0 5px 18px rgba(255, 107, 53, .17);
}

/* Align the listening surface with the content below, and keep its controls together. */
html .hero-player-shell {
  max-width: 1032px;
  padding: 28px 32px;
  margin-bottom: 60px;
  border: 1px solid #ebe4dc;
  border-radius: 20px;
  background: linear-gradient(180deg, #fffdfa, #fff);
  box-shadow: 0 10px 30px rgba(61, 43, 25, .035);
}
html .hero-player-primary {
  grid-template-columns: 80px minmax(0, 1fr) 94px;
  gap: 24px;
}
html .hero-player-toggle {
  width: 80px;
  height: 80px;
  box-shadow: 0 8px 22px rgba(255, 107, 53, .18);
}
html .hero-player-toggle .material-symbols-rounded { font-size: 38px; }
html .hero-player-track { min-width: 0; }
html .hero-player-time {
  grid-column: auto;
  margin-top: 0;
  color: #676761;
  font-size: 14px;
}
html .hero-player-options {
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: 32px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #efe9e1;
}
html .hero-player-option-group legend { margin-bottom: 9px; }
html .hero-player-choice-grid { gap: 9px; }
html .hero-player-choice,
html .hero-player-speed {
  min-height: 50px;
  font-size: 14px;
}
html .hero-player-choice { gap: 7px; padding: 10px; }
html .hero-player-choice .material-symbols-rounded { font-size: 20px; }
html .hero-player-waveform:focus-within {
  outline: 2px solid var(--accent-hover);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Preserve the three chapters, alternating layout, orange spine and all six screenshots. */
html .features { padding-top: 80px; }
html .experience-intro { padding-bottom: 44px; }
html .experience-step {
  grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
  min-height: 0;
  padding: 76px 0;
}
html .experience-copy h3 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.42;
  letter-spacing: -.035em;
  margin-bottom: 18px;
}
html .experience-description {
  font-size: 16px;
  line-height: 1.9;
}
html .experience-keywords { margin-top: 21px; }
html .experience-keywords li {
  background: #fff7ee;
  border-color: rgba(221, 103, 48, .22);
  color: #a34a29;
}
html .experience-gallery {
  width: min(100%, 440px);
  justify-self: center;
  gap: 22px;
}
html .experience-shot {
  box-shadow: 0 0 0 1.25px #77777b, 0 16px 32px rgba(31, 28, 25, .13);
}

/* Retain the pricing content and two-card comparison; improve secondary-text contrast. */
html .plan-name { opacity: .72; }
html .plan-price-caption { opacity: .78; }
html .pricing-card.featured .plan-price-caption { opacity: 1; }
html .billing-option > span { opacity: .82; }
html .plan-note { color: rgba(255, 255, 255, .78); line-height: 1.8; }
html .pricing-card:not(.featured) .plan-note { color: #71716d; }
html .review-author { color: #73736f; }
html .languages .section-title { text-wrap: balance; }
/* The sticky header already keeps Download available without covering the content. */
html .floating-cta { display: none; }

@media (max-width: 900px) {
  html .hero-player-primary {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 20px;
  }
  html .hero-player-toggle { width: 72px; height: 72px; }
  html .hero-player-time { grid-column: 2; margin-top: -10px; }
  html .hero-player-options { grid-template-columns: 1fr; gap: 20px; }
  html .experience-step,
  html .experience-step--reverse {
    grid-template-columns: 1fr;
    padding: 62px 0 62px 50px;
    gap: 30px;
  }
  html .experience-gallery { width: 100%; max-width: 520px; justify-self: start; }
}

@media (max-width: 640px) {
  html[lang="ja"] .languages .section-title { white-space: pre-line; }
  html .hero { padding-top: 40px; }
  html .hero h1 { margin-bottom: 18px; }
  html .hero-sub { margin-bottom: 23px; }
  html .hero-platform { margin-bottom: 26px; }
  html .hero-player-shell {
    padding: 20px 16px;
    margin-bottom: 40px;
    border-radius: 16px;
  }
  html .hero-player-primary {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
  }
  html .hero-player-toggle { width: 54px; height: 54px; margin-top: 2px; }
  html .hero-player-toggle .material-symbols-rounded { font-size: 30px; }
  html .hero-player-time { margin-top: -8px; font-size: 12px; }
  html .hero-player-options { margin-top: 18px; padding-top: 16px; gap: 18px; }
  html .hero-player-option-group legend { font-size: 13px; margin-bottom: 9px; }
  html .hero-player-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  html .hero-player-choice {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 66px;
    padding: 8px 3px;
    font-size: 12px;
  }
  html .hero-player-choice .material-symbols-rounded { font-size: 19px; }
  html .hero-player-speed { min-height: 46px; font-size: 14px; }
  html .features { padding-top: 62px; }
  html .experience-intro { padding-bottom: 34px; }
  html .experience-step,
  html .experience-step--reverse { padding: 46px 0 46px 32px; gap: 26px; }
  html .experience-step::after { top: 58px; }
  html .experience-copy h3 { font-size: clamp(27px, 8vw, 32px); line-height: 1.45; }
  html .experience-description { font-size: 14px; line-height: 1.9; }
  html .experience-gallery { max-width: 300px; gap: 24px; }
  html .experience-keywords { margin-top: 18px; }
  html .experience-keywords li { font-size: 12px; }
}