/* Mobile preview uses readable cards instead of cropping the desktop artwork. */
  .hero-visual {
    width: 100%;
    max-width: 600px;
    margin: 1rem auto 0;
    padding: 0;
  }
  .mobile-dashboard {
    overflow: hidden;
    border: 1px solid #cddbd5;
    border-radius: 16px;
    background: #fffefa;
    box-shadow: 0 12px 32px #17372f12;
  }
  .preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background: #17372f;
    color: #f4f7f0;
    font-size: .85rem;
    font-weight: 600;
  }
  .preview-header > span:first-child { display: flex; align-items: center; gap: .6rem; }
  .preview-header svg { width: 25px; height: 20px; fill: none; stroke: #9ac3bc; stroke-width: 1.5; }
  .preview-example { border: 1px solid #ffffff35; border-radius: 20px; padding: .15rem .6rem; font-size: .7rem; color: #e0ede4; white-space: nowrap; }
  .preview-body { padding: 1.4rem 1.25rem 1.2rem; }
  .preview-body h2 { margin: 0; font-family: var(--serif); font-size: 1.3rem; letter-spacing: -.055em; }
  .preview-intro { margin: .35rem 0 1.25rem; color: #66776e; font-size: .8rem; }
  .preview-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1.3rem; }
  .preview-stats > div { padding: .85rem 1rem; border: 1px solid #e0e7df; border-radius: 9px; background: #f6f8f2; }
  .preview-stats dt { font-size: .76rem; color: #566c60; }
  .preview-stats dd { margin: .3rem 0 0; font-size: 1.55rem; font-weight: 600; line-height: 1.3; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .preview-stats dd span { margin-left: .3rem; font-size: .7rem; font-weight: 400; color: #52675d; letter-spacing: 0; }
  .preview-panel-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .preview-panel-title h3 { margin: 0; font-size: .88rem; font-weight: 600; }
  .preview-panel-title > span { color: #748479; font-size: .72rem; }
  .preview-chart svg { display: block; width: 100%; height: auto; margin-top: .8rem; }
  .preview-grid { fill: none; stroke: #e9eee7; stroke-width: 1; }
  .preview-line { fill: none; stroke: #668878; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
  .preview-points { fill: #668878; }
  .preview-months { display: flex; justify-content: space-between; margin: .1rem 0 0; padding-inline: 2.5%; color: #7a887f; font-size: .65rem; }
  .preview-tasks { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid #e1e8df; }
  .preview-tasks ul { padding: 0; margin: .65rem 0 0; list-style: none; }
  .preview-tasks li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .6rem 0; font-size: .79rem; }
  .preview-tasks time { color: #78867b; font-size: .72rem; font-variant-numeric: tabular-nums; }
  .preview-tasks small { border-radius: 20px; padding: .15rem .5rem; color: #69776b; background: #f1f3ec; font-size: .65rem; white-space: nowrap; }
  .preview-tasks .preview-progress { color: #3b6855; background: #e6efe6; }
  .hero-visual figcaption { margin-top: .8rem; color: #65766d; font-size: .75rem; text-align: center; }
@media (min-width: 701px) and (max-width: 1023px) {
  .preview-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .preview-stats > div { padding-inline: .8rem; }
  .preview-chart svg { max-height: 160px; }
}
@media (max-width: 360px) {
  .preview-body { padding-inline: 1rem; }
  .preview-header { padding-inline: 1rem; }
  .preview-stats > div { padding-inline: .75rem; }
}