.mopingo-page { color: #080908; background: #fcfbf6; --blue: #397d5b; --mopingo-accent: #b0c957; --muted: #555d63; --line: #e2e4df; font-size: 16px; }
.mopingo-page .wrap { max-width: 1600px; padding-inline: 80px; }
.mopingo-page header { background: #fcfbf6f2; border-bottom: 1px solid var(--line); }
.mopingo-page .navigation { height: 88px; }
.mopingo-page nav a { font-size: 16px; color: var(--muted); }
.mopingo-page .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 24px 'Oswald', sans-serif; color: #193c2e; }
.mopingo-page .brand img { width: 38px; height: 38px; border-radius: 11px; }
.mopingo-page .button { --button-accent: var(--mopingo-accent); min-height: 46px; padding: 12px 20px; gap: 20px; border: 0; border-radius: 16px; background: #050505; font-size: 16px; font-weight: 600; }
.mopingo-page .button:hover { background: #252525; }
.mopingo-page .button.small { min-height: 42px; padding: 10px 16px; }
.mopingo-page .button > span { font-family: inherit; font-size: 28px; line-height: .7; font-weight: 400; }
.mopingo-page .text-link:hover { color: var(--blue); }
.mopingo-page .section { padding-block: 64px; }
.mopingo-page .section-light { background: #fcfbf6; }
.mopingo-page .section-tinted { background: #eff5e9; }
.mopingo-page .hero { padding: 64px 0 40px; }
.mopingo-page .hero-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.mopingo-page .hero-intro, .mopingo-page .hero-visual { min-width: 0; }
.mopingo-page h1 { margin: 0 0 28px; font-size: clamp(48px, 4.3vw, 64px); letter-spacing: -1.5px; line-height: 1.08; }
.mopingo-page h1 span { color: #397d5b; }
.mopingo-page .eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: #397d5b; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; }
.mopingo-page .eyebrow::before { content: ''; flex: 0 0 30px; height: 2px; background: var(--blue); }
.mopingo-page .hero .eyebrow::before { display: none; }
.mopingo-page .eyebrow .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #86b85e; }
.mopingo-page .hero-copy { max-width: 520px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.mopingo-page .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.mopingo-page .hero-visual { padding: 0; }
.mopingo-page .hero-visual img { display: block; width: 100%; max-width: 100%; height: auto; }
.mopingo-page figure { margin: 0; }
.mopingo-page figcaption { margin-top: 16px; color: var(--muted); text-align: center; }
.mopingo-page .image-placeholder { position: relative; display: grid; place-items: center; width: 100%; min-height: 350px; overflow: hidden; border: 1px solid #d9e1d1; border-radius: 23px; background-color: #f7f8ed; background-image: radial-gradient(#cad9bd 1px, transparent 1px); background-size: 22px 22px; box-shadow: 0 20px 40px -24px #27433355; }
.mopingo-page .map-placeholder { min-height: 445px; background-color: #edf2e3; background-image: linear-gradient(33deg, transparent 47%, #dce6d1 48%, #dce6d1 51%, transparent 52%), linear-gradient(110deg, transparent 43%, #dce6d1 44%, #dce6d1 46%, transparent 47%), radial-gradient(#c8d8bd 1px, transparent 1px); background-size: 240px 180px, 290px 230px, 18px 18px; border: 0; border-radius: 9px; box-shadow: none; }
.mopingo-page .placeholder-label { position: absolute; top: 16px; left: 18px; z-index: 2; padding: 7px 12px; border: 1px dashed #88a57d; border-radius: 20px; background: #fffffff0; color: #587050; font-size: 13px; }
.mopingo-page .map-pin { position: absolute; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 4px solid #fff; border-radius: 50% 50% 50% 4px; background: #397d5b; box-shadow: 0 5px 10px #27433338; color: white; font-weight: 700; transform: rotate(-45deg); }
.mopingo-page .map-pin::first-letter { transform: rotate(45deg); }
.mopingo-page .pin-one { top: 29%; left: 24%; }.mopingo-page .pin-two { top: 56%; left: 52%; background: #e99655; }.mopingo-page .pin-three { top: 32%; right: 20%; background: #7c72a8; }
.mopingo-page .map-route { position: absolute; top: 39%; left: 30%; width: 42%; height: 28%; border: 3px dashed #638c60; border-color: #638c60 transparent transparent #638c60; border-radius: 50%; transform: rotate(12deg); }
.mopingo-page .map-caption { position: absolute; right: 18px; bottom: 16px; color: #667961; font-size: 14px; }
.mopingo-page .section-heading { max-width: 760px; margin: 0 0 32px; text-align: left; }
.mopingo-page h2 { margin: 0 0 32px; font-size: 42px; letter-spacing: -.65px; }
.mopingo-page h3 { margin: 0 0 20px; font-size: 25px; }
.mopingo-page .muted, .mopingo-page .pillar p { color: var(--muted); }
.mopingo-page .pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mopingo-page .pillar { padding: 28px; border-radius: 25px; background: #eff5e9; }
.mopingo-page .pillar:nth-child(2) { background: #f6eee3; }
.mopingo-page .pillar:nth-child(3) { background: #eeeaf5; }
.mopingo-page .pillar p { margin: 0; }
.mopingo-page .icon-box { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; border-radius: 15px; background: #d2e5bc; color: #315e41; }
.mopingo-page .pillar:nth-child(2) .icon-box { background: #f0ddc6; color: #845b35; }
.mopingo-page .pillar:nth-child(3) .icon-box { background: #ddd5ef; color: #66588e; }
.mopingo-page svg.icon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mopingo-page .icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mopingo-page .feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 64px; }
.mopingo-page .feature > * { min-width: 0; }
.mopingo-page .feature-copy h2 { max-width: 470px; }
.mopingo-page .feature-copy p:not(.eyebrow) { color: var(--muted); }
.mopingo-page .feature-copy ul { margin: 24px 0 0; padding: 0; list-style: none; }
.mopingo-page .feature-copy li { position: relative; padding: 8px 0 8px 28px; color: var(--muted); }
.mopingo-page .feature-copy li::before { position: absolute; left: 0; color: #397d5b; content: '✓'; }
.mopingo-page .visual { padding: 28px; border-radius: 25px; background: #eff5e9; }
.mopingo-page .visual img { display: block; width: 100%; max-width: 100%; height: auto; border: 1px solid #d9e1d1; border-radius: 12px; box-shadow: 0 12px 24px -16px #27433338; }
.mopingo-page .visual figcaption { font-size: 14px; }
.mopingo-page .visual.calendar-visual, .mopingo-page .route-section .visual.route-visual, .mopingo-page .feature-section.section-tinted .visual.geopoint-visual, .mopingo-page .visual.share-visual, .mopingo-page .visual.mopingo-plus-visual { padding: 0; border-radius: 0; background: transparent; }
.mopingo-page .visual.calendar-visual img, .mopingo-page .visual.route-visual img, .mopingo-page .visual.geopoint-visual img, .mopingo-page .visual.share-visual img, .mopingo-page .visual.mopingo-plus-visual img { border: 0; border-radius: 0; box-shadow: none; }
.mopingo-page .visual.calendar-visual { position: relative; isolation: isolate; }
.mopingo-page .visual.calendar-visual img { border-radius: 14px; }
.mopingo-page .place-placeholder { min-height: 350px; background-color: #f6f3ea; }
.mopingo-page .mock-place-card { width: min(72%, 290px); padding: 15px; border: 1px solid #e6e5da; border-radius: 18px; background: #fff; box-shadow: 0 12px 25px #34482a1c; }
.mopingo-page .mock-photo { display: block; height: 125px; margin-bottom: 15px; border-radius: 12px; background: linear-gradient(145deg, #d5e4c8, #e8d6bd 52%, #b7c9ab); }
.mopingo-page .mock-line { display: block; width: 65%; height: 8px; margin-top: 10px; border-radius: 8px; background: #e4e9df; }.mopingo-page .mock-line.long { width: 88%; height: 12px; background: #b9cbb0; }
.mopingo-page .mock-tag { display: inline-block; margin-top: 16px; padding: 5px 9px; border-radius: 14px; background: #edf4e7; color: #54704b; font-size: 12px; }
.mopingo-page .days-placeholder { background-color: #f1f3e9; }
.mopingo-page .mock-calendar { width: min(82%, 360px); padding: 20px; border: 1px solid #e3e7dd; border-radius: 19px; background: #fff; box-shadow: 0 12px 25px #34482a1c; }
.mopingo-page .mock-calendar-head { display: flex; justify-content: space-between; margin-bottom: 14px; color: #355840; font-weight: 700; }
.mopingo-page .mock-day { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid #edf0e9; color: #73816f; }
.mopingo-page .mock-day b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #e9f1e0; color: #315e41; }
.mopingo-page .mock-day span { display: flex; gap: 7px; }.mopingo-page .mock-day i { display: block; width: 48px; height: 24px; border-radius: 7px; background: #e9d9c4; }.mopingo-page .mock-day i:nth-child(2) { background: #dce8cf; }.mopingo-page .mock-day i:nth-child(3) { background: #e1dcf0; }
.mopingo-page .route-section { background: #eff5e9; }
@media (min-width: 761px) {
  .mopingo-page .feature-reverse .visual { order: -1; }
}
.mopingo-page .route-placeholder { min-height: 350px; background-color: #eff2e6; }
.mopingo-page .route-line { display: flex; align-items: center; gap: 15px; color: #55704d; font-size: 13px; }.mopingo-page .route-line i { width: 13px; height: 13px; border: 3px solid white; border-radius: 50%; background: #397d5b; box-shadow: 0 0 0 1px #83a477; }.mopingo-page .route-line i:nth-of-type(2) { background: #e99655; }.mopingo-page .route-line i:nth-of-type(3) { background: #7c72a8; }
.mopingo-page .route-stats { position: absolute; right: 20px; bottom: 18px; left: 20px; display: flex; justify-content: space-between; color: #667961; font-size: 13px; }
.mopingo-page .journey-banner { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 40px; padding: 37px 40px; border-radius: 25px; background: #050505 url('/assets/images/stroke-mopingo-2.svg') no-repeat right center / 110px 100%; color: white; }
.mopingo-page .journey-banner > * { min-width: 0; }
.mopingo-page .journey-banner h2 { margin: 0; font-size: 48px; }
.mopingo-page .journey-banner p { margin: 0; }
.mopingo-page .journey-banner .eyebrow { margin-bottom: 18px; color: var(--mopingo-accent); }
.mopingo-page .journey-banner .eyebrow::before { display: none; }
.mopingo-page .together-section { background: #edf3e7; }
.mopingo-page .together-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 64px; }
.mopingo-page .together-grid > * { min-width: 0; }
.mopingo-page .together-grid .section-heading { margin: 0; }
.mopingo-page .mopingo-plus-section { background: #fcfbf6; }
.mopingo-page .store-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.mopingo-page .store-links a { display: inline-flex; max-width: 100%; border-radius: 8px; }
.mopingo-page .store-links img { display: block; width: auto; max-width: 100%; height: 56px; object-fit: contain; }
.mopingo-page .store-links a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.mopingo-page .final-section { padding-block: 64px; background: #edf3e7; }
.mopingo-page .final-cta { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 37px 40px; border-radius: 25px; background: #fcfbf6; color: #080908; text-align: center; }
.mopingo-page .final-cta h2 { position: relative; margin: 0; font-size: 52px; }
.mopingo-page .final-cta h2::after { content: ''; position: absolute; height: 7px; bottom: -12px; left: 6%; right: 6%; background: url('/assets/images/stroke-mopingo-1.svg') center / 100% 100% no-repeat; }.mopingo-page .final-cta p { max-width: 550px; margin: 0; color: #384b35; font-size: 16px; }

.mopingo-page .site-footer { padding-block: 16px; }
@media (max-width: 1150px) { .mopingo-page .wrap { padding-inline: 36px; }.mopingo-page .navigation { gap: 20px; }.mopingo-page nav { gap: 16px; }.mopingo-page .nav-actions { gap: 14px; }.mopingo-page .navigation nav { display: none; }.mopingo-page .hero-layout { gap: 32px; }.mopingo-page .feature { gap: 36px; }.mopingo-page .final-cta { padding: 32px; gap: 26px; } }
@media (max-width: 900px) { .mopingo-page .navigation nav { display: none; }.mopingo-page .hero-layout { grid-template-columns: 1fr 1fr; gap: 28px; }.mopingo-page .map-placeholder { min-height: 370px; }.mopingo-page .feature { gap: 30px; }.mopingo-page .together-grid { gap: 35px; } }
@media (max-width: 760px) {
  .mopingo-page .wrap { padding-inline: 22px; }.mopingo-page .navigation { height: 72px; gap: 12px; }.mopingo-page .brand { font-size: 21px; }.mopingo-page .brand img { width: 34px; height: 34px; }.mopingo-page .nav-actions .text-button { display: none; }.mopingo-page .nav-actions { margin-left: auto; }
  .mopingo-page .hero { padding: 40px 0 12px; }.mopingo-page .hero-layout { grid-template-columns: 1fr; gap: 24px; }.mopingo-page h1 { font-size: 42px; letter-spacing: -.8px; }.mopingo-page .hero-copy { font-size: 16px; } .mopingo-page .map-placeholder { min-height: 300px; border-radius: 18px; }
  .mopingo-page .section { padding-block: 44px; }.mopingo-page .section-heading { margin-bottom: 28px; }.mopingo-page h2, .mopingo-page .feature-copy h2 { font-size: 36px; }.mopingo-page .pillars { grid-template-columns: 1fr; gap: 16px; }.mopingo-page .pillar { padding: 24px; }
  .mopingo-page .feature, .mopingo-page .together-grid { grid-template-columns: 1fr; gap: 24px; }.mopingo-page .feature-reverse .visual { order: 2; }.mopingo-page .feature-reverse .feature-copy { order: 1; }.mopingo-page .visual { padding: 16px; }.mopingo-page .image-placeholder { min-height: 285px; }.mopingo-page .place-placeholder, .mopingo-page .days-placeholder, .mopingo-page .route-placeholder { min-height: 285px; }
  .mopingo-page .final-section { padding-block: 44px; }.mopingo-page .final-cta { padding: 30px 25px; gap: 28px; }.mopingo-page .final-cta h2 { font-size: 44px; }
}
@media (max-width: 380px) { .mopingo-page .wrap { padding-inline: 18px; }.mopingo-page h1 { font-size: 39px; }.mopingo-page .button.small { padding-inline: 12px; font-size: 14px; }.mopingo-page .mock-day { gap: 7px; }.mopingo-page .mock-day i { width: 39px; } }
@media (prefers-reduced-motion: reduce) { .mopingo-page .button { transition: none; } }

.mopingo-page .text-button { color: #080908; }
.mopingo-page nav a:hover { color: var(--blue); }
.mopingo-page .feature-section.section-tinted .visual, .mopingo-page .route-section .visual { background: white; }
@media (max-width: 760px) {
  .mopingo-page .map-placeholder { border-radius: 9px; }
  .mopingo-page .journey-banner { grid-template-columns: 1fr; padding: 30px 25px; gap: 28px; background-image: none; }
  .mopingo-page .journey-banner h2 { font-size: 42px; }
}
@media (min-width: 1601px) {
  .mopingo-page, .mopingo-page .hero-copy, .mopingo-page .pillar p, .mopingo-page .feature-copy li, .mopingo-page .final-cta p { font-size: 20px; }
  .mopingo-page h1 { font-size: 80px; }
  .mopingo-page h2 { font-size: 52.5px; }
  .mopingo-page h3 { font-size: 32px; }
  .mopingo-page .final-cta h2 { font-size: 65px; }
  .mopingo-page .journey-banner h2 { font-size: 60px; }
}

.mopingo-page .geopoint-visual { --video-aspect-ratio: 1316 / 720; --video-focus-color: #397d5b; }
.mopingo-page .video-caption { margin-top: 0; text-align: left; }