/* Layout follows the user-approved Maru home design, with real app screenshots. */
.home-hero { padding: 55px 0 30px; }
.hero-copy { text-align: center; }
.home-hero h1 { margin: 0 auto 24px; max-width: 16em; font-size: clamp(40px,4.7vw,60px); line-height: 1.32; }
.home-hero h1 em { position: relative; display: inline-block; color: var(--accent-deep); font-style: normal; text-decoration: none; }
.home-hero h1 em::after { content: ''; position: absolute; left: -3%; right: -3%; bottom: -.12em; height: .15em; background: url('img/page-props/story-crayon.webp') center / 100% 100% no-repeat; transform: rotate(-1deg); pointer-events: none; }
.home-hero-lede { margin: 0 auto 28px; max-width: 34em; font-size: 17px; line-height: 1.9; color: var(--ink-soft); }
.hero-download-group { justify-content: center; flex-wrap: wrap; gap: 14px; scroll-margin-top: 110px; }
.home-hero .btn-platform { min-height: 49px; padding: 13px 20px; font-size: 14px; border-radius: 12px; }
.home-hero .btn-ios { color: #fff; background: var(--ink); border-color: var(--ink); }
.home-hero .btn-ios:hover { background: var(--accent-deep); }
.home-hero .btn-android { color: var(--ink); background: transparent; border: 1px solid #a99d90; }
.home-hero .btn-android:hover { background: var(--accent-soft); }
.platform-icon { width: 20px; height: 20px; fill: currentColor; flex: none; }
.download-inline-status { flex-basis: 100%; max-width: 480px; margin-inline: auto; text-align: left; }
.hero-stage { position: relative; height: 650px; margin-top: 48px; isolation: isolate; }
.hero-stage .phone { position: absolute; width: 258px; top: 28px; }
.stage-home { left: calc(50% - 129px); z-index: 3; }
.hero-stage .stage-meal { left: calc(50% - 359px); top: 60px; z-index: 2; transform: rotate(-3deg); }
.hero-stage .stage-diary { right: calc(50% - 359px); top: 60px; z-index: 2; transform: rotate(3deg); }
.stage-bowl { position: absolute; width: 265px; left: -35px; bottom: 88px; z-index: 1; pointer-events: none; }
.stage-notebook { position: absolute; width: 260px; right: -35px; top: 115px; z-index: 1; pointer-events: none; }
.home-stories { padding: 5px 0 35px; }
.product-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; min-height: 620px; }
.story-copy { max-width: 26em; padding: 20px 0; }
.story-copy h2 { font-size: clamp(32px,3.5vw,44px); line-height: 1.42; margin: 0 0 22px; max-width: 10em; }
.story-copy h2 em { color: var(--accent-deep); font-style: normal; }
.story-copy p { font-size: 17px; line-height: 1.9; color: var(--ink-soft); margin: 0 0 22px; }
.text-link { display: inline-flex; gap: 14px; align-items: center; font-size: 15px; color: var(--accent-deep); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.text-link:hover { border-bottom-width: 2px; }
.story-media { min-height: 590px; position: relative; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.story-media .phone { width: 246px; z-index: 2; }
.meal-story .phone { transform: rotate(-4deg); margin-right: 60px; }
.story-prop { position: absolute; width: 205px; bottom: 55px; right: -12px; z-index: 1; }
.diary-story .story-media { order: -1; }
.diary-story .phone { margin-left: 42px; transform: rotate(2deg); }
.story-photo { position: absolute; width: 200px; left: 0; top: 150px; z-index: 1; transform: rotate(-4deg); }
.story-cat { position: absolute; width: 165px; bottom: 28px; right: -48px; z-index: 3; }
.home-overview { padding: 30px 0 60px; }
.overview-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px; }
.overview-item { text-decoration: none; border-right: 1px solid var(--line-soft); padding-right: 22px; }
.overview-item:last-child { border: 0; }
.overview-item svg { width: 30px; height: 30px; color: var(--accent-deep); margin-bottom: 15px; }
.overview-item h3 { font-family: var(--font-body); font-size: 17px; letter-spacing: 0; margin: 0 0 12px; }
.overview-item p { font-size: 13px; line-height: 1.9; color: var(--ink-soft); margin: 0; }
.overview-item:hover h3 { color: var(--accent-deep); }
.home-faq-section { padding: 30px 0; }
.home-faq { max-width: 780px; }
.home-faq h2 { text-align: center; font-size: 27px; margin: 0 0 30px; }
.home-faq .faq-list { max-width: none; margin: 0; }
.closing-layout { text-align: center; max-width: 680px; padding: 65px 0 70px; }
.closing-layout h2 { font-size: clamp(30px,3.3vw,42px); margin: 0 0 14px; }
.closing-layout p { color: var(--ink-soft); font-size: 15px; margin: 0 0 25px; }
@media (max-width: 1000px) {
  .hero-stage { height: 585px; }
  .hero-stage .phone { width: 230px; }
  .stage-home { left: calc(50% - 115px); }
  .hero-stage .stage-meal { left: calc(50% - 315px); }
  .hero-stage .stage-diary { right: calc(50% - 315px); }
  .stage-bowl { width: 200px; left: -16px; bottom: 90px; }
  .stage-notebook { width: 200px; right: -16px; }
  .product-story { gap: 30px; }
  .story-prop { width: 160px; right: -5px; }
  .story-photo { width: 155px; left: -10px; }
  .story-cat { width: 140px; right: -8px; }
}
@media (max-width: 760px) {
  .home-hero { padding: 42px 0 10px; }
  .home-hero h1 { font-size: clamp(34px,6.5vw,46px); line-height: 1.38; margin-bottom: 22px; }
  .home-hero-lede { font-size: 15px; max-width: 30em; margin-bottom: 24px; }
  .hero-stage { height: 470px; margin-top: 40px; }
  .hero-stage .phone { width: 180px; }
  .stage-home { left: calc(50% - 90px); }
  .hero-stage .stage-meal { left: calc(50% - 239px); }
  .hero-stage .stage-diary { right: calc(50% - 239px); }
  .stage-bowl { width: 130px; left: -15px; bottom: 48px; }
  .stage-notebook { width: 140px; right: -15px; top: 112px; }
  .product-story { grid-template-columns: 1fr; gap: 15px; min-height: 0; padding: 35px 0; }
  .story-copy { text-align: center; max-width: 29em; margin: auto; padding: 0; }
  .story-copy h2 { margin: 0 auto 16px; font-size: 33px; max-width: 16em; }
  .story-copy p { font-size: 15px; margin-bottom: 16px; }
  .story-media { min-height: 535px; max-width: 450px; width: 100%; margin: auto; }
  .story-media .phone { width: 228px; }
  .diary-story .story-media { order: 0; }
  .story-prop { right: 0; bottom: 30px; }
  .story-photo { left: 0; top: 125px; width: 160px; }
  .story-cat { bottom: 5px; right: 5px; }
  .overview-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .overview-item:nth-child(2) { border: 0; }
  .overview-item { padding-right: 12px; }
  .home-overview { padding: 20px 0 40px; }
  .closing-layout { padding: 42px 0 54px; }
}
@media (max-width: 520px) {
  .home-hero .btn-platform { min-height: 46px; padding: 11px 14px; font-size: 12px; }
  .hero-download-group { gap: 10px; }
  .hero-stage { height: 368px; margin-top: 30px; }
  .hero-stage .phone { width: 132px; }
  .stage-home { left: calc(50% - 66px); }
  .hero-stage .stage-meal { left: calc(50% - 166px); top: 57px; }
  .hero-stage .stage-diary { right: calc(50% - 166px); top: 57px; }
  .stage-bowl { width: 90px; left: 0; bottom: 27px; }
  .stage-notebook { width: 90px; right: 0; top: 175px; }
  .story-media { min-height: 510px; }
  .story-media .phone { width: 212px; }
  .meal-story .phone { margin-right: 35px; }
  .story-prop { width: 135px; bottom: 35px; }
  .story-photo { width: 130px; top: 150px; }
  .story-cat { width: 125px; right: -5px; }
  .overview-item h3 { font-size: 16px; }
}
@media (max-width: 360px) {
  .hero-stage .phone { width: 122px; }
  .stage-home { left: calc(50% - 61px); }
  .hero-stage .stage-meal { left: calc(50% - 147px); }
  .hero-stage .stage-diary { right: calc(50% - 147px); }
}