/* muupo v3: quiet product photography, oversized creatures.
   DESIGN_VARIANCE 8 / MOTION_INTENSITY 4 / VISUAL_DENSITY 3.
   Brand tokens from REQUEST.md. Light surfaces throughout.
   Layers: artwork 1, foreground 2, header 3, dock 10, skip link 20.
   Motion is owned by lp-motion.js; its opt-in contract is below. */
:root {
  color-scheme: light;
  --cream: #f6efe6;
  --peach: #f3dfd3;
  --oat: #e8ddc9;
  --ink: #292623;
  --muted: #70665e;
  --line: #c9bbac;
  --paper: #faf7f2;
  --purple: #7a5af8;
  --purple-light: #eeeaf6;
  --type-8: 8px;
  --type-9: 9px;
  --type-10: 10px;
  --type-11: 11px;
  --type-12: 12px;
  --type-13: 13px;
  --type-14: 14px;
  --type-15: 15px;
  --type-16: 16px;
  --type-17: 17px;
  --type-18: 18px;
  --type-19: 19px;
  --type-20: 20px;
  --type-21: 21px;
  --type-22: 22px;
  --type-23: 23px;
  --type-24: 24px;
  --type-25: 25px;
  --type-27: 27px;
  --type-29: 29px;
  --type-48: 48px;
  --font-display: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --text-body: clamp(15px, 1.2vw, 17px);
  --text-small: 12px;
  --text-display: clamp(32px, 4.05vw, 62px);
  --text-hero: clamp(28px, 2.65vw, 42px);
  --text-subtitle: clamp(24px, 2.3vw, 36px);
  --type-32: 32px;
  --text-family: clamp(20px, 2vw, 28px);
  --text-plans: clamp(27px, 3.15vw, 46px);
  --text-faq: clamp(27px, 3vw, 40px);
  --text-caption: clamp(17px, 1.55vw, 23px);
  --gutter: clamp(24px, 5.5vw, 96px);
  --section-space: clamp(96px, 11vw, 172px);
  --radius-card: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif; font-size: var(--text-body); line-height: 1.9; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, h4, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; }
