:root{
  --page-bg:#f8f7f1;
  --site-width:870px;
  --shadow:0 24px 80px rgba(29,63,31,.14);
  --brand-green:#006600;
  --focus:#ff6a00;
}
html{background:#e8ebe5}
body{min-width:320px;background:radial-gradient(circle at 50% 0,#fff 0,#eef1ec 70%);color:#111;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
.skip-link{position:fixed;left:12px;top:12px;z-index:99;padding:10px 14px;border-radius:8px;background:#fff;color:#064f20;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.mobile-header,.mobile-content{display:none}
.site{width:min(100%,var(--site-width));margin-inline:auto;background:var(--page-bg);box-shadow:var(--shadow);overflow:hidden}
.mockup-section{position:relative;width:100%;line-height:0}
.mockup-section img{width:100%;height:auto;object-fit:contain}
.mockup-section .hero-bubble-overlay{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.image-map{position:absolute;inset-inline:0;z-index:2;pointer-events:none}
.image-map a{position:absolute;left:var(--x);width:var(--w);height:100%;overflow:hidden;color:transparent;white-space:nowrap;pointer-events:auto}
.image-map a:focus-visible{border-radius:4px;outline:3px solid var(--focus);outline-offset:2px;background:rgba(255,255,255,.18)}
.image-map--global{top:2.4%;height:8.2%}
.image-map--footer{bottom:0;height:13.4%}
.store-hotspot{position:absolute;z-index:2;overflow:hidden;color:transparent;white-space:nowrap}
.store-hotspot:focus-visible{border-radius:5px;outline:3px solid var(--focus);outline-offset:2px;background:rgba(255,255,255,.18)}
.store-hotspot--hero{left:5.1%;top:73.0%;width:17.2%;height:10.6%}
.store-hotspot--footer{left:61.1%;top:24.7%;width:16.5%;height:29.1%}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media (min-width:900px){body{padding-block:28px}.site{border-radius:18px}}
@media (max-width:600px){
  body{padding-top:58px;background:#f8f7f1}
  .site{width:100%;box-shadow:none}
  .mobile-header{position:fixed;inset:0 0 auto;z-index:100;display:flex;height:58px;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #dfe7dc;background:rgba(255,255,255,.97)}
  .mobile-brand{color:var(--brand-green);font-size:29px;font-weight:800;letter-spacing:.04em;text-decoration:none}
  .mobile-menu-button{display:grid;width:42px;height:42px;padding:9px;border:0;background:transparent;place-content:center;gap:5px}
  .mobile-menu-button span{display:block;width:24px;height:2px;border-radius:2px;background:var(--brand-green);transition:transform .2s,opacity .2s}
  .mobile-menu-button[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mobile-menu-button[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mobile-menu-button[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-nav{position:absolute;top:58px;right:0;left:0;display:grid;padding:10px 18px 18px;background:#fff;box-shadow:0 14px 28px rgba(0,50,16,.14);transform:translateY(-120%);visibility:hidden;transition:transform .22s ease,visibility .22s}
  .mobile-nav.is-open{transform:none;visibility:visible}
  .mobile-nav a{padding:13px 4px;border-bottom:1px solid #e7ece5;color:#183b1e;font-weight:700;text-decoration:none}
  .mobile-nav .mobile-store-link{margin-top:12px;border:0;border-radius:999px;background:var(--brand-green);color:#fff;text-align:center}
  .image-map--global{display:none}
  .mockup-section--hero{overflow:hidden}
  .mockup-section--hero::before{position:absolute;top:0;left:25%;z-index:2;width:49%;height:12%;background:#fefefe;content:"";pointer-events:none}
  .mockup-section--hero::after{position:absolute;top:0;right:0;z-index:2;width:22%;height:12%;background:#fefefe;content:"";pointer-events:none}
  .mockup-section--hero picture>img{margin-top:0}
  .mockup-section .hero-bubble-overlay{top:0;bottom:auto;height:auto}
  .store-hotspot--hero{top:73%;height:10.6%}
  #features>img,#howto>img,#scenes>img,#screenshots>img,#faq>img{display:none}
  .mobile-content{display:block;padding:34px 18px;background:#fff;line-height:1.65}
  .mobile-content h2{margin:0 0 22px;color:var(--brand-green);font-size:25px;line-height:1.3;text-align:center}
  .mobile-content h3{margin:0 0 5px;color:#134f22;font-size:17px;line-height:1.4}
  .mobile-content p{margin:0;font-size:14px;line-height:1.7}
  .mobile-features{display:grid;gap:12px}
  .mobile-features h2{grid-column:1/-1}
  .mobile-features article{display:flex;align-items:center;gap:15px;padding:18px;border:1px solid #dde6da;border-radius:14px;background:#fffefa}
  .mobile-features article>span{font-size:34px}
  .mobile-howto{background:#fbfbf7}
  .mobile-howto ol{display:grid;gap:11px;margin:0;padding:0;list-style:none}
  .mobile-howto li{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid #dfe7dc;border-radius:13px;background:#fff}
  .mobile-howto li>b{display:grid;flex:0 0 32px;height:32px;border-radius:50%;background:var(--brand-green);color:#fff;place-items:center}
  .mobile-howto em{color:#f35b17;font-style:normal}
  .mobile-result{margin-top:14px!important;padding:18px;border-radius:14px;background:#eaf4e4;color:#175224;text-align:center}
  .mobile-result strong{display:block;font-size:44px;line-height:1.1}.mobile-result small{margin-left:5px;font-size:14px}
  .mobile-scenes div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mobile-scenes span{padding:16px 10px;border-radius:12px;background:#eef6e9;color:#174f23;font-weight:700;text-align:center}
  .mobile-screenshots{padding-inline:0;overflow:hidden}
  .screenshot-scroll{overflow-x:auto;padding:0 18px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .screenshot-scroll img{width:780px;max-width:none;scroll-snap-align:start}
  .mobile-faq{display:grid;gap:10px;background:#fbfbf7}
  .mobile-faq h2{margin-bottom:12px}
  .mobile-faq details{border:1px solid #dce5d9;border-radius:12px;background:#fff}
  .mobile-faq summary{padding:16px;color:#145321;font-weight:700;cursor:pointer}
  .mobile-faq details p{padding:0 16px 17px}
  .mockup-section--footer{margin-top:0}
}
@media print{html,body{background:#fff}.site{box-shadow:none}}