.section-mascot {
  display: block;
  flex: 0 0 auto;
  width: 140px;
  aspect-ratio: 1;
  background-image: url('assets/mascot-static.png');
  background-size: 300% 200%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.mascot-idle { background-position: 0% 0%; }
.mascot-tasks { background-position: 50% 0%; }
.mascot-found { background-position: 100% 0%; }
.mascot-care { background-position: 0% 100%; }
.mascot-plugins { background-position: 50% 100%; }
.mascot-privacy { background-position: 100% 100%; }

.hero-signoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 470px;
  margin-top: 20px;
}
.hero-signoff .hero-english { margin: 0; }
.hero-signoff .section-mascot { width: 128px; }
.section-heading .section-mascot { align-self: center; }
.section-heading:has(.section-mascot) { gap: 28px; }
.section-heading:has(.section-mascot) > p { flex-shrink: 0; }

.care-signoff, .privacy-signoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
}
.care-signoff .section-mascot, .privacy-signoff .section-mascot { width: 120px; }
.care-signoff .care-handwritten { margin-top: 0; }
.privacy-signoff .text-link { font-size: 12px; color: var(--leaf); }
.download-welcome { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.download-welcome .section-mascot { width: 112px; }
.download-welcome h2 { font-size: clamp(32px, 3.25vw, 43px); }

@media (min-width: 1101px) {
  .task-section.section-pad, .plugins-section.section-pad { padding-block: 72px; }
}

@media (min-width: 1101px) and (max-height: 820px) {
  .task-section.section-pad, .plugins-section.section-pad { padding-block: 40px; }
  .task-heading, .plugins-section .section-heading { margin-bottom: 24px; }
  .task-heading h2 { font-size: 34px; line-height: 1.4; }
  .section-heading .section-mascot { width: 120px; }
  .task-demo > [data-step] { padding: 22px 24px 18px; }
  .message-thread { min-height: 150px; margin: 20px 0 16px; }
  .demo-result-wrap { min-height: 186px; padding: 20px 0 12px; }
  .notification-scene { min-height: 186px; padding-top: 20px; }
}

@media (max-width: 1100px) {
  .section-heading:has(.section-mascot) { position: relative; padding-right: 120px; }
  .section-heading .section-mascot { position: absolute; width: 104px; right: 0; top: 0; }
  .section-heading:has(.section-mascot) > p { flex-shrink: 1; }
  .care-signoff, .privacy-signoff { gap: 10px; }
  .care-signoff .section-mascot, .privacy-signoff .section-mascot { width: 96px; }
  .download-welcome { gap: 12px; }
  .download-welcome .section-mascot { width: 88px; }
}

@media (max-width: 760px) {
  .site-footer { padding-bottom: 32px; }
  .hero-signoff { max-width: 380px; margin-top: 24px; }
  .hero-signoff .section-mascot { width: 96px; }
  .section-heading:has(.section-mascot) { padding-right: 0; gap: 20px; }
  .section-heading:has(.section-mascot) > div { padding-right: 90px; }
  .section-heading .section-mascot { width: 82px; top: 28px; }
  .section-heading:has(.section-mascot) > p { width: 100%; }
  .care-signoff, .privacy-signoff { margin-top: 20px; }
  .care-signoff .section-mascot, .privacy-signoff .section-mascot { width: 88px; }
  .download-welcome .section-mascot { width: 92px; }
  .download-welcome h2 { font-size: 31px; }
}

@media (max-width: 380px) {
  .hero-signoff { gap: 8px; }
  .hero-signoff .section-mascot { width: 78px; }
  .section-heading .section-mascot { width: 70px; }
  .section-heading:has(.section-mascot) > div { padding-right: 76px; }
  .download-welcome .section-mascot { width: 76px; }
  .download-welcome h2 { font-size: 27px; }
}