h1, h2 { letter-spacing: .025em; line-height: 1.5; }
h2 { font-size: var(--text-display); }
h1 > span, h2 > span { display: block; }
h3 { font-size: var(--text-subtitle); line-height: 1.65; }
.lp-wrap { width: min(100% - var(--gutter) * 2, 1280px); margin-inline: auto; }
.section-space { padding-block: var(--section-space); }
.lp-note, .android-note { font-size: var(--text-small); color: var(--muted); line-height: 1.8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; background: var(--ink); color: white; padding: 12px 20px; z-index: 20; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.mobile-only { display: none; }
.hero { min-height: 850px; height: min(960px, 100svh); position: relative; isolation: isolate; overflow: clip; }
.hero-wordmark { position: absolute; top: 83px; left: 5%; width: 90%; height: auto; }
.hero-window { position: absolute; z-index: 1; top: clamp(156px, 15vw, 235px); right: 7%; width: 43%; max-width: 650px; aspect-ratio: 4 / 5; border-radius: 50% 50% 45% 45% / 40% 40% 12% 12%; overflow: hidden; background: var(--peach); }
.hero-art { display: block; height: 100%; transform-origin: 50% 15%; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: absolute; z-index: 2; left: var(--gutter); top: 48%; width: 43%; max-width: 610px; }
h1 { font-size: var(--text-hero); font-weight: 900; }
.hero-description { max-width: 26em; margin-top: 22px; line-height: 2; }
.registration-slot { margin-top: 32px; }
.store-action { display: flex; flex-direction: column; align-items: center; width: fit-content; max-width: 100%; }
/* The official badge stays still, at its native aspect ratio, with 1/4-height clear space. */
.store-button { --badge-height: 52px; display: block; padding: calc(var(--badge-height) / 4); border-radius: 6px; }
.store-badge { height: var(--badge-height); width: auto; max-width: none; }
.android-note { margin-top: 0; }
.store-status { max-width: 310px; margin-top: 10px; text-align: center; }
.sticky-store { position: fixed; z-index: 10; bottom: max(16px, env(safe-area-inset-bottom)); right: 24px; padding: 10px 12px 8px; background: rgba(250, 247, 242, .96); border: 1px solid rgba(255, 255, 255, .6); border-radius: 18px; box-shadow: 0 8px 30px rgba(41, 37, 35, .12); }
@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .sticky-store { background: rgba(250, 247, 242, .6); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
}
.sticky-store .store-button { --badge-height: 48px; }
.sticky-store .android-note { margin-top: 0; font-size: var(--type-11); }
/* Both still lifes share the hero’s tall arch and rounded base. */
.scenes { background: var(--peach); }
.scene-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3%; align-items: start; }
.scene-layout h2 { grid-column: 1 / -1; margin-bottom: 72px; }
.scene-study { grid-column: 1; width: 88%; }
.scene-image { border-radius: 50% 50% 45% 45% / 40% 40% 12% 12%; aspect-ratio: 4 / 5; overflow: hidden; }
.scene-image img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.scene-night { grid-column: 2; width: 88%; margin: 14% 0 0 4%; }
.scene-layout figcaption { margin-top: 27px; font-family: var(--font-display); font-size: var(--text-caption); line-height: 1.75; }
.scene-night figcaption { text-align: left; padding-right: 0; white-space: nowrap; }
/* Entire app screens. The baseline remains readable without JavaScript. */
.steps { background: var(--cream); }
.steps > .lp-wrap > h2, .section-note { text-align: center; }
.section-note { margin-top: 22px; }
.steps-track { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 120px 10%; margin-top: 90px; }
.steps-visual { width: 100%; align-self: center; display: grid; place-items: center; }
.screen-pair { position: relative; width: min(100%, 490px); padding: 0 30% 13% 0; }
.device-frame { overflow: hidden; border: 5px solid #34302c; border-radius: 30px; background: #efece6; box-shadow: 0 18px 40px #59463016; }
.device-frame img { width: 100%; height: auto; }
.screen-front { position: absolute; width: 66%; right: 0; bottom: 0; }
.screen-back { width: 100%; }
.screen-solo { width: 65%; max-width: 320px; }
.step-copy h3 { margin-bottom: 23px; }
.step-copy p { max-width: 24em; line-height: 2.15; }
/* The growth path is open space; only the family branches carry fine rules. */
.creatures { background: var(--oat); padding-bottom: 90px; overflow: clip; }
.creatures > .lp-wrap > h2, .section-description { text-align: center; }
.section-description { margin-top: 25px; }
.growth-stages { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%; margin: 80px 0 36px; }
.growth-stages li { position: relative; text-align: center; }
.growth-stages li:not(:last-child)::after { content: '→'; position: absolute; right: -10%; top: 43%; font-size: var(--type-22); color: var(--muted); }
.growth-stages img { width: 100%; }
.growth-stages p { margin-top: 15px; font-family: var(--font-display); font-size: var(--text-caption); }
.growth-note { text-align: center; color: var(--muted); font-size: var(--type-14); line-height: 2; }
.family-tree { margin-top: 110px; }
.family-heading { text-align: center; }
.family-heading h3 { font-size: var(--text-family); }
.species-count { font-family: var(--font-display); font-size: var(--type-15); display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 20px; }
.species-count span { font-size: var(--type-48); font-weight: 900; line-height: 1.2; }
.family-branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position: relative; padding-top: 56px; margin-top: 28px; }
.family-branches::before { content: ''; position: absolute; height: 28px; border-left: 1px solid var(--line); top: 0; left: 50%; }
.family-branches::after { content: ''; position: absolute; height: 1px; background: var(--line); top: 28px; left: 16.66%; right: 16.66%; }
.family { position: relative; }
.family::before { content: ''; position: absolute; height: 28px; border-left: 1px solid var(--line); top: -28px; left: 50%; }
.family h4 { text-align: center; font-size: var(--type-19); width: fit-content; margin: 0 auto 30px; padding: 8px 22px; border: 1px solid #b7a992; border-radius: 100px; }
.family-leaves { list-style: none; padding: 22px 0 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 22px; position: relative; }
.family-leaves::before { content: ''; position: absolute; top: 0; left: 16.66%; right: 16.66%; border-top: 1px solid var(--line); }
.family-leaves::after { content: ''; position: absolute; top: -30px; left: 50%; height: 30px; border-left: 1px solid var(--line); }
.family-leaves li { text-align: center; font-size: var(--type-10); line-height: 1.5; position: relative; }
.family-leaves li::before { content: ''; position: absolute; top: -22px; left: 50%; height: 22px; border-left: 1px solid var(--line); }
.family-leaves img { width: 100%; aspect-ratio: 1.1; object-fit: contain; margin-bottom: 10px; }
.secret-creature > div { position: relative; }
.secret-creature > div > span { position: absolute; inset: 20% 0 0; color: var(--paper); font: 700 var(--type-32) var(--font-display); }
.share-ribbons { margin-top: 100px; display: grid; gap: 18px; }
.creature-strip { overflow: hidden; scrollbar-width: none; }
.creature-strip::-webkit-scrollbar { display: none; }
.creature-track { display: flex; gap: 18px; width: max-content; padding-right: 18px; }
.share-card { flex: 0 0 240px; width: 240px; border-radius: var(--radius-card); padding: 18px 13px 22px; text-align: center; background: var(--card-color, var(--paper)); }
.share-muu { width: 184px; height: 165px; object-fit: contain; margin: 0 auto 8px; }
.muu-name { font-family: var(--font-display); font-size: var(--type-22); font-weight: 700; }
.muu-species { font-size: var(--type-10); margin-top: 4px; white-space: nowrap; }
.muu-message { font-size: var(--type-10); margin-top: 23px; white-space: nowrap; }
.card-logo { width: 60px; height: auto; margin: 12px auto 0; }
.share-card[data-species="uto"], .share-card[data-species="axolotl"] { --card-color: #f6dce2; }
.share-card[data-species="numa"] { --card-color: #e8dff3; }
.share-card[data-species="howa"] { --card-color: #f8edbe; }
.share-card[data-species="pote"] { --card-color: #f6ecd7; }
.share-card[data-species="capybara"] { --card-color: #efe0da; }
.share-card[data-species="otter"] { --card-color: #e3eadf; }
.share-card[data-species="quokka"] { --card-color: #dfede6; }
.share-card[data-species="red-panda"], .share-card[data-species="tiger"], .share-card[data-species="lion"] { --card-color: #f5dfc9; }
.share-card[data-species="toro"], .share-card[data-species="shoebill"] { --card-color: #dde7ec; }
.share-card[data-species="polar-bear"] { --card-color: #dceef3; }
.share-card[data-species="hamster"] { --card-color: #f7e1d2; }
/* A single oversized pile, with the collection screens laid across its base. */
.keepsake { padding-bottom: 70px; background: var(--peach); overflow: clip; }
.keepsake-heading { position: relative; z-index: 2; }
.keepsake-stage { position: relative; padding-top: 620px; margin-top: -150px; }
.keepsake-stage::before { content: ''; position: absolute; bottom: 3%; left: -15%; width: 130%; height: 70%; border-radius: 50% 50% 0 0; background: var(--oat); }
.keepsake-art { position: absolute; z-index: 1; width: min(108vw, 1500px); top: 0; left: 50%; translate: -50% 0; }
.keepsake-art img { width: 100%; }
.keepsake-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: center; align-items: start; gap: 5%; max-width: 1040px; }
/* Keep the three phones upright, including the legacy scatter entrance. */
.memory-card { min-width: 0; display: flex; flex-direction: column; transform: none !important; }
.memory-card h3 { font-size: var(--type-18); line-height: 1.6; }
.memory-card figcaption { order: 1; position: relative; padding-top: 24px; display: flex; align-items: flex-start; justify-content: center; text-align: center; }
/* The cream band crosses the lower 30% of the central phone. */
.keepsake-cards::before { content: ''; position: absolute; z-index: -1; top: 0; margin-top: calc(90% / 3 * 1688 / 780 * .7); left: 50%; width: 200vw; height: 100vh; translate: -50% 0; background: var(--cream); }
.memory-card .device-frame { position: relative; z-index: 1; aspect-ratio: 780 / 1688; border-width: 2px; border-radius: 26px; }
.memory-card .device-frame img { width: 100%; height: 100%; object-fit: contain; }
.memory-collection, .memory-charm { margin-top: 64px; }
.memory-muus { margin-top: 0; }
.charm-screen { display: grid; place-items: center; background: #f2efea; }
.keepsake-note { position: relative; z-index: 2; margin-top: 60px; text-align: center; }
/* The comparison is intentionally quiet after the large character composition. */
.plan-wrap { width: min(100% - var(--gutter) * 2, 900px); margin: auto; }
.plans h2 { font-size: var(--text-plans); text-align: center; }
.plan-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; margin-top: 60px; font-size: var(--type-15); }
.feature-col { width: 40%; }
.plus-col { background: var(--purple-light); }
.plan-table th, .plan-table td { padding: 24px 16px; font-weight: 400; text-align: center; vertical-align: middle; }
.plan-table thead th { font-family: var(--font-display); font-size: var(--type-23); }
.plan-table thead th:last-child { border-radius: 24px 24px 0 0; background: var(--purple-light); }
.plan-table tbody th { text-align: left; }
.plan-table tbody tr:not(:last-child) > * { border-bottom: 1px solid #c9bbac70; }
.plan-table small { display: block; font-size: var(--type-11); margin-top: 4px; }
.plus-mark { color: var(--purple); font-weight: 900; }
.price-row td { font-size: var(--type-24); font-family: var(--font-display); font-weight: 700; }
.price-row td:last-child { background: var(--purple-light); border-radius: 0 0 24px 24px; }
.annual-price { display: block; font-size: var(--type-14); font-weight: 400; }
.trial-note { text-align: center; font-family: var(--font-display); font-size: var(--type-19); margin-top: 32px; }
.plan-note { text-align: center; font-size: var(--type-13); color: var(--muted); max-width: 37em; margin: 13px auto 0; }
/* A low, wide arch gives the three characters the whole stage. */
.register { background: var(--peach); text-align: center; overflow: clip; padding-bottom: 85px; }
.register-heading { position: relative; z-index: 2; }
.register-visual { position: relative; width: min(88%, 1260px); aspect-ratio: 2 / 1; margin: 56px auto 0; border-radius: 45% 45% 50% 50% / 12% 12% 40% 40%; overflow: hidden; }
.register-art { position: absolute; width: 110%; max-width: none; height: 110%; left: -5%; top: -5%; object-fit: cover; }
.register-star { position: absolute; width: 5.5%; left: 51.65%; top: 63.75%; transform: translate(-50%, -50%) rotate(9deg); }
.register-action { position: relative; z-index: 2; margin-top: 30px; display: grid; justify-content: center; }
/* Quiet capsules, with two creatures peeking in from the edge. */
.sns-section { position: relative; isolation: isolate; overflow: clip; background: var(--oat); }
.sns-content { position: relative; z-index: 2; text-align: center; }
.sns-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 48px; }
.sns-link { display: grid; grid-template-columns: 32px auto; column-gap: 16px; align-items: center; min-width: 250px; padding: 20px 28px; border: 1px solid var(--ink); border-radius: 100px; background: var(--cream); text-align: left; }
.sns-link:hover { background: var(--paper); }
.sns-icon { grid-row: 1 / 3; width: 32px; height: 32px; }
.sns-name { font-size: var(--type-18); font-weight: 700; line-height: 1.5; }
.sns-handle { font-size: var(--type-13); line-height: 1.7; }
.sns-creatures { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.sns-muu { position: absolute; width: clamp(140px, 16vw, 220px); }
.sns-muu-left { left: -40px; bottom: -34px; rotate: 15deg; }
.sns-muu-right { right: -35px; top: 12px; rotate: -18deg; }
.faq { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8%; }
.faq h2 { font-size: var(--text-faq); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 25px 0; font-size: var(--type-15); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-toggle { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.faq-toggle::before, .faq-toggle::after { content: ''; position: absolute; background: var(--ink); width: 12px; height: 1px; top: 11px; left: 5px; }
.faq-toggle::after { rotate: 90deg; transition: rotate .2s; }
details[open] .faq-toggle::after { rotate: 0deg; }
.faq-list details > p { font-size: var(--type-14); color: var(--muted); padding: 0 26px 28px 0; line-height: 2; }
.lp-footer { background: var(--oat); padding: 64px 0 40px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.lp-logo img { width: 170px; height: auto; }
.social-links { display: flex; gap: 28px; font-size: var(--type-13); }
.social-links span { margin-left: 8px; }
.social-handle { margin-top: 22px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 38px; font-size: var(--type-12); }
.legal-links a:hover, .social-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-bottom { display: flex; justify-content: space-between; font-size: var(--type-11); margin-top: 36px; color: var(--muted); }
.noscript-note { padding: 12px; text-align: center; font-size: var(--text-small); }
/* Motion contract. No content is hidden before lp-motion.js opts in.
   Whole screenshots stay visible in the no-JS and reduced-motion layouts. */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion [data-motion="rise"], html.js-motion [data-reveal], html.js-motion [data-motion-item] { transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
  html.js-motion [data-motion="rise"]:not(.is-visible), html.js-motion [data-reveal]:not(.is-visible), html.js-motion [data-motion="scatter"]:not(.is-visible) [data-motion-item] { opacity: 0; transform: translateY(30px); }
  html.js-motion .m-line { display: block; overflow: clip; padding-block: .08em; margin-block: -.08em; }
  html.js-motion .m-line > span { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
  html.js-motion .is-visible .m-line > span { transform: none; }
  html.js-motion .keepsake-art.is-breathing img { animation: breathe 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
  html.js-motion .register-star.is-twinkle { animation: twinkle 3.6s ease-in-out infinite; }
  @keyframes breathe { 50% { transform: scale(1.012, 1.02); } }
  @keyframes twinkle { 50% { transform: translate(-50%, -56%) rotate(-8deg) scale(1.08); } }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  html.js-motion .steps-track.is-pinned { align-items: start; row-gap: 0; }
  html.js-motion .is-pinned .steps-visual { grid-column: 1; grid-row: 1 / 4; align-self: start; position: sticky; top: 70px; height: calc(100svh - 140px); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
  html.js-motion .is-pinned .steps-visual.is-active { opacity: 1; visibility: visible; }
  html.js-motion .is-pinned .screen-pair { width: min(100%, 490px, calc((100svh - 190px) * .62)); }
  html.js-motion .is-pinned .screen-solo { width: min(65%, 320px, calc((100svh - 180px) * .46)); }
  html.js-motion .is-pinned .step-copy { grid-column: 2; min-height: max(630px, 85svh); display: flex; flex-direction: column; justify-content: center; }
  html.js-motion .is-pinned [data-step="1"] { grid-row: 1; }
  html.js-motion .is-pinned [data-step="2"] { grid-row: 2; }
  html.js-motion .is-pinned [data-step="3"] { grid-row: 3; }
}
@media (min-width: 768px) {
  .hero { min-height: max(850px, calc(131px + 15vw + min(53.75vw, 812.5px))); }
  .hero-window { top: calc(63px + 15vw); }
  .scene-night figcaption { padding-right: 0; }
}
@media (min-width: 1600px) {
  .hero-copy { left: calc((100% - 1420px) / 2); }
  .hero-window { right: calc((100% - 1420px) / 2); }
  .keepsake-stage { padding-top: 770px; }
}
@media (min-width: 768px) and (max-width: 1050px) {
  .hero { min-height: max(800px, calc(131px + 71.25vw)); }
  .hero-window { right: 3%; width: 45%; }
  .hero-copy { top: 43%; width: 49%; }
  .hero-description { max-width: 22em; }
  .keepsake-stage { padding-top: 440px; margin-top: -50px; }
  .memory-card h3 { font-size: var(--type-15); }
}
@media (max-width: 767px) {
  :root { --gutter: 24px; --text-display: clamp(27px, 7.35vw, 44px); --text-hero: clamp(23px, 6.4vw, 36px); --text-body: 14px; --text-caption: 17px; --text-subtitle: 24px; --section-space: 88px; }
  .mobile-only { display: block; }
  .hero { height: auto; min-height: 0; padding: 45px 24px 52px; display: flex; flex-direction: column; align-items: center; }
  .hero-wordmark { position: relative; inset: auto; width: calc(100vw - 32px); max-width: none; }
  .hero-window { position: relative; inset: auto; width: 90vw; max-width: 430px; margin: -27px 0 0; aspect-ratio: 4 / 4.55; flex-shrink: 0; border-radius: 50% 50% 43% 43% / 40% 40% 13% 13%; }
  .hero-art img { object-fit: cover; object-position: center 46%; }
  .hero-copy { position: relative; inset: auto; width: 100%; max-width: 440px; margin-top: 25px; text-align: center; }
  h1 { letter-spacing: 0; line-height: 1.6; }
  .hero-description { font-size: var(--type-15); color: var(--ink); line-height: 1.9; margin: 13px auto 0; max-width: 24em; text-align: center; }
  .registration-slot { margin-top: 23px; }
  .registration-bar { display: flex; justify-content: center; }
  .store-button, .sticky-store .store-button { --badge-height: 46px; }
  .android-note { font-size: var(--type-10); margin-top: 0; }
  .sticky-store { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); bottom: max(10px, env(safe-area-inset-bottom)); padding: 7px 9px; }
  .sticky-store .android-note { font-size: var(--type-10); }
  .scene-layout { display: block; }
  .scene-layout h2 { margin-bottom: 40px; letter-spacing: 0; }
  .scene-study { width: 82%; }
  .scene-layout figcaption { margin-top: 20px; }
  .scene-night { margin: 52px 0 0 auto; width: 82%; }
  .scene-night figcaption { padding-right: 0; }
  .steps > .lp-wrap > h2 { text-align: left; }
  .section-note { text-align: left; font-size: var(--type-10); margin-top: 16px; }
  .steps-track { grid-template-columns: 1fr; gap: 0; margin-top: 45px; }
  .step-heading-mobile { font-size: var(--type-23); margin-bottom: 24px; }
  .step-heading-desktop { display: none; }
  .steps-visual { margin: 0 auto; max-width: 450px; }
  .screen-pair { width: 100%; padding-right: 32%; padding-bottom: 15%; }
  .screen-front { width: 64%; }
  .device-frame { border-width: 3px; border-radius: 24px; }
  .screen-solo { width: 67%; max-width: 290px; }
  .step-copy { padding: 30px 0 70px; }
  .step-copy:last-child { padding-bottom: 0; }
  .step-copy h3 { font-size: var(--type-23); margin-bottom: 15px; }
  .step-copy p { font-size: var(--type-14); }
  .creatures { padding-bottom: 60px; }
  .creatures > .lp-wrap > h2, .section-description { text-align: left; }
  .section-description { max-width: 24em; margin-top: 22px; }
  .growth-stages { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; margin: 42px 0 30px; }
  .growth-stages li:nth-child(2)::after { content: '↓'; top: auto; right: 45%; bottom: -33px; }
  .growth-stages li:nth-child(3) { grid-column: 2; grid-row: 2; }
  .growth-stages li:nth-child(4) { grid-column: 1; grid-row: 2; }
  .growth-stages li:nth-child(3)::after { content: '←'; right: auto; left: -16%; }
  .growth-stages li:first-child::after { right: -16%; }
  .growth-stages p { font-size: var(--type-16); margin-top: 0; }
  .growth-note { font-size: var(--type-12); }
  .family-tree { margin-top: 65px; }
  .family-heading h3 { font-size: var(--type-20); }
  .species-count { margin-top: 16px; }
  .family-branches { grid-template-columns: 1fr; gap: 48px; padding-top: 0; margin-top: 40px; }
  .family-branches::before, .family-branches::after, .family::before { display: none; }
  .family h4 { font-size: var(--type-17); margin-bottom: 25px; padding: 7px 22px; }
  .family-leaves { row-gap: 18px; }
  .family-leaves::after { top: -25px; height: 25px; }
  .family-leaves li { font-size: var(--type-11); }
  .family-leaves img { max-width: 124px; margin: 0 auto 8px; }
  .share-ribbons { margin-top: 65px; gap: 12px; }
  .creature-track { gap: 12px; padding-right: 12px; }
  .share-card { flex-basis: 202px; width: 202px; padding: 14px 10px 17px; border-radius: 20px; }
  .share-muu { width: 150px; height: 136px; margin-bottom: 3px; }
  .muu-name { font-size: var(--type-20); }
  .muu-species { font-size: var(--type-8); }
  .muu-message { font-size: var(--type-8); margin-top: 18px; }
  .card-logo { width: 51px; margin-top: 10px; }
  .keepsake { padding-bottom: 45px; }
  .keepsake-stage { padding-top: 96vw; margin-top: 25px; }
  .keepsake-art { width: 148%; left: -15%; top: 0; translate: none; }
  .keepsake-stage::before { height: 74%; bottom: 6%; }
  .keepsake-cards { width: calc(100% - 24px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr) minmax(0, 1fr); gap: 8px; }
  .keepsake-cards::before { margin-top: min(calc((100% - 16px) / 3.65 * 1.65 * 1688 / 780 * .7), calc(62px + (100% - 16px) / 3.65 * 1688 / 780 * .75)); }
  .memory-card h3 { font-size: var(--type-11); line-height: 1.7; }
  .memory-card figcaption { padding-top: 16px; }
  .memory-card .device-frame { border-radius: 13px; border-width: 2px; }
  .memory-collection, .memory-charm { margin-top: 62px; position: relative; z-index: auto; }
  .memory-muus { margin-top: 0; position: relative; z-index: auto; }
  .keepsake-note { font-size: var(--type-10); margin-top: 40px; }
  .plans h2 { font-size: var(--type-25); text-align: left; line-height: 1.6; }
  .plan-wrap { width: calc(100% - 36px); }
  .plan-table { margin-top: 36px; font-size: var(--type-12); }
  .feature-col { width: 36%; }
  .plan-table th, .plan-table td { padding: 19px 5px; }
  .plan-table thead th { font-size: var(--type-20); }
  .plan-table small { font-size: var(--type-9); line-height: 1.6; }
  .price-row td { font-size: var(--type-21); }
  .annual-price { font-size: var(--type-12); }
  .trial-note { font-size: var(--type-16); margin-top: 27px; }
  .plan-note { font-size: var(--type-12); padding-inline: 6px; }
  .register { padding-bottom: 60px; }
  .register h2 { font-size: var(--type-29); letter-spacing: 0; }
  .register-visual { width: 114%; margin: 35px -7% 0; }
  .register-action { margin-top: 25px; }
  .sns-section { padding-block: 88px 120px; }
  .sns-links { flex-direction: column; gap: 16px; max-width: 360px; margin: 36px auto 0; }
  .sns-link { min-width: 0; grid-template-columns: 28px 1fr auto; column-gap: 12px; padding: 22px; }
  .sns-icon { grid-row: auto; width: 28px; height: 28px; }
  .sns-name { font-size: var(--type-17); }
  .sns-handle { font-size: var(--type-12); }
  .sns-muu { width: 130px; }
  .sns-muu-left { left: -26px; bottom: -24px; }
  .sns-muu-right { right: -28px; top: -42px; }
  .faq { display: block; }
  .faq h2 { font-size: var(--type-27); margin-bottom: 28px; }
  .faq-list summary { font-size: var(--type-13); padding-block: 22px; gap: 12px; }
  .faq-list details > p { font-size: var(--type-12); }
  .lp-footer { padding: 45px 0 140px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 28px; }
  .lp-logo img { width: 160px; }
  .social-links { gap: 22px; font-size: var(--type-12); }
  .social-handle { font-size: var(--type-10); margin-top: 15px; }
  .legal-links { flex-direction: column; gap: 13px; font-size: var(--type-11); margin-top: 30px; }
  .footer-bottom { font-size: var(--type-10); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js-motion [data-motion], html.js-motion [data-reveal], html.js-motion [data-motion-item], html.js-motion [data-step-shot], html.js-motion [data-step], html.js-motion .m-line > span, html.js-motion [data-motion-star] { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}

/* いきものは、これからも増えていきます（Claude、2026-10-12。旧「つぎの族」の点線枠を置き換え） */
.family-more { margin: 72px auto 0; text-align: center; }
.family-more-shadows { display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
.family-more-shadows img { width: clamp(64px, 9vw, 104px); height: auto; filter: brightness(0) opacity(.82); }
.family-more-shadows img:nth-child(2) { width: clamp(78px, 11vw, 124px); }
.family-more-text { margin-top: 18px; font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.35; letter-spacing: .02em; }
.family-more-text span { display: inline-block; }
.family-more-sub { margin-top: 10px; font-size: var(--type-14); color: var(--muted); }
@media (max-width: 767px) { .family-more { margin-top: 56px; } .family-more-text span { display: block; } }
.hero-description .nb { display: inline-block; }

/* 眠った分だけ、育つ：前の画面が後ろの画面に落とすうっすらした影（Claude） */
.screen-pair .device-frame:not(.screen-back) { box-shadow: -14px 12px 34px rgba(41, 37, 35, .16), -2px 2px 8px rgba(41, 37, 35, .08); }
.register-sub { color: var(--muted); }

/* SNS の節：いろいろな子が端からのぞく（Claude、2026-10-12。旧：ねこ・ひよこの2体） */
.sns-muu { width: clamp(96px, 11vw, 168px); }
.sns-p1 { left: -30px; bottom: -28px; rotate: 14deg; width: clamp(120px, 14vw, 200px); }
.sns-p2 { left: 6%; top: -40px; rotate: -10deg; }
.sns-p3 { left: 22%; bottom: -46px; rotate: 6deg; width: clamp(80px, 9vw, 130px); }
.sns-p4 { right: -34px; top: 10px; rotate: -16deg; width: clamp(120px, 14vw, 200px); }
.sns-p5 { right: 8%; bottom: -40px; rotate: 8deg; }
.sns-p6 { right: 26%; top: -36px; rotate: -6deg; width: clamp(80px, 9vw, 130px); }
.sns-p7 { left: 40%; bottom: -52px; rotate: -4deg; width: clamp(72px, 8vw, 120px); }
@media (max-width: 767px) {
  .sns-muu { width: 84px; }
  .sns-p1 { left: -22px; bottom: -20px; width: 108px; }
  .sns-p2 { left: 4%; top: -34px; }
  .sns-p3 { display: none; }
  .sns-p4 { right: -24px; top: -6px; width: 104px; }
  .sns-p5 { right: 6%; bottom: -30px; }
  .sns-p6 { display: none; }
  .sns-p7 { left: 42%; bottom: -40px; width: 72px; }
}
/* SNS のいきものの動きは lp-motion.js（ふわふわ揺れる動きはやめた。トール「ふわふわしてるの変」） */
.sns-crowd { transform-origin: 50% 100%; }
.sns-peek-left { transform-origin: 0% 50%; }
.sns-peek-right { transform-origin: 100% 50%; }

/* 段階：たまごからおとなへ、少しずつ大きく（Claude） */
.growth-stages li img { transform-origin: 50% 100%; }
.growth-stages li:nth-child(1) img { scale: .62; }
.growth-stages li:nth-child(2) img { scale: .74; }
.growth-stages li:nth-child(3) img { scale: .88; }
.growth-stages li:nth-child(4) img { scale: 1.08; }
/* 最後の絵：上の左右の角に丸み（Claude） */
.register-visual { border-radius: 50% 50% 50% 50% / 24% 24% 40% 40%; }  /* 上の辺を1本のなだらかな弧に（トール「上は丸っこい方がいい。直線は嫌だ」） */
/* SNS：下からのぞく子が見切れすぎないように（PC） */
@media (min-width: 768px) {
  .sns-p3 { bottom: 0; }
  .sns-p7 { bottom: 0; }
  .sns-p5 { bottom: -6px; }
  .sns-p1 { bottom: -10px; }
}

/* 系統図の見出しの補足（Claude） */
.family-lead { margin-top: 10px; font-size: var(--type-14); color: var(--muted); }
/* 追従の App Store：余白を半分以下に。場所が限られる所なので Apple の決まりの下限（高さの1/10）を使う（Claude、トール「パディングデカすぎ」） */
.sticky-store { padding: 6px; }
.sticky-store .store-button { padding: calc(var(--badge-height) / 10); }
.sticky-store .android-note { display: none; }
@media (max-width: 767px) { .sticky-store { padding: 5px; } }
/* シークレットの影絵：「？」を胴体の中央に（Claude、トール「これの？の位置」） */
.secret-creature > div > span { inset: 0; display: grid; place-items: center; padding-top: 18%; }

/* シェアカードの色は並び順で6色を順に当てる。暖色と寒色を交互にし、となり・ループのつなぎ目で同じ系統が続かないようにする。段ごとに2色ずらす（Claude、トール「2連で同じ色にすな」） */
.share-ribbons .share-row:nth-child(1) .share-card:nth-child(6n+1) { --card-color: #f4dbe3; }
.share-ribbons .share-row:nth-child(1) .share-card:nth-child(6n+2) { --card-color: #dcefe3; }
.share-ribbons .share-row:nth-child(1) .share-card:nth-child(6n+3) { --card-color: #f7edc4; }
.share-ribbons .share-row:nth-child(1) .share-card:nth-child(6n+4) { --card-color: #e6def4; }
.share-ribbons .share-row:nth-child(1) .share-card:nth-child(6n+5) { --card-color: #f6e0d0; }
.share-ribbons .share-row:nth-child(1) .share-card:nth-child(6n+6) { --card-color: #dbeaf4; }
.share-ribbons .share-row:nth-child(2) .share-card:nth-child(6n+1) { --card-color: #f7edc4; }
.share-ribbons .share-row:nth-child(2) .share-card:nth-child(6n+2) { --card-color: #e6def4; }
.share-ribbons .share-row:nth-child(2) .share-card:nth-child(6n+3) { --card-color: #f6e0d0; }
.share-ribbons .share-row:nth-child(2) .share-card:nth-child(6n+4) { --card-color: #dbeaf4; }
.share-ribbons .share-row:nth-child(2) .share-card:nth-child(6n+5) { --card-color: #f4dbe3; }
.share-ribbons .share-row:nth-child(2) .share-card:nth-child(6n+6) { --card-color: #dcefe3; }
.share-ribbons .share-row:nth-child(3) .share-card:nth-child(6n+1) { --card-color: #f6e0d0; }
.share-ribbons .share-row:nth-child(3) .share-card:nth-child(6n+2) { --card-color: #dbeaf4; }
.share-ribbons .share-row:nth-child(3) .share-card:nth-child(6n+3) { --card-color: #f4dbe3; }
.share-ribbons .share-row:nth-child(3) .share-card:nth-child(6n+4) { --card-color: #dcefe3; }
.share-ribbons .share-row:nth-child(3) .share-card:nth-child(6n+5) { --card-color: #f7edc4; }
.share-ribbons .share-row:nth-child(3) .share-card:nth-child(6n+6) { --card-color: #e6def4; }
/* 最初の画面（PC）：見出し・本文・バッジの左端を、ロゴの文字の左端にそろえる（Claude、トール「テキストをロゴの左寄せで」）
   ロゴは left 5%・幅 90%、文字の左端はロゴの幅の 2.5% の位置なので 5% + 90% × 2.5% = 7.25% */
@media (min-width: 768px) { .hero-copy, .hero-copy[class] { left: 7.25%; } }

/* SNS の節：いきものがたくさん集まる（Claude、トール「動物いっぱい出したい。まだスカスカ」）
   下に13体が重なりながら並び、上の左右から4体がのぞく。旧 .sns-p1〜p7 は使わない。 */
.sns-section { padding-bottom: clamp(200px, 20vw, 280px); }
.sns-muu.sns-crowd, .sns-muu.sns-peek { width: calc(var(--w) * var(--k, 1)); rotate: var(--r); left: auto; right: auto; top: auto; bottom: auto; }
.sns-crowd { left: var(--x) !important; bottom: -14px !important; z-index: var(--z); }
.sns-peek { top: 18px !important; }
.sns-peek-left { left: var(--x) !important; }
.sns-peek-right { right: var(--x) !important; }
.sns-creatures { --k: 1; }
@media (min-width: 1600px) { .sns-creatures { --k: 1.15; } }
@media (max-width: 1100px) { .sns-creatures { --k: .8; } }
@media (max-width: 767px) {
  .sns-section { padding-bottom: 150px; }
  .sns-creatures { --k: .78; }
  .sns-crowd { margin-left: -6px; }
  .sns-sp-hide { display: none; }
  .sns-peek { top: -4px !important; }
  .sns-peek:nth-of-type(n) { width: calc(var(--w) * .55); }
}
@media (max-width: 767px) {
  .sns-crowd:not(.sns-sp-hide):nth-of-type(1) { left: -4% !important; }
  .sns-crowd:not(.sns-sp-hide):nth-of-type(3) { left: 11% !important; }
  .sns-crowd:not(.sns-sp-hide):nth-of-type(5) { left: 26% !important; }
  .sns-crowd:not(.sns-sp-hide):nth-of-type(7) { left: 41% !important; }
  .sns-crowd:not(.sns-sp-hide):nth-of-type(9) { left: 56% !important; }
  .sns-crowd:not(.sns-sp-hide):nth-of-type(11) { left: 71% !important; }
  .sns-crowd:not(.sns-sp-hide):nth-of-type(13) { left: 86% !important; }
}
@media (min-width: 768px) { .register-br { display: none; } }  /* 「今日からスマホを置いてみよう。」はPCで1行、スマホは「今日から」で改行（2026-10-13 トール） */

/* 最初の画面（PC）：コピーとバッジを上げ、バッジを大きく（2026-10-13 トール「もう少し上げれない？」「ボタンも大きく」）
   バッジの決まりは高さ40px以上・まわりに高さの1/4以上の余白だけで、上限はない。左の余白は見出しの左端にそろえるため外へ逃がす */
@media (min-width: 768px) {
  .hero-copy, .hero-copy[class] { top: calc(150px + 19.5vw); }
  .hero-copy .store-button { --badge-height: 60px; margin-left: calc(var(--badge-height) / -4); }
  .hero-copy .store-action { align-items: flex-start; }
  .hero-copy .android-note { text-align: left; margin-left: 0; }
}
@media (max-width: 767px) { .hero-copy .store-button { --badge-height: 52px; } }
/* 図鑑の棚：シリーズ「はじまりのなかま」1棚に18種（D110。旧：3つの族の系統図） */
.series-shelf { grid-template-columns: 1fr; padding-top: 0; }
.series-shelf::before, .series-shelf::after, .series-leaves::before, .series-leaves::after, .series-leaves li::before { display: none; }
.series-leaves { grid-template-columns: repeat(6, 1fr); padding-top: 0; column-gap: 12px; row-gap: 26px; }
.series-leaves li { font-size: var(--type-12); }
@media (max-width: 767px) {
  .series-leaves { grid-template-columns: repeat(3, 1fr); column-gap: 8px; }
}
.series::before, .series h4::before, .series h4::after { display: none; }

/* 最初の画面：メインビジュアルを積み重なったいきもの（invite-group）に（2026-10-13 トール）。透明の絵をアーチの底に座らせる。
   旧のチャーム（W1b）は index.html にコメントで残している */
/* 旧：枠の中に収める .hero-window-pile .hero-art img { object-fit: contain; object-position: 50% 100%; transform: scale(1.12); transform-origin: 50% 100%; } */
/* 枠からはみ出させる（2026-10-13 トール「はみ出ちゃっていい。その方が素敵」）。アーチは ::before の地の形として残す */
.hero-window-pile { overflow: visible; background: none; }
.hero-window-pile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--peach); }
.hero-window-pile .hero-art { position: relative; height: 100%; }
.hero-window-pile .hero-art img { position: absolute; left: -14%; bottom: -6%; width: 128%; height: auto; max-width: none; object-fit: contain; }
@media (max-width: 767px) { .hero-window-pile .hero-art img { left: -5%; width: 110%; bottom: -5%; } }
.hero-window-pile, .hero-window-pile .hero-art img { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) { html.js-motion .hero-window-pile, html.js-motion .hero-window-pile .hero-art img { opacity: 0; } }

/* 育てた子の節：後ろの絵をチャームに（2026-10-13 トール、最初の画面と入れ替え）。縦長なので幅を絞り、画面3枚の後ろに上半分がのぞく */
.keepsake-art-charm { width: min(56vw, 760px); }
@media (max-width: 767px) { .keepsake-art-charm { width: 96%; left: 2%; } }

/* 最初の画面（PC）：ロゴは画面いっぱいのまま、コピーと絵だけを中央の 1440px の中に寄せる
   （2026-10-13 トール「もっと中央に」→「ロゴでかいままが良かった」）。1600px 以下では従来どおりロゴの文字の端にそろう。
   縦の位置はロゴの高さ（画面幅に比例）に合わせたまま */
@media (min-width: 768px) {
  .hero { --hero-w: min(90vw, 1440px); --hero-edge: calc(50% - var(--hero-w) / 2 + var(--hero-w) * .025); }
  .hero-copy, .hero-copy[class] { left: var(--hero-edge); }
}
@media (min-width: 1051px) {
  .hero-window, .hero-window[class] { right: var(--hero-edge); }
}

/* 育てた子の節の画面：枠の縁の分だけ画像が小さく収まり、上下に地の色の隙間が出ていた（チャーム画面の上の暗い幕で目立つ）。枠いっぱいに敷く（2026-10-13 トール） */
.memory-card .device-frame img { object-fit: cover; object-position: 50% 0; }

/* App Store 公開までの「近日公開」（2026-10-14 トール）。押せる物に見えないよう、塗りのない細い線のカプセルにする。
   追従のバーは、押せる行き先として SNS の節へ案内する。App Store のバッジは index.html にコメントで残している */
.soon-pill { display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: var(--type-17, 17px); letter-spacing: .08em; color: var(--ink); }
.soon-action .android-note { margin-top: 10px; }
@media (min-width: 768px) { .hero-copy .soon-pill { height: 58px; padding: 0 34px; } }
.soon-dock { padding: 0; }
.soon-dock-link { display: block; padding: 14px 22px; border-radius: inherit; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }

/* チャームは v1.0 に入らない（D120）。LP には残し、見出しの上に小さく「近日追加」を添える（2026-10-14 トール） */
.soon-tag { display: inline-block; margin: 0; padding: 2px 12px; border: 1px solid var(--ink); border-radius: 999px; font-size: var(--type-11, 11px); font-weight: 700; letter-spacing: .08em; line-height: 1.6; }
.memory-card h3:has(.soon-tag) { position: relative; }
.memory-card h3 .soon-tag { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--cream, #f6efe6); }
@media (max-width: 767px) { .memory-card h3 .soon-tag { font-size: 9px; padding: 0 8px; bottom: calc(100% + 1px); } }
/* 「近日追加」が画面の枠にくっついていたので、3枚とも見出しの上の余白を広げ（見出しの高さはそろえたまま）、タグを見出しから少し離す（2026-10-14 トール） */
.memory-card figcaption { padding-top: 56px; }
.memory-card h3 .soon-tag { bottom: calc(100% + 8px); }
@media (max-width: 767px) { .memory-card figcaption { padding-top: 34px; } .memory-card h3 .soon-tag { bottom: calc(100% + 5px); } }